/* Minification failed. Returning unminified contents.
(2169,10): run-time error CSS1035: Expected colon, found '0'
 */
#mainContentsCreate {
    margin: 0 20px 54px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
#mainContentsLastPreview {
    margin: 0 20px 54px 20px;
    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: 5px 12px 7px 44px;
  border-radius: 6px;
  color:#767667;
  background-color: transparent;
  font-size:16px;
  vertical-align: middle;
  cursor: pointer;
}
.radio:after,
.checkbox:after {
  position: absolute;
  top: 50%;
  left: 15px;
  display: block;
  margin-top: -10px;
  width: 16px;
  height: 16px;
  border: 2px solid #bbb;
  border-radius: 2px;
  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: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #53b300;
  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: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}
.makeOverArea > .wallpaperChangeArea {
    margin-top: 10px;
}
.roomChangeArea > .roomChangeLabelArea,
.wallpaperChangeArea > .wallpaperChangeLabelArea {
    flex: 1 1 160px;
    text-align: right;
}
.roomChangeArea > .roomChoicesArea,
.wallpaperChangeArea > .wallpaperChoicesArea {
    display: flex;
    flex: 1 1 520px;
    list-style: none;
}
.roomChangeArea > .roomChoicesArea > .roomChoices,
.wallpaperChangeArea > .wallpaperChoicesArea > .wallpaperChoices {
    margin-left: 6px;
    cursor: pointer;
}
.roomChangeArea > .roomChoicesArea > .roomChoices:first-child,
.wallpaperChangeArea > .wallpaperChoicesArea > .wallpaperChoices:first-child {
    margin-left: 0;
}
.roomChangeLabel,
.wallpaperChangeLabel {
    font-size: 16px;
    color: #767676;
    margin-right:20px;
}
.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;
}

/*アイテム変更エリア*/
.makeOverArea > .itemChangeArea {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 340px;
    height: 50px;
}
.itemChangeArea > .itemChangeButton {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: solid 2px #ccc;
    padding: 30px 0 0 0;
    border-radius: 10px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 60%;
}
.itemChangeArea > .itemChangeButton.prev {
    background-image: url(../common-img/img/svg/btn_icon_prevImage.svg);
    background-position: 8px center;
}
.itemChangeArea > .itemChangeButton.next {
    background-image: url(../common-img/img/svg/btn_icon_nextImage.svg);
    background-position: 12px center;
}
.itemChangeButton > span {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: auto;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    white-space: pre;
    color: #767676;
}
.itemChangeArea > .itemChangeTextArea {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: calc(100% - 140px);
    height: 100%;
    border-radius: 10px;
    background-color: #fff;
}
.itemChangeTextArea > .itemChangeText {
    display: -webkit-flex;
    display: flex;
    width: auto;
    height: 20px;
}
.itemChangeText > .itemChangeTextNumerator {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 20px;
    text-align: center;
    font-size: 20px;
    white-space: pre;
    box-sizing: border-box;
    padding: 0 5px;
}
.itemChangeText > .itemChangeTextDenominator {
    display: block;
    width: auto;
    height: 20px;
    line-height: 24px;
    text-align: left;
    font-size: 14px;
    white-space: pre;
}

/***************** 商品サイズ選択画面 *****************/
.productSizeArea {
    position: absolute;
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
    top: 90px;
    left: 0;
    right: 20px;
    bottom: 10px;
}
.productSizeScrollArea {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.productSizeList {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.productSizeListItem {
    position: relative;
    width: 220px;
    height: 90px;
    margin: 6px;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 10px;
    background-color: #fff;
}
.productSizeListItem.selected {
    background-color: #dd621c;
}
.productSizeLabelArea {
    position: absolute;
    top: 1rem;
    left: 2rem;
}
.productSizeLabelArea > .productSizeLabel {
    font-size: 1.5rem;
    color: #767676;
}
.productSizeListItem.selected .productSizeLabel {
    color: #fff;
}
.productPriceLabelArea {
    position: absolute;
    width: 185px;
    top: 4.4rem;
    bottom: auto;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.productPriceLabelArea > .productPriceLabel {
    font-size: 2.4rem;
    font-weight: bold;
    color: red;
}
.productSizeListItem.selected .productPriceLabel {
    color: #ff0;
}

/***************** テープ、マット選択画面 *****************/
.frameSelectArea,
.tapeSelectArea,
.mattSelectArea,
.paperSelectArea,
.borderSelectArea,
.edgeSelectArea,
.surfaceSelectArea,
.changesSelectArea {
    position: absolute;
    width: -webkit-calc(100% - 20px);
    width: calc(100% - 20px);
    top: 130px;
    left: 0;
    right: 20px;
    bottom: 10px;
}
.frameSelectScrollArea,
.tapeSelectScrollArea,
.mattSelectScrollArea,
.paperSelectScrollArea,
.borderSelectScrollArea,
.edgeSelectScrollArea,
.surfaceSelectScrollArea,
.changesSelectScrollArea {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.frameSelectList,
.tapeSelectList,
.mattSelectList,
.paperSelectList,
.borderSelectList,
.edgeSelectList,
.surfaceSelectList,
.changesSelectList {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.frameSelectListItem,
.tapeSelectListItem,
.mattSelectListItem,
.paperSelectListItem,
.edgeSelectListItem,
.surfaceSelectListItem,
.borderSelectListItem {
    width: 220px;
    height: 90px;
    margin: 6px;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 10px;
    background-color: #fff;
}
.frameSelectListItem.selected,
.tapeSelectListItem.selected,
.mattSelectListItem.selected,
.paperSelectListItem.selected,
.edgeSelectListItem.selected,
.surfaceSelectListItem.selected,
.borderSelectListItem.selected {
    background-color: #dd621c;
}
.frameSelectListItem,
.tapeSelectListItem,
.mattSelectListItem,
.edgeSelectListItem,
.surfaceSelectListItem,
.borderSelectListItem {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.paperSelectListItem {
    position: relative;
    width: 360px;
    height: 140px;
    padding: 1rem;
}
.frameColorLabelArea,
.tapeColorLabelArea,
.mattColorLabelArea,
.edgeNameArea,
.surfaceNameArea,
.borderColorLabelArea {
    width: 180px;
    text-align: center;
}
.frameColorLabel,
.tapeColorLabel,
.mattColorLabel,
.edgeNameLabel,
.surfaceNameLabel,
.borderColorLabel {
    font-size: 2.8rem;
    color: #767676;
}
.frameSelectListItem.selected .frameColorLabel,
.tapeSelectListItem.selected .tapeColorLabel,
.mattSelectListItem.selected .mattColorLabel,
.edgeSelectListItem.selected .edgeNameLabel,
.surfaceSelectListItem.selected .surfaceNameLabel,
.borderSelectListItem.selected .borderColorLabel {
    color: #fff;
}
.paperItemNameArea {
    position: absolute;
    top: 1.6rem;
    left: 2rem;
}
.paperItemNameArea > .paperItemName {
    font-size: 2.2rem;
    color: #767676;
}
.paperSelectListItem.selected .paperItemName {
    color: #fff;
}
.paperItemPriceArea {
    position: absolute;
    right: 2rem;
    top: 1.6rem;
}
.paperItemPriceArea > .paperItemPrice {
    font-size: 2.4rem;
    font-weight: bold;
    color: red;
}
.paperSelectListItem.selected .paperItemPrice {
    color: #ff0;
}
.paperItemDescriptionArea {
    position: absolute;
    top: 6rem;
    left: 1.6rem;
    right: 1.6rem;
}
.paperItemDescriptionArea > .paperItemDescription {
    font-size: 1.6rem;
    color: #767676;
}
.paperSelectListItem.selected .paperItemDescription {
    color: #fff;
}
.changesSelectListItem {
    width: 120px;
    height: 86px;
    margin: 8px;
}
.changesItemButton {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.8);
    padding: 5rem 0.6rem 0.6rem;
    font-size: 1.5rem;
    color: #fff;
    background-image: url("");
    background-position: 50% 20%;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 30%;
}

#paper-button {
  background-image: url("../common-img/img/svg/btn_icon_option_paper.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: top;
  background-position: center 20%;
}

#frame-button {
  background-image: url("../common-img/img/svg/btn_icon_option_frame.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: top;
  background-position: center 20%;
}

#tape-button {
  background-image: url("../common-img/img/svg/btn_icon_option_tape.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: top;
  background-position: center 20%;
}

#matt-button {
  background-image: url("../common-img/img/svg/btn_icon_option_matt.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: top;
  background-position: center 20%;
}

#border-button {
    background-image: url("../common-img/img/svg/btn_icon_option_border.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: top;
    background-position: center 5%;
}

/*#edge-button {
    background-image: url("../common-img/img/svg/btn_icon_option_border.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: top;
    background-position: center 5%;
}*/

#surface-button {
    background-image: url("../common-img/img/svg/btn_icon_option_surface.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: top;
    background-position: center 20%;
}

/** プレビュー画面のポップアップ **/
.popupConfirmSettings {
  position: absolute;
  width: 70%;
  max-width: 1200px;
  height: 80%;
  max-height: 800px;
  top: -22px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  /*-webkit-transform: translate(-50%, -50%);*/
  /*transform: translate(-50%, -50%);*/
  margin: auto;
  padding: 15px 2.5rem 69px 2.5rem;
  background-color: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #333333;
  box-sizing: border-box;
  overflow: hidden;
}

/******* オプション写真選択ガイド *******/
.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;
}

/******* mac対応 *******/
body.osMac .previewContentsArea #headerCaption {
    font-size: 2.3rem;
}
body.osMac .previewContentsArea #subtitle {
    font-size: 1.8rem;
}
body.osMac .changesItemButton {
    font-size: 1.3rem;
}
.designItemArea {
    position: absolute;
    width: calc(100% - 20px);
    top: 90px;
    left: 0;
    right: 20px;
    bottom: 0;
}

.designItemScrollArea {
    margin:auto;
    width: 1020px;
    height: 100%;
    overflow-y: auto;
}

.designItemListArea {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

    .designItemList {
        position: relative;
        width: 310px;
        height: 220px;
        margin: 10px;
        padding:10px;
        box-sizing: border-box;
        border: 2px solid rgba(0,0,0,0.2);
        border-radius: 10px;
        background-color: #fff;
    }

.designItemTmbArea{
    display:block;
    width:100%;
    height:calc(100% - 30px);
}

.designItemTmb {
    display:block;
    width:100%;
    height:100%;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
}

.designItemNameArea {
    display:block;
    width:100%;
    height:30px;
}

.designItemName {
    color:#767676;
    font-size:16px;
    text-align:center;
    letter-spacing:-1px;
    line-height:30px;
}

@media screen and (min-width: 1390px) {
    .designItemScrollArea {
        width: 1350px;
    }
}
@media screen and (min-width: 1720px) {
    .designItemScrollArea {
        width: 1680px;
    }
}
@media screen and (min-width: 2050px) {
    .designItemScrollArea {
        width: 2010px;
    }
}
#mainContents {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  margin: 0 20px 54px 20px;
}
#headerAreaUpload {
	padding: 2rem 3rem 0px;
}
#headerCaption {
	color: rgb(118, 118, 118);
    /*font-size: 3rem;*/
    font-size: 2.5rem;
}
#readImageSourceArea {
  position: relative;
  width: 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: 2rem 3rem 0px;
}
#readImageSourceCaption {
	/*font-size: 2.3rem;*/
    font-size: 2rem;
}
#imgSrcGrpZone {
  position: relative;
  width: 80%;
  margin: 0 10%;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
#imgSrcGrps {
    position: absolute;
    width: 100%;
    height: 100%;
    left: -50px;
    top: 0px;
    right: 0px;
    bottom: 0px;
	padding: 0px 50px;
    overflow: hidden;
}
.imgSrcGrp {
    display: inline-block;
    width: 100%;
    height: 100%;
	padding: 0px 40px 0px 30px;
    box-sizing: border-box;
}
.browserIE .imgSrcGrp {
	height: calc(100% - 2px);
}
.imgSrcsZone {
	width: 100%;
    height: 100%;
}
.imgSrcs {
	width: 100%;
    height: 100%;
    white-space: normal;
}
.imgSrc {
    display: inline-block;
    position: relative;
	/*width: 25%;*/
    /*height: 49.5%;*/
    width: 150px;
    height: 150px;
    margin: 15px;
}
.imgSrcBtnZone {
    /*
    position: absolute;
    width: 90%;
    height: 0px;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    padding-top: 90%;
	margin: auto;
    */
    top:25%;
    background-color: rgb(255, 255, 255);
}
.imgSrcBtnZone {
	top: 25%;
}
:nth-child(4).imgSrc ~ .imgSrc .imgSrcBtnZone {
	top: 0px;
    bottom: 25%;
}
.imgSrcBtn {
    position: absolute;
    width: 100%;
    min-width: 140px;
    height: 100%;
    padding: 1.2rem 1.6rem 1.6rem;
    /*margin-top: -100%;*/
    color: rgb(51, 51, 51);
    font-family: "Meiryo UI", "���C���I", "�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 3rem;
    line-height: 2.8rem;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    background-repeat: no-repeat;
	background-position: center 80%;
    background-size: 56%;
    background-color: rgb(255, 255, 255);
    transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
}
.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);
  }
}
.imgSrcBtn:active {
	color: rgb(255, 255, 255);
    text-shadow: 0px 0px 20px #ffffff;
    background-color: rgb(237, 159, 114);
}
.selected .imgSrcBtn {
	color: rgb(255, 255, 255);
    background-color: rgb(221, 98, 28);
}
.imgSrcBtn .selected {
	color: rgb(255, 255, 255);
    background-color: rgb(221, 98, 28);
}
.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 {
    width: 100%;
    height: 100%;
	padding: 0px 1rem;
    text-align: center;
    line-height: 1.3em;
    font-size: 1.8rem;
    font-weight: bold;
    box-sizing: border-box;
    cursor: pointer;
}
body.osMac .imgSrcTitle {
	padding: 0px 0.6rem;
    font-size: 1.4rem;
}
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;
}
#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;
    padding: 2rem 2.5rem 80px 2.5rem;
	margin: auto;
    color: rgb(51, 51, 51);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-image: none;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    flex-direction: column;
    -webkit-flex-direction: column;
}
.uploadConfirmContentsZone {
    display: -webkit-flex;
    display: flex;
	height: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
}
.uploadConfirmCaption {
    height: 2.2em;
    text-align: left;
    color: rgb(118, 118, 118);
    line-height: 1.7em;
    font-size: 2rem;
	flex:0 0 auto;
    -webkit-flex: 0 0 auto;
    box-sizing: border-box;
}
.uploadScheduledQuantityCaption {
	height: 1.7em;
    color: rgb(118, 118, 118);
    font-size: 2rem;
}
.uploadScheduledQuantityColon {
    height: 1.7em;
	padding: 0px;
    margin-bottom: 1.5rem;
    color: rgb(118, 118, 118);
    font-size: 2rem;
}
.uploadScheduledQuantity {
	height: 1.7em;
    color: rgb(221, 98, 28);
    font-size: 2rem;
}
.uploadScheduledQuantityCaption2 {
	height: 1.7em;
    color: rgb(118, 118, 118);
    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: calc(100% - 66px);
    min-height: 20px;
	padding: 10px 0px;
    color: rgb(255, 255, 255);
    font-size: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: rgb(102, 102, 102);
}
#tableHeaderUploadFileName {
	margin: 0px 1.25em;
    flex:1 1 auto;
    -webkit-flex: 1 1 auto;
}
#tableHeaderUploadProprietyCap {
	margin: 0px 1.25em;
    flex:0 1 auto;
    -webkit-flex: 0 1 auto;
}
.dragAndDropUploadArea {
    position: relative;
    width: 100%;
    height: 100%;
    border: 3px dashed #999;
}
.ddDistributionArea {
    position: absolute;
    width: 100%;
    height: 50%;
    top:20%;
}
.uploadIconArea {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}
.uploadIcon {
    width: 100%;
    height: 80%;
}
.dispCaptionArea {
    position: absolute;
    width: 100%;
    bottom: 0;
    font-size: 32px;
    color: #333;
    text-align: center;
}
.uploadFileList {
    overflow: auto;
    width: calc(100% - 66px);
    margin-bottom: 20px;
    font-size: 18px;
	border-radius: 0px 0px 10px 10px;
    flex:1 1 1px;
    -webkit-flex: 1 1 1px;
}
.uploadFileList > li {
    text-indent: 1rem;
    background-color: rgb(252, 252, 252);
}
.uploadFileList > li:nth-of-type(2n-1) {
	background-color: rgb(242, 242, 242);
}
.uploadFiles {
    position: relative;
    display: -webkit-flex;
    display: flex;
    height: 2.5rem;
	padding: 10px 8px 6px 8px;
}
.tableUploadFileNameAreaGrp {
    height: 100%;
    overflow: hidden;
    -webkit-flex: 0 0 75%;
	flex:0 0 75%;
}
.tableUploadProprietyCapAreaGrp {
    -webkit-flex: 0 0 25%;
	flex:0 0 25%;
}
.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: 60px;
    left: 0px;
    bottom: 0px;
	padding: 0px 2.5rem 1rem 2.5rem;
    background-color: rgba(113, 168, 9, 0.8);
    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;
}
.browserIE .uploadConfirmBtnArea {
	z-index: 10;
}
.uploadConfirmCancel {
	display: inline-block;
}
.uploadConfirmCancelBtn {
    position: relative;
    display: block;
    min-width: 180px;
    height: 34px;
	padding: 0.4rem 1.1rem;
    color: rgb(255, 255, 255);
    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: 1px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    background-color: transparent;
    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;
}
.uploadConfirmCancelBtn:active {
	background-color: rgb(221, 98, 28);
}
.uploadConfirmExeUpload {
    display: inline-block;
	margin-right: 1em;
}
.uploadConfirmExeUploadBtn {
    display: block;
    position: relative;
    min-width: 180px;
    height: 34px;
	padding-left: 30px;
    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;
    border: 3px solid rgb(255, 255, 255);
    border-radius: 10px;
    background-color: transparent;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-image: url("../common-img/img/svg/drop_parts_uproad_icon.svg");
    transition: 200ms;
    -webkit-transition: all 200ms ease;
}
.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;
}
.uploadConfirmExeUploadBtn:active {
	background-color: rgb(221, 98, 28);
}
.uploadConfirmAddImage {
	display: inline-block;
}
.uploadConfirmAddImageBtn {
    position: relative;
    display: block;
    min-width: 180px;
    height: 34px;
	padding: 0.4rem 1.1rem 1.1rem;
    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;
    border: 3px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    background-color: transparent;
    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;
}
.uploadConfirmAddImageBtn:active {
	background-color: rgb(221, 98, 28);
}
.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-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-image: none;
    color: rgb(51, 51, 51);
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
}
.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;
    margin-bottom: 70px;
    background-color: rgba(0, 0, 0, 0.05);
}
.progressbarReceive {
    position: absolute;
    top: 0px;
    width: 0px;
    height: 15px;
    bottom: 0px;
	margin: auto;
    background-color: rgba(113, 168, 9, 0.8);
    transition:width 100ms;
}
.readBtnArea {
    display: -webkit-flex;
    display: flex;
    height: 54px;
	border-radius: 0px 0px 10px 10px;
    background-color: rgba(113, 168, 9, 0.8);
    -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: 34px;
	margin: 1rem;
}
.readBtn {
    display: block;
    min-width: 160px;
    height: inherit;
	padding: 0.4rem 1.3rem 1.3rem;
    color: rgb(255, 255, 255);
    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: 1px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    background-color: transparent;
    transition:200ms;
    -webkit-transition: all 200ms ease;
}
.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;
}
.readBtn:active {
	background-color: rgb(221, 98, 28);
}
.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;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    width: 70%;
    min-width: 1000px;
    height: 70%;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 130px;
	margin: auto;
    padding: 2rem 2.5rem 120px;
    color: rgb(51, 51, 51);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-image: none;
    background-color: rgb(255, 255, 255);
    -webkit-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
}
.fileUploadFailurContentsZone {
	height: 100%;
    margin-bottom: 2.5rem;
}
.fileUploadFailureConfirmCaptionZone {
	height: 2.2em;
    text-align: left;
    color: rgb(118, 118, 118);
    line-height: 1.7em;
    font-size: 2.2rem;
    box-sizing: border-box;
}
.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;
}
.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 {
    position: absolute;
    width: 100%;
    height: 80px;
    bottom: 0px;
	left: 0px;
    background-color: rgba(113, 168, 9, 0.8);
    box-sizing: border-box;
}
.fileUploadFailureOkBtnArea {
    display: -webkit-flex;
    display: flex;
	width: 100%;
    height: 100%;
    align-items: center;
    -webkit-align-items: center;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: center;
    -webkit-justify-content: center;
}
.fileUploadFailureOkBtn {
    display: block;
    min-width: 160px;
    height: 60px;
	padding: 0.8rem 1.3rem 1.3rem;
    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;
    color: rgb(255, 255, 255);
    background-color: transparent;
    border: 3px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    transition:200ms;
    -webkit-transition: all 200ms ease;
}
.anmEffect .fileUploadFailureOkBtn {
	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.fileUploadFailureOkBtn {
	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;
}
.fileUploadFailureOkBtn:active {
	background-color: rgb(221, 98, 28);
}
.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 {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    width: 70%;
    min-width: 550px;
    height: 70%;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 130px;
	margin: auto;
    padding: 2rem 2.5rem 120px;
    color: rgb(51, 51, 51);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-image: none;
    background-color: rgb(255, 255, 255);
    flex-direction: column;
    -webkit-flex-direction: column;
    box-sizing: border-box;
}
.uploadLimitConfirmContentsZone {
	height: 100%;
    margin-bottom: 2.5rem;
}
.uploadLimitConfirmTitle {
	height: 1.7em;
    color: rgb(118, 118, 118);
    font-size: 2.2rem;
}
.uploadLimitConfirmContents {
    font-size: 2rem;
}
.okBtnArea {
    position: absolute;
    width: 100%;
    height: 80px;
    bottom: 0px;
	left: 0px;
    background-color: rgba(113, 168, 9, 0.8);
    box-sizing: border-box;
}
.okBtnZone {
    display: -webkit-flex;
    display: flex;
	width: 100%;
    height: 100%;
    align-items: center;
    -webkit-align-items: center;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: center;
    -webkit-justify-content: center;
}
.uploadLimitConfirmOkBtn {
    display: block;
    min-width: 160px;
    height: 60px;
	padding: 0.8rem 1.3rem 1.3rem;
    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;
    color: rgb(255, 255, 255);
    background-color: transparent;
    border: 3px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    transition:200ms;
    -webkit-transition: all 200ms ease;
}
.anmEffect .uploadLimitConfirmOkBtn {
	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;
}
.uploadLimitConfirmOkBtn:active {
	background-color: rgb(221, 98, 28);
}
.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);
}

/* ../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: 12px;
}
#footerHelpCaption {
  padding: 0;
  padding-bottom: 0.3rem;
  min-width: 38px;
  line-height: 1;
}
/*************** 編集画面 関数・プロパティ **************/
/* 操作ボタンエリア */
/* スタンプ表示エリア */
/*  */
._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 dotted 1px;
}
/**************** サムネイル(一覧)表示エリア設定 ***************/
#thumbnailArea {
  position: absolute;
  width: 36%;
  top: 0;
  left: 0;
  bottom: 86px;
  background: none;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}
#thumbnailContentsArea {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding-right: 25px;
  height: 100%;
}
/* サムネイルヘッダーエリア */
#thumbnailHeaderArea {
  width: 100%;
  height: 10%;
  position: relative;
}
/* 読み込み画像情報標示エリア */
#readPicInfoArea {
  position: absolute;
  height: 1em;
  top: 0;
  bottom: 0;
  padding: 1em;
  margin: auto;
  color: #ffffff;
  font-size: 2.1rem;
}
#readPicInfo {
  width: 100%;
  height: 100%;
  text-align: center;
}

/* 小サムネイル表示ボタン領域 */
#swithcSmallThumbnailButtonZone {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 50px;
}
#switchSmallThumbnailButton {
    background-image: url("../common-img/img/svg/btn_icon_viewthumb.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 60%;
}
.switchThumbnailButton {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  line-height: 2.8rem;
  outline: none;
  border-radius: 10px;
  font-size: 3rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #ffffff;
  transition: none;
  background-color: #dd621c;
  cursor: pointer;
}
.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);
  }
}
.switchThumbnailButton:active {
  background-color: rgba(0, 0, 0, 0.7);
}
.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: 40px;
  height: 40px;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
#switchBigThumbnailButton {
  background-image: url("../common-img/img/svg/btn_icon_viewzoom.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 60%;
}
#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;
}
#vignettingExplain {
    position: absolute;
    top: 58px;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    color: #444;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
}
#usedImagesExplain {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    color: #444;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
}
#lossIconExplainZone {
  position: absolute;
  font-size:14px;
  color: #333333;
  transition: 300ms right ease;
  top: 35px;
  /*right: -90%;*/
  left: 0;
}
#lossIconExplainImg {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("../common-img/img/svg/status_icon_caution.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#lossIconExplain {
  vertical-align: text-top;
}
body.osMac #lossIconExplain {
  font-size: 10pt;
}
#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: 10px;
  /*right: -90%;*/
  left: 0;
}
#guideExplain {
  vertical-align: text-top;
  font-weight:bold;
  font-size:20px;
}

/* サムネイル表示領域設定 */
#thumbnailDisplayArea {
  position: absolute;
  top: 80px;
  bottom: 0px;
  right: 20px;
  left: 0;
  overflow: hidden;
  font-size:medium;
}
@media screen and (max-height: 800px) {
  #thumbnailDisplayArea {
    top: 80px;
  }
}
@media screen and (min-height: 801px) {
  #thumbnailDisplayArea {
    top: 145px;
  }
}

/* メディア確認中画面表示エリア */
/* サムネイル表示領域設定 */
#thumbnailPicZone {
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  left: 1%;
}
.zoomViewMode #thumbnailPicZone {
  position: relative;
  top: 0;
  bottom: 20%;
  margin: auto;
  width: 100%;
  white-space: nowrap;
  -webkit-mask-image: url("../common-img/img/shadowBothH.png");
  -webkit-mask-size: contain;
}
#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;
}
.thumbnailViewMode #thumbnailPics {
  padding-bottom: 30px;
  box-sizing: border-box;
}
.zoomViewMode #thumbnailPics {
  margin: 0;
}
@media screen and (min-width: 1601px) {
  .zoomViewMode #thumbnailPics {
    /*top: -5%;*/
  }
}
#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: hidden;
}
.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: 165px;
  height: 165px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.zoomViewMode .thumbnailPic {
  width: 320px;
  height: 320px;
}

@media screen and (max-width: 1280px) and (max-height: 800px) {
}
@media screen and (max-height: 900px) {
  .zoomViewMode .thumbnailPic {
    top: 0%;
  }
}
@media screen and (min-height: 901px) and (max-height: 1080px) {
  .zoomViewMode .thumbnailPic {
    top: 0%;
  }
}
@media screen and (min-height: 1081px) and (max-height: 1200px) {
  .zoomViewMode .thumbnailPic {
    top: 12%;
  }
}
@media screen and (min-width: 1920px) and (max-height: 1080px) {
  .zoomViewMode .thumbnailPic {
    top: 5%;
  }
}
.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 {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  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 {
  top: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}
.thumbnailViewMode .checkedItem .imgControlZone.imgAnmA::before,
.zoomViewMode .checkedItem .imgControlZone.imgAnmA::before {
  top: 0;
  left: 10px;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.8) !important;
}
.thumbnailViewMode .checkedItem .imgControlZone.imgAnmB::before,
.zoomViewMode .checkedItem .imgControlZone.imgAnmB::before {
  top: -10px;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8) !important;
}
.thumbnailViewMode .checkedItem .imgControlZone.imgAnmC::before,
.zoomViewMode .checkedItem .imgControlZone.imgAnmC::before {
  top: 0;
  left: -10px;
  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 {
  position: relative;
  left: 0;
  right: 0;
  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;
  top: 10px;
}
.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: 120px;
  max-height: 120px;
}
.zoomViewMode .pic {
  max-width: 280px;
  max-height: 280px;
}
.selectedItem .pic {
  outline: 5px solid #dd621c;
}
.exchangeableItem .pic {
  outline: 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: 20px;
  left: 16px;
  width: 32px;
  height: 32px;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: 200ms all ease;
}
.checkedItem .thumbnailCheckZone {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.microThumbnailViewMode .thumbnailCheckZone {
  display: none;
}
.zoomViewMode .thumbnailCheckZone {
  -webkit-transform: scale(0);
  transform: scale(0);
  top: 63px;
  left: 55px;
}
.zoomViewMode .checkedItem .thumbnailCheckZone {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.thumbnailCheck {
  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;
  top: auto;
  left: auto;
  transition: 200ms margin ease;
}

/* サムネイル回転ボタンゾーン */
.thumbnailRotateButtonZone {
  position: absolute;
  height: 32px;
  width: 32px;
  bottom: 6px;
  left: 20px;
  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;
}
.zoomViewMode .thumbnailRotateButtonZone {
  bottom: 50px;
  left: 62px;
}
.itemSelected .thumbnailRotateButtonZone,
.selectedItem .thumbnailRotateButtonZone {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.thumbnailRotateButton {
  background-image: url("../common-img/img/svg/selected_btn_icon_rotate.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;
  transition: 200ms transform ease;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.itemSelected .thumbnailRotateButton,
.selectedItem .thumbnailRotateButton {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.zoomViewMode .itemSelected .thumbnailRotateButton,
.zoomViewMode .selectedItem .thumbnailRotateButton {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
/* サムネイル超拡大ボタンゾーン */
.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;
}
.thumbnailViewMode .thumbnailReplaceButtonZone {
  bottom: 6px;
  right: 10px;
}
.zoomViewMode .thumbnailReplaceButtonZone {
  top: 240px;
  right: 50px;
}
@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;
  padding: 1.4em 0.5em 0.3em 0.5em;
  background-image: url("../common-img/img/svg/selected_btn_icon_replace.svg");
  background-repeat: no-repeat;
  background-position: 50% -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 .thumbnailReplaceButton,
.selectedItem .thumbnailReplaceButton {
  -webkit-transform: scale(1);
  transform: scale(1);
}
.zoomViewMode .itemSelected .thumbnailReplaceButton,
.zoomViewMode .selectedItem .thumbnailReplaceButton {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  font-size: 1.13rem;
}
/* 状態表示アイコン領域 */
.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;
  right: 20px;
  left: 37%;
}
#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);
  }
}
.layoutDisplayAreaListitem button:active {
  background-color: rgba(0, 0, 0, 0.7);
}
.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 auto;
  pointer-events: none;
  /* 2014/12/22 ii-ogura 解像度対応 */
}
@media only screen and (max-width: 1600px) {
  #layoutZone {
    width: 750px;
  }
}
@media only screen and (min-width: 1601px) {
  #layoutZone {
    width: 900px;
  }
}
#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;
}
/* *************** レイアウト(横長)の時の設定 ************** */
.hrznLayout .layoutBaseZone {
  position: absolute;
  top: 130px;
  right: 2%;
  bottom: 20%;
  left: 1%;
  margin: auto;
  background: none;
}
.vrtclLayout .layoutBaseZone {
  position: absolute;
  top: 110px;
  right: 17%;
  bottom: 90px;
  left: 16%;
  margin: auto;
  background: none;
}
@media screen and (max-height: 700px) {
  .vrtclLayout .layoutBaseZone,
  .hrznLayout .layoutBaseZone {
    top: 22%;
  }
}
@media screen and (min-height: 1300px) {
  .vrtclLayout .layoutBaseZone,
  .hrznLayout .layoutBaseZone {
    top: 9%;
  }
}
/*セット商材の時の設定*/
.setLayout .layoutBaseZone {
  top: 24%;
  bottom: 20%;
}
@media screen and (min-height: 1200px) {
  .setLayout .layoutBaseZone {
    top: 16%;
  }
}
#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;
}

/**************** 右タブエリアなし設定(※表示する場合はbookDataEditRightTab.cssを追加) ***************/
.editRightTabArea{
    display:none;
}
/**************** 固定ボタン表示エリア設定 ***************/
/* 変更履歴操作ボタン領域設定 */
#operationControlZone {
    position: absolute;
    right: 0;
    bottom: 160px;
    /*width: 100%;*/
    width: 165px;
    height: 70px;
    transition: all 300ms ease;
    z-index: 10;
}
@media screen and (max-height: 900px) {
  #operationControlZone {
    bottom: 100px;
  }
}

/*
@media screen and (max-height: 900px) {
  #operationControlZone {
    top: 715px;
  }
}
@media screen and (min-height: 901px) and (max-height: 1024px) {
  #operationControlZone {
    top: 839px;
  }
}
@media screen and (min-height: 1025px) and (max-height: 1080px) {
  #operationControlZone {
    top: 875px;
  }
}
@media screen and (min-height: 1081px) and (max-height: 1200px) {
  #operationControlZone {
    top: 995px;
  }
}
*/
#undoButtonZone {
  position: absolute;
  top: 0;
  left: 20px;
  width: 55px;
  height: 55px;
  background: none;
}
#undoButton {
  padding: 1.6rem;
  padding-top: 1.2rem;
  line-height: 2.8rem;
  min-width: 140px;
  outline: none;
  border-radius: 10px;
  font-size: 3rem;
  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;
  background-image: url("../common-img/img/svg/btn_icon_undo.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center 15%;
  font-size: 1.3rem;
  line-height: 85px;
  min-width: 0;
  padding: 0;
  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: rgba(0, 0, 0, 0.7);
}
.selected #undoButton,
#undoButton.selected {
  background-color: #dd621c;
}
#redoButtonZone {
  position: absolute;
  top: 0;
  right: 20px;
  width: 55px;
  height: 55px;
  background: none;
}
#redoButton {
  padding: 1.6rem;
  padding-top: 1.2rem;
  line-height: 2.8rem;
  min-width: 140px;
  outline: none;
  border-radius: 10px;
  font-size: 3rem;
  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;
  background-image: url("../common-img/img/svg/btn_icon_redo.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center 15%;
  font-size: 1.3rem;
  line-height: 85px;
  min-width: 0;
  padding: 0;
  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: rgba(0, 0, 0, 0.7);
}
.selected #redoButton,
#redoButton.selected {
  background-color: #dd621c;
}

/* コントロールボタンエリア */
.controlButtonZone {
    position: absolute;
    bottom: 25px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* アイテム切替エリア */
.editItemChangeZone {
    position: relative;
    display: -webkit-flex;
    display: flex;
    width: auto;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px 0 0;
}
.editItemChangeArea {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 250px;
    height: 100%;
}
    .editItemChangeArea > .editItemChangeBtn {
        pointer-events: auto;
        display: block;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        border: solid 2px #ccc;
        border-radius: 4px;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: 60%;
        pointer-events: auto;
    }
        .editItemChangeArea > .editItemChangeBtn.prev {
            background-image: url(../common-img/img/svg/btn_icon_prevImage.svg);
            background-position: 6px center;
        }
        .editItemChangeArea > .editItemChangeBtn.next {
            background-image: url(../common-img/img/svg/btn_icon_nextImage.svg);
            background-position: 10px center;
        }
.editItemChangeArea > .editItemChangeTextArea {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: calc(100% - 120px);
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
}
.editItemChangeTextArea > .editItemChangeText {
    display: -webkit-flex;
    display: flex;
    width: auto;
    height: auto;
}
.editItemChangeText > .editItemChangeTextNumerator {
    display: block;
    width: auto;
    height: 100%;
    box-sizing: border-box;
    padding: 0 5px;
}
.editItemChangeText > .editItemChangeTextDenominator {
    display: block;
    width: auto;
    height: 100%;
    font-size: 14px;
    line-height: 40px;
}
.editItemAddBtn,
.editItemDeleteBtn{
    pointer-events: auto;
    outline: none;
    border-radius: 10px;
    font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 1.3rem;
    text-align: left;
    width: 80px;
    height: 100%;
    pointer-events: auto;
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
    box-sizing: border-box;
    padding: 0 0 0 40px;
    margin: 0 0 0 20px;
}
.editItemAddBtn {
    background-image: url(../common-img/img/svg/btn_icon_itemAdd_white.svg);
}
.editItemDeleteBtn {
    background-image: url(../common-img/img/svg/btn_icon_itemDelete_white.svg);
}
.editItemChangeZoneMsg {
    position: absolute;
    bottom: -20px;
    left: 0;
    display: block;
    width: auto;
    height: 20px;
    line-height: 20px;
    text-align: left;
    font-size: 13px;
    white-space: pre;
}

/* 内接モードボタン */
.fitModeBtnZone {
    width: 85px;
    height: 40px;
    background: none;
}

.fitModeBtn {
    outline: none;
    border-radius: 10px;
    font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 1.3rem;
    min-width: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    pointer-events:auto;
}

body.osMac .fitModeBtn {
    font-size: 10pt;
}

.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 {
    background-color: #dd621c;
}
/*******************************
 * ポップアップ系画面エリア設定
 * ***************************** */
#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-image: url("../common-img/img/spk_02_Thumb_back01_parts.png");
  background-repeat: repeat;
  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);
}

.resolutionWarnIconArea {
  position: absolute;
  top: 6px;
  right: 6px;
}
.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: 18px;
  height: 18px;
  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);
  }
}
#dateControlIndicateBtn:active {
  background-color: rgba(0, 0, 0, 0.7);
}
.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);
  }
}
#dateControlPrintBtn:active {
  background-color: rgba(0, 0, 0, 0.7);
}
.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 {
  position: absolute;
  width: 90px;
  height: 26px;
  bottom: -14px;
  right: -45px;
}
.frameRotateA .selectBorderTrimmingButtonZone{
    transform: rotate(270deg);
    right: -45px;
    top: -14px;
}
.frameRotateB .selectBorderTrimmingButtonZone{
    transform: rotate(180deg);
    top: -14px;
    left: -45px;
}
.frameRotateC .selectBorderTrimmingButtonZone{
    transform: rotate(90deg);
    left: -45px;
    right: auto;
}
.selectBorderTrimmingButton {
  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;
}
.selectBorderCommentEditButtonZone {
  position: absolute;
  width: 50px;
  height: 26px;
  bottom: -25px;
  right: -47px;
}
.frameRotateA .selectBorderCommentEditButtonZone {
  transform: rotate(270deg);
  right: -36px;
  top: -36px;
}
.frameRotateB .selectBorderCommentEditButtonZone {
  transform: rotate(180deg);
  top: -25px;
  bottom:auto;
  left: -47px;
  right:auto;
}
.frameRotateC .selectBorderCommentEditButtonZone {
  transform: rotate(90deg);
  left: -24px;
  right: auto;
  bottom:-36px;
}
.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;
}
.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 {
  position: absolute;
  width: 70px;
  height: 26px;
  top: -14px;
  left: -24px;
}
.frameRotateA .selectBorderReplaceButtonZone{
    transform: rotate(270deg);
    bottom: -14px;
    top: auto;
    left: -34px;
}
.frameRotateB .selectBorderReplaceButtonZone{
    transform: rotate(180deg);
    bottom: -14px;
    top: auto;
    right: -34px;
    left: auto;
}
.frameRotateC .selectBorderReplaceButtonZone{
    transform: rotate(90deg);
    right: -34px;
    left: auto;
}
body.osMac .selectBorderReplaceButtonZone {
  width: 80px;
}
.selectBorderReplaceButton {
  position: relative;
  width: 100%;
  height: 100%;
  color: #000;
  font-size: 11pt;
  border: 2px solid #fff;
  border-radius: 3px;
  background-color: #ff0;
  box-sizing:border-box;
}
body.osMac .selectBorderReplaceButton {
  font-size: 10pt;
}
.selectBorderPictureRotateButtonZone {
  position: absolute;
  width: 25px;
  height: 25px;
  bottom: -14px;
  left: -14px;
}
.frameRotateA .selectBorderPictureRotateButtonZone{
    transform: rotate(270deg);
    right: -14px;
    left: auto;
}
.frameRotateB .selectBorderPictureRotateButtonZone{
    transform: rotate(180deg);
    right: -14px;
    left: auto;
    top: -14px;
    bottom: auto;
}
.frameRotateC .selectBorderPictureRotateButtonZone{
    transform: rotate(90deg);
    top: -14px;
    bottom: auto;
}
.selectBorderPictureRotateButton {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #dd621c;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("../common-img/img/svg/selected_btn_icon_rotate.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%;
  box-sizing:border-box;
}
.selectBorderCommentDeleteButtonZone {
    position: absolute;
    width: 25px;
    height: 25px;
    top: -20px;
    right: -20px;
}
.frameRotateA .selectBorderCommentDeleteButtonZone {
    transform: rotate(270deg);
    right: auto;
    left: -20px;
}
.frameRotateB .selectBorderCommentDeleteButtonZone {
    transform: rotate(180deg);
    right: auto;
    left: -20px;
    top: auto;
    bottom: -20px;
}
.frameRotateC .selectBorderCommentDeleteButtonZone {
    transform: rotate(90deg);
    top: auto;
    bottom: -20px;
}
.selectBorderCommentDeleteButton {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid #dd621c;
    border-radius: 50%;
    background-color: #fff;
    background-image: url("../common-img/img/svg/icon_delete_orange.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
    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;
}
#controlLeftBtn:active,
#controlRightBtn:active {
  background-color: #666;
}
.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);
  }
}
#textInputDecideBtn:active,
#textConfirmDecideBtn:active {
  background-color: #dd621c;
}
#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);
  }
}
#textInputCancelBtn:active,
#textConfirmCancelBtn:active {
  background-color: #dd621c;
}

/*::: 画像追加ボタン :::*/
#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;
  background: #ccc;
  width: 220px;
  height: 6rem;
  padding: 1rem;
  margin: auto;
  background: #e5d6d9;
  text-align: center;
  border: 3px solid #dd621c;
  border-radius: 30px;
  box-sizing: border-box;
}
.replaceNavigataionMessage {
    font-size: 1.6rem;
    color: #9c0d0d;
}
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 #e5d6d9;
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  margin-left: -9px;
}
 
.replaceNavigataionMessageArea:before {
  border-top: 23px solid #dd621c;
  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;
}
#frameOuterArea {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
}
.editAreaComment {
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
    user-select: none;
    pointer-events: auto;
}

/* 画像が無い時の表示 */
.noneFrameImage {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    color: #333;
    background-color: #e0e0e0;
}
/*******************************
 *   編集画面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 {
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: invertAnmForBg;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: 1s;
  animation-fill-mode: both;
  animation-name: invertAnmForBg;
}
._pnInvisible {
  display: none;
}
._pnBlushSelectArea {
  padding-bottom: 0;
}
/* *************** 編集画面　関数・プロパティ ************** */
/* 操作ボタンエリア */
/* スタンプ表示エリア */
/*1行あたり表示ボタン数の調整*/
/*ボタン上下間隔の調整*/
/*ボタンサイズの調整*/
/*ボタンに対する表示画像サイズの調整*/
._trimmingAreaLine {
  top: 0;
  margin: 0 5%;
  width: 100%;
}
/* *************** メインコンテンツエリア設定 ************** */
#mainContentsTrimming {
  display: flex;
  margin: 17px 0px 147px 17px;
  background-color: transparent;
  box-shadow: none;
}
@media screen and (max-width: 1280px) {
  #mainContentsTrimming {
    margin: 17px 0px 127px 17px;
  }
}
@media screen and (max-height: 900px) {
  #mainContentsTrimming {
    margin: 17px 0px 127px 17px;
  }
}
#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;
}
.noteArea, .cropNoteArea {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 20px;
    line-height: 20px;
}

.noteArea {
    /**line-heightずらす*/
    top: 20px;
}

.cropNoteArea {
    display: flex;
}

.effectMain .noteArea {
    display: flex;
}
.noteText, .cropNoteText {
    display: block;
    width: calc(100% - 295px);
    text-align: center;
    font-size: 16px;
    color: #fff;
}
#trimmingDisplayArea {
  position: relative;
  top: 5rem;
  height: calc(100% -  5rem);
  flex: 1 1 30%;
  margin: 0 auto;
  transition: 300ms all ease;
}
.trimmingImageArea {
  position: relative;
  width: calc(100% - 295px);
  height: 100%;
}
.editMain .trimmingImageArea {
  width: 100%;
}
.effectMain .trimmingImageArea {
    width: 100%;
}
.trimmingImageDrawArea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
}
.trimmingCautionIconArea {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
}
.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;
}
/**************** 操作ボタンエリア設定 ***************/
#controlButtonArea {
  position: relative;
  width: 0;
  height: 0;
  right:0;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  transition: 300ms opacity ease;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}
.editMain #controlButtonArea {
  width: 295px;
  height: 443px;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}
.effectMain #controlButtonArea {
    width: 318px;
    height: -webkit-calc(100% + 44px);
    height: calc(100% + 44px);
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

@media screen and (max-width: 1280px) {
    .effectMain #controlButtonArea {
        height: -webkit-calc(100% + 24px);
        height: calc(100% + 24px);
    }
}

@media screen and (max-height: 900px) {
    .effectMain #controlButtonArea {
        height: -webkit-calc(100% + 24px);
        height: calc(100% + 24px);
    }
}

#closePanelBtnZone {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 25%;
  left: -20px;
  width: 20px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px 0 0 10px;
}
#closePanelBtn {
  position: absolute;
  top: 0;
  margin: auto;
  bottom: 0;
  left: 5px;
  width: 0;
  height: 0;
  border: solid 20px transparent;
  border-left: solid 30px rgba(0, 0, 0, 0.6);
  outline: none;
  border-width: 10px;
  border-left-width: 15px;
  cursor: pointer;
  opacity: 1;
}
.thumbMain #closePanelBtn {
  opacity: 0;
}
/**************** トリミング機能操作ボタンエリア設定 ***************/
#trimmingButtonArea {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
#trimmingButtonArea::after {
  /*
    position: absolute;
    right: -10px;
    top: 45px;
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent @subAreaColor;
    */
}
/**************** トリミング機能_上部_回転機能操作ボタンエリア設定 ***************/
/*画像だけ回転エリア*/
#rotateSettingArea {
  font-size: 2rem;
  color: #fff;
  position: relative;
  width: 100%;
  height: 23%;
  padding: 3%;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#rotateAdjustCaptionZone {
  width: 100%;
}
#rotateAdjustCaption {
  text-align: center;
  font-size: 1.8rem;
}
#rotateAdjustButtonArea {
  width: 100%;
  height: 67%;
  padding-top: 1rem;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}
#add90DegreeZone,
#sub90DegreeZone,
#add1DegreeZone,
#sub1DegreeZone {
  /*position: relative;*/
  /*height: 100%;*/
  width: 25%;
}
#add90DegBtnZone,
#sub90DegBtnZone,
#add1DegBtnZone,
#sub1DegBtnZone {
  margin: 0 15px;
  /*width: 80%;*/
  /*height: 0;*/
  /*padding-bottom: 80%;*/
  /*margin: auto;*/
}
#add90DegBtn,
#sub90DegBtn,
#add1DegBtn,
#sub1DegBtn {
  padding: 1.6rem;
  padding-top: 1.2rem;
  line-height: 2.8rem;
  min-width: 140px;
  outline: none;
  border-radius: 10px;
  font-size: 3rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  min-width: 0;
  padding: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-size: 70%;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  transition: background-color 200ms ease;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  vertical-align: top;
  background-size: 100%;
}
.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: rgba(0, 0, 0, 0.5);
}
#add90DegBtn {
  background-image: url("../common-img/img/svg/btn_icon_rotate_90deg.svg");
}
#add1DegBtn {
  background-image: url("../common-img/img/svg/btn_icon_rotate_1deg.svg");
}
#sub90DegBtn {
  background-image: url("../common-img/img/svg/btn_icon_rotate_minus90deg.svg");
}
#sub1DegBtn {
  background-image: url("../common-img/img/svg/btn_icon_rotate_minus1deg.svg");
}
.smallBtnCapZone {
  text-align: center;
  margin-top: 0.5rem;
  /*font-size: 1.7rem;*/
}
.smallBtnCap {
  font-size: 1.4rem;
}
/**************** トリミング機能_上部_拡大機能操作ボタンエリア設定 ***************/
#trimmingAreaLine2 {
  top: 0;
  margin: 0 5%;
  width: 100%;
}
#zoomSettingArea {
  font-size: 2rem;
  color: #fff;
  position: relative;
  width: 100%;
  height: 17%;
  padding: 3%;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#zoomAdjustCaptionZone {
  width: 100%;
  /*height: 35px;*/
}
#zoomAdjustCaption {
  text-align: center;
  font-size: 1.8rem;
}
#zoomAdjustButtonArea {
  width: 100%;
  /*height: 60%;*/
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  /*padding-top: 1rem;*/
}
#add5PerZone,
#sub5PerZone {
  position: relative;
  height: 100%;
  width: 25%;
  margin: auto;
}
#add5PerBtnZone,
#sub5PerBtnZone {
  text-align: center;
  /*width: 80%;*/
  margin: auto;
}
#add5PerBtn,
#sub5PerBtn {
  width: 3.5rem;
  min-width: 0;
  height: 3.5rem;
  padding: 0;
  line-height: 3.3rem;
  outline: none;
  font-size: 3.5rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #ffffff;
  vertical-align: top;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 200ms ease;
}
.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: rgba(0, 0, 0, 0.5);
}
#add5PerBtn {
  background-image: url("../common-img/img/svg/btn_icon_zoom.svg");
}
#sub5PerBtn {
  background-image: url("../common-img/img/svg/btn_icon_zoom_out.svg");
}
/**************** トリミング機能_下部操作エリア設定 ***************/
/**************** トリミング機能_下部_移動エリア設定 ***************/
#trimmingAreaLine3 {
  top: 0;
  margin: 0 5%;
  width: 100%;
}
#shiftSettingArea {
  width: 150px;
  height: 106px;
  padding: 0 22px;
  box-sizing: border-box;
}
#shiftSettingBtnZone {
  position: relative;
  margin-top: 5px;
  height: 100%;
}
.shiftButton {
  position: absolute;
  min-width: 0;
  width: 3rem;
  height: 3rem;
  line-height: 2.8rem;
  color: #ffffff;
  font-size: 3rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  border-radius: 50%;
  background-size: 60%;
  background-color: rgba(0, 0, 0, 0.5);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 200ms ease;
}
.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: rgba(0, 0, 0, 0.5);
}
#shiftCaptionZone {
  width: 100%;
  height: 100%;
}
#shiftCaption {
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  margin: 35px;
  font-size: 1.7rem;
  line-height: 36px;
  text-align: center;
}
#upBtnZone {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  top: 0;
  width: 35px;
  height: 0;
  padding-bottom: 33%;
}
#leftBtnZone {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  width: 35px;
  height: 0;
  padding-bottom: 33%;
}
#rightBtnZone {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  width: 35px;
  height: 0;
  padding-bottom: 33%;
}
#downBtnZone {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  bottom: 0;
  width: 35px;
  height: 0;
  padding-bottom: 33%;
}
#upButton {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-image: url("../common-img/img/svg/btn_icon_up.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);
  }
}
#upButton:active {
  background-color: rgba(0, 0, 0, 0.5);
}
#leftButton {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-image: url("../common-img/img/svg/btn_icon_left.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);
  }
}
#leftButton:active {
  background-color: rgba(0, 0, 0, 0.5);
}
#rightButton {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-image: url("../common-img/img/svg/btn_icon_right.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);
  }
}
#rightButton:active {
  background-color: rgba(0, 0, 0, 0.5);
}
#downButton {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-image: url("../common-img/img/svg/btn_icon_down.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);
  }
}
#downButton:active {
  background-color: rgba(0, 0, 0, 0.5);
}
/* ガイド表示ボタン設定 */
#guideSettingArea {
  font-size: 1.5rem;
  color: #fff;
  position: relative;
  width: 40%;
  /*height: 30.5%;*/
  padding: 3% 3% 0 3%;
  box-sizing: border-box;
}
#guideBtnCaptionZone {
  margin: 5% 0;
}
#guideBtnCaption {
  text-align: center;
  font-size: 1.8rem;
}
#guideBtnZone {
  margin: auto;
  width: 70%;
}
#guideBtn {
  min-width: 0;
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 100%;
  line-height: 2.8rem;
  vertical-align: middle;
  color: #ffffff;
  font-size: 3rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  border-radius: 50%;
  background-size: 70%;
  background-color: rgba(0, 0, 0, 0.5);
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../common-img/img/svg/btn_icon_guide.svg");
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 200ms ease;
  border-radius: 10px;
  outline: none;
}
.anmEffect #guideBtn,
#guideBtn.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);
  }
}
#guideBtn:active {
  background-color: rgba(0, 0, 0, 0.5);
}
#allDeleteBtnArea {
  flex: 0 1 auto;
  height: 7%;
  width: 100%;
  padding: 5% 5% 2%;
}
#allDeleteBtnZone {
  height: 30px;
}
#allDeleteBtn {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  line-height: 1.4rem;
  outline: none;
  font-size: 1.6rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #ffffff;
  background-size: 70%;
  background-color: rgba(0, 0, 0, 0.5);
  /*-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);*/
  transition: background-color 200ms ease;
  border-radius: 10px;
  cursor: pointer;
}
.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: rgba(0, 0, 0, 0.5);
}
#allDeleteBtn::before {
  background-image: url("../common-img/img/svg/btn_icon_undo.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  font-size: 1.3em;
  vertical-align: bottom;
  padding-left: 2em;
}
/**************** エフェクト機能操作ボタンエリア設定 ***************/
#effectButtonArea {
    display: block;
    width: 100%;
    height: 100%;
}

.trimming-brightness-area {
    position: relative;
    width: calc(100% - 10px);
    height: 100px;
    margin: 21px 10px 0 0;
}

.brightnessHidden > .trimming-brightness-area {
    display: none;
}

.trimming-brightness-area-label {
    display: block;
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    text-align: left;
    color: #fff;
    box-sizing: border-box;
    padding: 0 0 0 20px;
}

.trimming-brightness-area-content {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 20px 0 0 0;
}

.trimming-brightness-area-content-btn {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: block;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    border: solid 1px #fff;
    border-radius: 50%;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
}

    .trimming-brightness-area-content-btn:hover {
        background-color: rgba(0,0,0,0.2);
    }

    .trimming-brightness-area-content-btn.minus {
        background-image: url(../common-img/img/svg/btn_icon_minus_white.svg);
    }

    .trimming-brightness-area-content-btn.plus {
        background-image: url(../common-img/img/svg/btn_icon_plus_white.svg);
    }

.trimming-brightness-area-content-value {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: block;
    width: 44px;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    border-radius: 2px;
    background-color: #fff;
    font-size: 16px;
    text-align: center;
    color: #333333;
    margin: 0 20px;
}

.trimming-effect-area {
    position: relative;
    width: calc(100% - 10px);
    height: calc(100% - 142px);
    overflow: auto;
    margin: 0 10px 21px 0;
}

#filterButtonArea {
  width: -webkit-calc(100% - 10px);
  width: calc(100% - 10px);
  height: -webkit-calc(100% - 20px);
  height: calc(100% - 20px);
  overflow: auto;
  margin: 10px 10px 10px 0;
}

.brightnessHidden > .trimming-effect-area {
    height: calc(100% - 42px);
    margin: 21px 10px 21px 0;
}

#effects {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 9.5px;
  /*right: 5.5px;*/
  letter-spacing: -0.5em;
}
#filter {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  letter-spacing: -0.5em;
}
.effectBlock {
    position: relative;
    display: inline-block;
    width: 138px;
    height: 139px;
    letter-spacing: normal;
}
.filterBlock {
  position: relative;
  display: inline-block;
  width: 50%;
  height:150px;
  letter-spacing: normal;
}
/*jsのcanvas描画処理用に絶対値で指定*/
/*@media screen and (max-width: 1280px) {
  .effectBlock {
    height: 15rem;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .effectBlock {
    height: 20rem;
  }
}
@media screen and (min-width: 1601px) {
  .effectBlock {
    height: 25rem;
  }
}*/
.effectBtnZone,
.filterBtnZone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 118px;
  width: 117px;
}
.effectBtn,
.filterBtn {
    line-height: 1.3rem;
    min-width: 140px;
    outline: none;
    border-radius: 10px;
    font-size: 1.5rem;
    font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    transition: all 200ms ease;
    background-color: #c4c4c4;
    color: #333333;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.anmEffect .effectBtn,
.effectBtn.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 .effectBtn,
.effectBtn.selected,
.selected .filterBtn,
.filterBtn.selected {
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
}
.effectBtn.selected,
.filterBtn.selected {
  border: 2px solid #dd621c;
}
.effectThumbnail,
.filterThumbnail {
    position: absolute;
    top: 20px;
    bottom: 30px;
    left: 15px;
    right: 15px;
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
    height: -webkit-calc(100% - 50px);
    height: calc(100% - 50px);
}
.effectCaption {
    position: absolute;
    left: 0;
    bottom: 7.5px;
    width: 100%;
    height: 14px;
    font-size: 15px;
}

.osMac .effectCaption {
    letter-spacing: -1px;
}

.filterCaption {
  position: absolute;
  left: 0;
  bottom: 7px;
  width: 100%;
  height: 14px;
  font-size:14px;
}
/*@media screen and (max-width: 1280px) {
  .effectCaption {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  .effectCaption {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1601px) {
  .effectCaption {
    font-size: 1.95rem;
  }
}
@media screen and (max-height: 900px) {
  .effectCaption {
    font-size: 1.5rem;
  }
}*/
.selected .checkmark {
  width: 26px;
  height: 26px;
  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;
  position: absolute;
  top: -8px;
  left: -8px;
  display: block;
}
/* スクロール領域 */
.effectScrlAreaClass {
  display: -webkit-flex;
  -webkit-flex-flow: column nowrap;
  -webkit-align-items: center;
  box-sizing: border-box;
  width: 40px;
  position: absolute;
  right: 0;
  height: 100%;
  width: 46px;
  z-index: 1;
  margin-left: 10px;
  margin-right: 7px;
}
.effectUpScrlBtnZoneClass {
  width: 30px;
  height: 15px;
  margin: 10px 0;
  -webkit-order: 1;
  margin-top: 5px;
  position: relative;
  width: 46px;
  height: 46px;
}
.effectUpScrlBtnZoneClass > * {
  display: block;
  width: 0;
  height: 0;
  border: solid 9px transparent;
  border-top: none;
  border-bottom: solid 15px rgba(0, 0, 0, 0.6);
  outline: none;
  margin: 0 auto;
}
.effectUpScrlBtnZoneClass > button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  bottom: 12px;
  border: solid 13px transparent;
  border-bottom: solid 22px #fff;
}
.effectUpScrlBtnZoneClass > button::before {
  content: "";
  display: block;
  position: absolute;
  top: -12px;
  left: -23px;
  width: 46px;
  height: 46px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 7px;
  z-index: -1;
}
.effectScrlBarZoneClass {
  -webkit-flex: 1 1 auto;
  background: none;
  border: none;
  position: relative;
  -webkit-order: 2;
  width: 10px;
  margin: 0 15px;
  width: 28px;
}
.effectScrlBarZoneClass > * {
  position: absolute;
  top: 0;
  width: 10px;
  height: 120px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.6);
}
.effectScrlBarZoneClass > div {
  width: 28px;
  min-height: 28px;
}
.effectDownScrlBtnZoneClass {
  width: 30px;
  height: 15px;
  margin: 10px 0;
  -webkit-order: 3;
  position: relative;
  width: 46px;
  height: 46px;
}
.effectDownScrlBtnZoneClass > * {
  display: block;
  width: 0;
  height: 0;
  border: solid 9px transparent;
  border-bottom: none;
  border-top: solid 15px rgba(0, 0, 0, 0.6);
  outline: none;
  margin: 0 auto;
}
.effectDownScrlBtnZoneClass > button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  top: 15px;
  border: solid 13px transparent;
  border-top: solid 22px #fff;
}
.effectDownScrlBtnZoneClass > button::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -12px;
  left: -23px;
  width: 46px;
  height: 46px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 7px;
  z-index: -1;
}
/*#effectScrlArea{
  ._scrollBarStyle(vertical,area);
  position: absolute;
  top: 1.5rem;
  right: 0;
  bottom: 1.5rem;
}*/
/*#effectUpScrlBtnZone{
  ._scrollBarStyle(vertical,upBtnZone);
}
#effectScrlBarZone{
  ._scrollBarStyle(vertical,barZone);
}
#effectDownScrlBtnZone{
  ._scrollBarStyle(vertical,downBtnZone);
}
*/
/**************** 機能選択エリア設定 ***************/
.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%;
  border-radius: 10px;
  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);
  }
}
.fnSmallBtn:active {
  background-color: rgba(0, 0, 0, 0.7);
}
.selected .fnSmallBtn,
.fnSmallBtn.selected {
  background-color: #dd621c;
}
.fnSmallBtn:active {
  background-color: rgba(0, 0, 0, 0.7);
}
/**************** 固定ボタン表示エリア設定 ***************/
/* 変更履歴操作ボタン領域設定 */
#trimmingOperationControlZone {
  position: absolute;
  width: 165px;
  height: 70px;
  bottom: 0;
  right: 20px;
  transition: 250ms right ease;
  z-index: 10;
}
.trimmingEditCategorySelected #trimmingOperationControlZone {
  right: 0px;
}
#trimmingUndoButtonZone {
  position: absolute;
  top: 0;
  left: 20px;
  width: 55px;
  height: 55px;
  background: none;
}
#trimmingUndoButton {
  background-image: url("../common-img/img/svg/btn_icon_undo.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center 15%;
  font-size: 1.3rem;
  line-height: 85px;
  min-width: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#trimmingRedoButtonZone {
  position: absolute;
  top: 0;
  right: 20px;
  width: 55px;
  height: 55px;
  background: none;
}
#trimmingRedoButton {
  background-image: url("../common-img/img/svg/btn_icon_redo.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center 15%;
  font-size: 1.3rem;
  line-height: 85px;
  min-width: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
/**************** 編集機能表示エリア設定 ***************/
.trimmingFunctionAreaWrapper {
  position: relative;
  top: -17px;
  flex: 0 0 175px;
  /*height: calc(100% + 164px);*/
  height: calc(100% + 58px);
}
#trimmingFunctionArea {
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 130px;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: invertAnmForFunctionArea;
  -moz-animation-name: invertAnmForFunctionArea;
  -ms-animation-name: invertAnmForFunctionArea;
  animation-name: invertAnmForFunctionArea;
  transition: 300ms bottom ease,300ms right ease,300ms width ease;
}
@media screen and (max-width: 1281px) {
  #trimmingFunctionArea {
    bottom: 110px;
  }
}
.trimmingEditCategorySelected #trimmingFunctionArea {
  right: 0;
  width: 145px;
}
#trimmingFunctionPinchArea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  width: 20px;
  padding-bottom: 130px;
  z-index: 2;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: invertAnmForFunctionArea;
  -moz-animation-name: invertAnmForFunctionArea;
  -ms-animation-name: invertAnmForFunctionArea;
  animation-name: invertAnmForFunctionArea;
}
#trimmingFunctionPinchImage {
  position: absolute;
  top: 0;
  margin: auto;
  bottom: 0;
  left: 5px;
  border-left: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  height: 10%;
  width: 5px;
  transition: all 300ms cubic-bezier(0.64, 0.03, 0, 0.57) 0ms;
  cursor: pointer;
  opacity: 1;
  display: none;
}
.thumbMain #trimmingFunctionPinchImage {
  opacity: 0;
}
#trimmingFunctionButtonArea {
  position: absolute;
  top: 15%;
  left: -160px;
  width: 140px;
  height: 90%;
  padding: 0;
  z-index: 4;
}
.trimmingEditCategorySelected #trimmingFunctionButtonArea {
  left: -8px;
}
.thumbMain #trimmingFunctionButtonArea {
  left: -48px;
}
.trimmingFnCategories {
  height: 100%;
  display: flex;
  margin: 0;
  flex-direction: column;
  list-style-type: none;
}
.trimmingFnCategory {
  width: 160px;
  /*height: 100%;*/
  height: 110px;
}
.trimmingEditCategorySelected .trimmingFnCategory {
  width: 0;
}
.trimmingFnCategoryBtn {
  right: 0;
  width: 140px;
  height: 110px;
  padding: 1.1rem;
  padding-top: 1.7rem;
  /*margin-bottom: 26px;*/
  line-height: 1.9rem;
  min-width: 140px;
  outline: none;
  font-size: 2.1rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px 0 0 10px;
  transition: 300ms width ease;
  cursor: pointer;
}
.anmEffect .trimmingFnCategoryBtn,
.trimmingFnCategoryBtn.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);
  }
}
.trimmingFnCategoryBtn:active {
  background-color: rgba(0, 0, 0, 0.7);
}
.selected .trimmingFnCategoryBtn,
.trimmingFnCategoryBtn.selected {
  background-color: #dd621c;
}
.thumbMain .trimmingFnCategoryBtn {
  margin-left: -112px;
}
.trimmingEditCategorySelected .trimmingFnCategoryBtn {
  margin-left: -152px;
}
.openCategory.trimmingFnCategory dt > button {
  background-color: #dd621c;
}
.trimmingFnCategoryIconArea {
  height: calc(100% - 3rem);
  width: 40px;
  height: 40px;
  margin: auto;
  display: block;
  background-size: cover;
  cursor: pointer;
}
.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;
}
.trimmingFnCategoryCaptionArea {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#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;
}
/* 編集ボタン表示エリア */
.trimmingFnBtns {
  position: absolute;
  top: 0;
  left: 8px;
  width: 125px;
  margin-top: 25px;
  bottom: 4rem;
  display: none;
  list-style-type: none;
}
@media screen and (max-height: 900px) {
  .trimmingFnBtns {
    top: -3.4%;
  }
}
@media screen and (min-height: 901px) and (max-height: 1024px) {
  .trimmingFnBtns {
    top: -3.1%;
  }
}
@media screen and (min-height: 1025px) and (max-height: 1080px) {
  .trimmingFnBtns {
    top: -2.9%;
  }
}
@media screen and (min-height: 1081px) and (max-height: 1200px) {
  .trimmingFnBtns {
    top: -2.6%;
  }
}
.trimmingFnCategory.openCategory .trimmingFnBtns {
  display: flex;
  flex-direction: column;
}
.editMain .trimmingFnCategory > dl > dt {
  display: none;
}
.effectMain .trimmingFnCategory > dl > dt {
    display: none;
}
.fnBtn {
  padding: 1.6rem;
  padding-top: 1.2rem;
  line-height: 2.8rem;
  min-width: 140px;
  outline: none;
  border-radius: 10px;
  font-size: 3rem;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  transition: all 200ms ease;
  background-color: rgba(0, 0, 0, 0.7);
  transition: none;
  min-width: 0;
  width: 125px;
  height: 110px;
  cursor: pointer;
  padding-top: 80px;
  font-size: 1.5rem;
  color: #ffffff;
  margin-bottom: 10px;
  position: relative;
}
.anmEffect .fnBtn,
.fnBtn.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);
  }
}
.fnBtn:active {
  background-color: rgba(0, 0, 0, 0.7);
}
.selected .fnBtn,
.fnBtn.selected {
  background-color: #dd621c;
}
.fnBtn:active {
  background-color: rgba(0, 0, 0, 0.7);
}
.fnBtn.selected {
  background-color: #dd621c;
}
.fnBtn.selected::after {
  position: absolute;
  left: -30px;
  top: 45px;
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
}
#fnBtn1 {
  background-image: url("../common-img/img/svg/btn_icon_trimming.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: top;
  background-position: center 20%;
}
#fnBtn2 {
  background-image: url("../common-img/img/svg/btn_icon_effect.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center 20%;
}
#fnBtn3 {
  background-image: url("../common-img/img/svg/btn_icon_stump.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center 20%;
}
#fnBtn4 {
  background-image: url("../common-img/img/svg/btn_icon_korokorostamp.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center 20%;
}
#fnBtn5 {
  background-image: url("../common-img/img/svg/btn_icon_handwritten.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center 20%;
}
#fnBtn9 {
  background-image: url("../common-img/img/svg/btn_icon_freecomment.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center 20%;
}
#fnBtn8 {
  background-image: url("../common-img/img/svg/btn_icon_frame.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center 20%;
}
#trimmingFnBtns1 > li:nth-child(3) .fnBtn {
  background-image: url("../common-img/img/svg/btn_icon_coloradjust.svg");
  background-positiosn: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center 20%;
}

/*******************************
 *ページ編集画面での画像追加読み込み画面用CSS
 * *****************************/
.uploadConfirmArea {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
	background: none;
    z-index: 10000;
}
.uploadConfirmArea * {
    -webkit-backface-visibility: visible;
	backface-visibility: visible;
}
#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;
    padding: 2rem 2.5rem 80px 2.5rem;
	margin: auto;
    color: rgb(51, 51, 51);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-image: none;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    flex-direction: column;
    -webkit-flex-direction: column;
}
.uploadConfirmContentsZone {
    display: -webkit-flex;
    display: flex;
	height: 100%;
    flex-direction: column;
    -webkit-flex-direction: column;
}
.uploadConfirmCaption {
    height: 2.2em;
    text-align: left;
    color: rgb(118, 118, 118);
    line-height: 1.7em;
    font-size: 2rem;
	flex:0 0 auto;
    -webkit-flex: 0 0 auto;
    box-sizing: border-box;
}
.uploadScheduledQuantityCaption {
	height: 1.7em;
    color: rgb(118, 118, 118);
    font-size: 2rem;
}
.uploadScheduledQuantityColon {
    height: 1.7em;
	padding: 0px;
    margin-bottom: 1.5rem;
    color: rgb(118, 118, 118);
    font-size: 2rem;
}
.uploadScheduledQuantity {
	height: 1.7em;
    color: rgb(221, 98, 28);
    font-size: 2rem;
}
.uploadScheduledQuantityCaption2 {
	height: 1.7em;
    color: rgb(118, 118, 118);
    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: calc(100% - 66px);
    min-height: 20px;
	padding: 10px 0px;
    color: rgb(255, 255, 255);
    font-size: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: rgb(102, 102, 102);
}
#tableHeaderUploadFileName {
	margin: 0px 1.25em;
    flex:1 1 auto;
    -webkit-flex: 1 1 auto;
}
#tableHeaderUploadProprietyCap {
	margin: 0px 1.25em;
    flex:0 1 auto;
    -webkit-flex: 0 1 auto;
}
.dragAndDropUploadArea {
    position: relative;
    width: 100%;
    height: 100%;
    border: 3px dashed #999;
}
.ddDistributionArea {
    position: absolute;
    width: 100%;
    height: 50%;
    top:20%;
}
.uploadIconArea {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}
.uploadIcon {
    width: 100%;
    height: 80%;
}
.dispCaptionArea {
    position: absolute;
    width: 100%;
    bottom: 0;
    font-size: 32px;
    color: #333;
    text-align: center;
}
.uploadFileList {
    overflow: auto;
    width: calc(100% - 66px);
    margin-bottom: 20px;
    font-size: 18px;
	border-radius: 0px 0px 10px 10px;
    flex:1 1 1px;
    -webkit-flex: 1 1 1px;
}
.uploadFileList > li {
    text-indent: 1rem;
    background-color: rgb(252, 252, 252);
}
.uploadFileList > li:nth-of-type(2n-1) {
	background-color: rgb(242, 242, 242);
}
.uploadFiles {
    position: relative;
    display: -webkit-flex;
    display: flex;
    height: 2.5rem;
	padding: 10px 8px 6px 8px;
}
.tableUploadFileNameAreaGrp {
    height: 100%;
    overflow: hidden;
    -webkit-flex: 0 0 80%;
	flex:0 0 80%;
}
.tableUploadProprietyCapAreaGrp {
    -webkit-flex: 0 0 20%;
	flex:0 0 20%;
}
.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;
}
.osMac .tableUploadFileProprietyAlertText {
	letter-spacing: -0.15em;
}
@media screen and (max-width: 1300px) {
    .tableUploadFileProprietyAlertText {
        font-size: 1.7rem;
    }
}
.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: 60px;
    left: 0px;
    bottom: 0px;
	padding: 0px 2.5rem 1rem 2.5rem;
    background-color: rgba(113, 168, 9, 0.8);
    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;
}
.uploadConfirmCancel {
	display: inline-block;
}
.uploadConfirmCancelBtn {
    position: relative;
    display: block;
    min-width: 180px;
    height: 34px;
	padding: 0.4rem 1.1rem;
    color: rgb(255, 255, 255);
    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: 1px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    background-color: transparent;
    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;
}
.uploadConfirmCancelBtn:active {
	background-color: rgb(221, 98, 28);
}
.uploadConfirmExeUpload {
    display: inline-block;
	margin-right: 1em;
}
.uploadConfirmExeUploadBtn {
    display: block;
    position: relative;
    min-width: 180px;
    height: 34px;
	padding-left: 30px;
    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;
    border: 3px solid rgb(255, 255, 255);
    border-radius: 10px;
    background-color: transparent;
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-image: url("../common-img/img/svg/drop_parts_uproad_icon.svg");
    transition: 200ms;
    -webkit-transition: all 200ms ease;
}
.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;
}
.uploadConfirmExeUploadBtn:active {
	background-color: rgb(221, 98, 28);
}
.uploadConfirmAddImage {
	display: inline-block;
}
.uploadConfirmAddImageBtn {
    position: relative;
    display: block;
    min-width: 180px;
    height: 34px;
	padding: 0.4rem 1.1rem 1.1rem;
    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;
    border: 3px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    background-color: transparent;
    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;
}
.uploadConfirmAddImageBtn:active {
	background-color: rgb(221, 98, 28);
}
.duringUploadArea {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
	background: none;
    z-index: 10000;
}
.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-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-image: none;
    color: rgb(51, 51, 51);
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
}
.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;
    margin-bottom: 70px;
    background-color: rgba(0, 0, 0, 0.05);
}
.progressbarReceive {
    position: absolute;
    top: 0px;
    width: 0px;
    height: 15px;
    bottom: 0px;
	margin: auto;
    background-color: rgba(113, 168, 9, 0.8);
    transition:width 100ms;
}
.readBtnArea {
    display: -webkit-flex;
    display: flex;
    height: 54px;
	border-radius: 0px 0px 10px 10px;
    background-color: rgba(113, 168, 9, 0.8);
    -webkit-flex: 1 1 100%;
    flex:1 1 100%;
    -webkit-align-self: center;
    align-self: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.readBtnZone {
    height: 34px;
	margin: 1rem;
}
.readBtn {
    display: block;
    min-width: 160px;
    height: inherit;
	padding: 0.4rem 1.3rem 1.3rem;
    color: rgb(255, 255, 255);
    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: 1px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    background-color: transparent;
    transition:200ms;
    -webkit-transition: all 200ms ease;
}
.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;
}
.readBtn:active {
	background-color: rgb(221, 98, 28);
}
.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: 10000;
}
.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;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    width: 70%;
    min-width: 1000px;
    height: 70%;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 130px;
	margin: auto;
    padding: 2rem 2.5rem 120px;
    color: rgb(51, 51, 51);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-image: none;
    background-color: rgb(255, 255, 255);
    -webkit-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
}
.fileUploadFailurContentsZone {
	height: 100%;
    margin-bottom: 2.5rem;
}
.fileUploadFailureConfirmCaptionZone {
	height: 2.2em;
    text-align: left;
    color: rgb(118, 118, 118);
    line-height: 1.7em;
    font-size: 2.2rem;
    box-sizing: border-box;
}
.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;
}
.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 {
    position: absolute;
    width: 100%;
    height: 80px;
    bottom: 0px;
	left: 0px;
    background-color: rgba(113, 168, 9, 0.8);
    box-sizing: border-box;
}
.fileUploadFailureOkBtnArea {
    display: -webkit-flex;
    display: flex;
	width: 100%;
    height: 100%;
    align-items: center;
    -webkit-align-items: center;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: center;
    -webkit-justify-content: center;
}
.fileUploadFailureOkBtn {
    display: block;
    min-width: 160px;
    height: 60px;
	padding: 0.8rem 1.3rem 1.3rem;
    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;
    color: rgb(255, 255, 255);
    background-color: transparent;
    border: 3px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    transition:200ms;
    -webkit-transition: all 200ms ease;
}
.anmEffect .fileUploadFailureOkBtn {
	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.fileUploadFailureOkBtn {
	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;
}
.fileUploadFailureOkBtn:active {
	background-color: rgb(221, 98, 28);
}
.uploadLimitConfirmArea {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
	background: none;
    z-index: 10000;
}
.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 {
    position: absolute;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    width: 70%;
    min-width: 550px;
    height: 70%;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 130px;
	margin: auto;
    padding: 2rem 2.5rem 120px;
    color: rgb(51, 51, 51);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-image: none;
    background-color: rgb(255, 255, 255);
    flex-direction: column;
    -webkit-flex-direction: column;
    box-sizing: border-box;
}
.uploadLimitConfirmContentsZone {
	height: 100%;
    margin-bottom: 2.5rem;
}
.uploadLimitConfirmTitle {
	height: 1.7em;
    color: rgb(118, 118, 118);
    font-size: 2.2rem;
}
.uploadLimitConfirmContents {
    font-size: 2rem;
}
.okBtnArea {
    position: absolute;
    width: 100%;
    height: 80px;
    bottom: 0px;
	left: 0px !important;
    background-color: rgba(113, 168, 9, 0.8);
    box-sizing: border-box;
}
.okBtnZone {
    display: -webkit-flex;
    display: flex;
	width: 100%;
    height: 100%;
    align-items: center;
    -webkit-align-items: center;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: center;
    -webkit-justify-content: center;
}
.uploadLimitConfirmOkBtn {
    display: block;
    min-width: 160px;
    height: 60px;
	padding: 0.8rem 1.3rem 1.3rem;
    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;
    color: rgb(255, 255, 255);
    background-color: transparent;
    border: 3px solid rgb(255, 255, 255);
    border-image: none;
    border-radius: 10px;
    transition:200ms;
    -webkit-transition: all 200ms ease;
}
.anmEffect .uploadLimitConfirmOkBtn {
	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;
}
.uploadLimitConfirmOkBtn:active {
	background-color: rgb(221, 98, 28);
}
.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);
}

/*右タブ追加css*/

#thumbnailArea{
    width:380px;
    left:-300px;
}

.thumbnailTabButton {
    position: absolute;
    top: 10px;
    right: -100px;
    display: block;
    width: 100px;
    height: 80px;
    line-height: 44px;
    margin: 0 0 5px 0;
    border: none;
    border-radius: 0 45% 45% 0;
    background-color: rgba(113,168,9,.8);
    text-align: left;
    font-size: 14px;
    color: #fff;
    background-image: url(../common-img/img/svg/icon_tile_white.svg);
    background-position: 20px 5px;
    background-repeat: no-repeat;
    background-size: 45px;
    padding: 40px 0 0 10px;
    box-sizing: border-box;
    z-index: 5;
}

#thumbnailHeaderArea,
#thumbnailDisplayArea,
#thumbnailFadeArea {
    pointer-events: none;
    opacity: 0.5;
}

#layoutArea {
    left: 80px;
    right: 150px;
}

#layoutZone {
    width:900px
}

@media only screen and (max-width: 1540px) {
    #layoutZone {
        width: -webkit-calc(100% - 130px);
        width: calc(100% - 130px);
    }
}
@media only screen and (max-width: 1630px) {
    #layoutZone {
        margin: 0 0 0 110px;
    }
}

#operationControlZone {
    bottom: 106px;
    width: 150px;
    height: 50px;
}

#undoButtonZone {
    left:15px;
    height: 50px;
}

#redoButtonZone {
    right:15px;
    height: 50px;
}

#undoButton,
#redoButton {
    height: 50px;
    font-size: 12px;
    line-height: 80px;
    background-size: 28px;
}

.editRightTabArea {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 150px;
    height: -webkit-calc(100% - 86px);
    height: calc(100% - 86px);
    background-color: rgba(0,0,0,0.5);
}

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

.editRightTabButtonsArea {
    position: absolute;
    top: 20px;
    right: 0;
    display: block;
    width: 100%;
    height: auto;
    box-sizing:border-box;
    padding: 0 15px;
}

.editRightTabButton {
    display: block;
    width: 120px;
    height: 90px;
    margin: 0 auto 10px;
    border: none;
    border-radius: 8px;
    background-color: rgba(0,0,0,.7);
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-position: center 3px;
    background-repeat: no-repeat;
    background-size: 60px;
    padding: 55px 0 0;
    box-sizing: border-box;
}

.editRightTabButton:hover {
    background-color:#000;
}

    .editRightTabButton.layout {
        background-image: url(../common-img/img/svg/icon_layout_white.svg);
    }

    .editRightTabButton.freeComment {
        background-image: url(../common-img/img/svg/icon_comment_white.svg);
    }

.editRightTabContentsArea {
    position: absolute;
    top: 20px;
    right: 170px;
    display: none;
    width: 256px;
    height: -webkit-calc(100% - 40px);
    height: calc(100% - 40px);
    box-sizing: border-box;
    padding: 10px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px;
}

.editRightTabContentsCloseButton {
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    display: block;
    width: 20px;
    height: 150px;
    border: none;
    border-radius: 10px 0 0 10px;
    background-image: url(../common-img/img/svg/icon_right_black.svg);
    background-color: rgba(0,0,0,0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.editLayoutTabContent,
.editFreeCommentTabContent {
    display: none;
    width: 100%;
    height: 100%;
    overflow: auto;
}

    .editLayoutTabContent > ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 100%;
        height: auto;
    }

        .editLayoutTabContent > ul > li {
            display: block;
            width: 108px;
            height: 108px;
            box-sizing:border-box;
            padding:10px;
        }

.editLayoutItem {
    display: block;
    width: 100%;
    height: 100%;
    border: solid 2px transparent;
    border-radius: 8px;
    background-color: #ccc;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

    .editLayoutItem.selected {
        border: solid 2px #dd621c;
    }

.editFreeCommentItemArea{
    display:block;
    width:100%;
    height:auto;
}

.editFreeCommentItemline {
    display: block;
    width: 90%;
    height: 1px;
    border: none;
    background-color: rgba(255,255,255,0.8);
    margin: 10px auto;
}

.editFreeCommentItem {
    display: block;
    width: 90%;
    height: auto;
    margin:auto;
}

    .editFreeCommentItem.font {
        display: flex;
        flex-wrap:wrap;
    }

.editFreeCommentItemLabel {
    display:block;
    width:100%;
    height:22px;
    text-align:left;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.editFreeCommentTextInputButton {
    display: block;
    margin: auto;
    width: 100%;
    height: 40px;
    line-height: 36px;
    padding: 0 0 0 30px;
    border: 2px solid #fff;
    border-radius: 10px;
    font-size: 14px;
    color: #fff;
    background-color: #dd621c;
    background-image: url(../common-img/img/svg/icon_addNewFreeComment_white.svg);
    background-position: 15px;
    background-repeat: no-repeat;
    background-size: 26px;
}

.editFreeCommentFontSelect {
    margin: 0 0 10px 0;
    display: block;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    border: solid 2px #ccc;
    border-radius: 10px;
    background-color: #fff;
    font-size: 14px;
    cursor:pointer;
}

    .editFreeCommentFontSelect > option {
        font-size: 14px;
    }

    .editFreeCommentFontTypeButton {
        display: block;
        width: calc(50% - 5px);
        height: 36px;
        line-height: 36px;
        border: none;
        border-radius: 10px;
        font-size: 14px;
        color: #000;
        background-color: #fff;
    }

    .editFreeCommentFontTypeButton:hover {
        background-color:#e6e6e6;
    }

    .editFreeCommentFontTypeButton.selected {
        background-color: #000;
        color:#fff;
    }

    .editFreeCommentFontTypeButton:last-of-type {
        margin: 0 0 0 10px;
    }

.editFreeCommentAdjustArea{
    display:flex;
    justify-content:center;
    width:100%;
    height:auto;
}
.editFreeCommentAdjustButton {
    display: block;
    margin: 5px;
    width: 36px;
    height: 36px;
    border: solid 2px #fff;
    border-radius: 50%;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px;
}

.editFreeCommentAdjustButton:hover {
    background-color:rgba(0,0,0,0.2);
}

    .editFreeCommentAdjustButton.minus {
        background-image: url(../common-img/img/svg/icon_minus_white.svg);
    }

    .editFreeCommentAdjustButton.plus {
        background-image: url(../common-img/img/svg/icon_plus_white.svg);
    }

.editFreeCommentSizeDisplayArea {
    position: relative;
    display: flex;
    margin: 5px 0 5px 10px;
    width: 56px;
    height: 36px;
    cursor: pointer;
}

.editFreeCommentSizeDisplayAreaPullDown,
.editFreeCommentSizePullDownFontSize {
    margin: 0 0 10px 0;
    display: block;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.editFreeCommentValue {
    display: block;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    color: #000;
    border: solid 2px #ccc;
    border-radius: 10px;
    background-color: #fff;
}

.editFreeCommentValuePullDown{
    margin: 0 0 10px 0;
    display: block;
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    border: solid 2px #ccc;
    border-radius: 10px;
    background-color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.editFreeCommentValueLabel {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: #fff;
}

.editFreeCommentRadioGroup {
    margin: 5px auto;
    display: flex;
    width: 160px;
}

.editFreeCommentRadioGroupBtn {
    display: block;
    width: 53px;
    height: 36px;
    box-sizing: border-box;
    border: solid 1px #ccc;
    background-color: #fff;
}

    .editFreeCommentRadioGroupBtn:hover {
        background-color: #e6e6e6;
    }

    .editFreeCommentRadioGroupBtn:first-of-type {
        border-radius: 4px 0 0 4px;
    }

    .editFreeCommentRadioGroupBtn:last-of-type {
        border-radius: 0 4px 4px 0;
    }

    .editFreeCommentRadioGroupBtn > span {
        display:none;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 36px;
        cursor:pointer;
    }

.freeCommentAlignHorizontallyLeft {
    background-image: url(../common-img/img/svg/icon_wordAlignHorizontallyLeft.svg);
}
.freeCommentAlignHorizontallyLeftSelected {
    background-image: url(../common-img/img/svg/icon_wordAlignHorizontallyLeftSelected.svg);
}
.freeCommentAlignHorizontallyCenter {
    background-image: url(../common-img/img/svg/icon_wordAlignHorizontallyCenter.svg);
}
.freeCommentAlignHorizontallyCenterSelected {
    background-image: url(../common-img/img/svg/icon_wordAlignHorizontallyCenterSelected.svg);
}
.freeCommentAlignHorizontallyRight {
    background-image: url(../common-img/img/svg/icon_wordAlignHorizontallyRight.svg);
}
.freeCommentAlignHorizontallyRightSelected {
    background-image: url(../common-img/img/svg/icon_wordAlignHorizontallyRightSelected.svg);
}

input[type=radio] + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyLeft {
    display: block;
}
input[type=radio] + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyLeftSelected {
    display: none;
}
input[type=radio]:checked + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyLeft {
    display:none;
}
input[type=radio]:checked + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyLeftSelected {
    display: block;
}
input[type=radio] + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyCenter {
    display: block;
}
input[type=radio] + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyCenterSelected {
    display: none;
}
input[type=radio]:checked + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyCenter {
    display: none;
}
input[type=radio]:checked + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyCenterSelected {
    display: block;
}
input[type=radio] + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyRight {
    display: block;
}
input[type=radio] + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyRightSelected {
    display: none;
}
input[type=radio]:checked + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyRight {
    display: none;
}
input[type=radio]:checked + .editFreeCommentRadioGroupBtn > .freeCommentAlignHorizontallyRightSelected {
    display: block;
}

.editFreeCommentColorListArea {
    display: flex;
    flex-wrap: wrap;
}

    .editFreeCommentColorListArea > li {
        display: block;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        position: relative;
    }

        .editFreeCommentColorListArea > li > button {
            display: block;
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 8px;
            box-sizing: border-box;
            margin: 3px;
        }
        .editFreeCommentColorListArea > li > button:hover {
            border: solid 1px #ccc;
        }
        .editFreeCommentColorListArea > li.selected > button {
            border: solid 2px #fff;
        }

[data-tab-mode="thumbnailTabOpen"] #thumbnailArea {
    left: 0;
}

[data-tab-mode="thumbnailTabOpen"] #thumbnailHeaderArea,
[data-tab-mode="thumbnailTabOpen"] #thumbnailDisplayArea,
[data-tab-mode="thumbnailTabOpen"] #thumbnailFadeArea {
    pointer-events: auto;
    opacity: 1;
}

[data-tab-mode="thumbnailTabOpen"] #layoutArea {
    left: 380px;
}

[data-tab-mode="layoutTabOpen"] #layoutArea,
[data-tab-mode="freeCommentTabOpen"] #layoutArea {
    right: 446px;
}

[data-tab-mode="layoutTabOpen"] .editRightTabContentsArea,
[data-tab-mode="layoutTabOpen"] .editLayoutTabContent,
[data-tab-mode="freeCommentTabOpen"] .editRightTabContentsArea,
[data-tab-mode="freeCommentTabOpen"] .editFreeCommentTabContent {
    display: block;
}

[data-tab-mode="layoutTabOpen"] .editRightTabButton.layout,
[data-tab-mode="freeCommentTabOpen"] .editRightTabButton.freeComment {
    background-color: #dd621c;
}

.commentPopUpLayer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    transition: all .2s ease;
    z-index: 13000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.commentPopUpContent {
    display: flex;
    flex-direction: column;
    width: 94%;
    max-width: 800px;
    min-height: 80px;
    max-height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 10px;
}

.commentPopUpTitle {
    flex: 0 0 auto;
    position: relative;
    margin-top: 14px;
    padding: 0 0 0 54px;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    line-height: 34px;
    font-size: 24px;
    font-weight: normal;
    color: #444;
    text-align: left;
    background-color: #fff;
}

    .commentPopUpTitle > span {
        position: absolute;
        top: 0;
        left: 14px;
        display: block;
        width: 30px;
        height: 30px;
        margin-right: 10px;
        background-image: url(../common-img/img/svg/icon_status_info.svg);
        background-size: 30px;
        background-repeat: no-repeat;
        background-position: center;
    }

.commentPopUpContentArea {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-items: stretch;
    box-sizing:border-box;
    padding: 0 10px;
    width: calc(100% - 68px);
    min-height: 200px;
    max-height: 100%;
    margin: 10px 16px;
    background-color: rgba(186,241,248,.3);
    border: 2px solid rgba(0,0,0,.2);
    border-radius: 10px;
    padding-bottom: 8px;
}

    .commentPopUpContentArea > textarea {
        width: 100%;
        height: 180px;
        margin: 20px 0 10px 0;
        padding: 10px;
        font-size: 16px;
        box-sizing: border-box;
        resize: none;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        -webkit-user-select: auto;
    }

.commentPopUpButtonsArea {
    flex: 0 0 auto;
    margin-top: 20px;
    border-top: 1px solid #eaeaea;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: 14px 0;
    border-radius: 0 0 10px 10px/0 0 10px 10px;
    background-color: #7cb80a;
}

.commentPopUpButton {
    display: block;
    width: 122px;
    height: 40px;
    font-size: 20px;
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 8px;
}

    .commentPopUpButton:hover {
        background-color: rgba(0,0,0,0.2);
    }
/*説明エリア*/
#imageSelectArea .description-area {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: fixed;
    top: 44px;
    width: 100%;
    height: 60px;
    background-color: transparent;
    z-index: 1;
}
#imageSelectArea .select-description {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
#imageSelectArea .select-description > p {
    font-size: .8rem;
    line-height: 1.4;
}
#imageSelectArea .select-info {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    height: 100%;
    padding-right: 10px;
    box-sizing: border-box;
}
#imageSelectArea .select-info-counts {
    text-align: center;
    font-size: 1.0rem;
    line-height: 1.4;
    white-space: nowrap;
}
#imageSelectArea .select-info-namelabel {
    text-align: center;
    font-size: .8rem;
    line-height: 1.4;
    white-space: nowrap;
}
@media screen and (max-width: 320px) {
    body.osMac #imageSelectArea .select-info {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }

    body.osMac #imageSelectArea .select-description > p {
        font-size: .7rem;
    }

    body.osMac #imageSelectArea .select-info-counts {
        font-size: .9rem;
    }

    body.osMac #imageSelectArea .select-info-namelabel {
        font-size: .7rem;
    }
}
#imageSelectArea .select-buttons {
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 0 0 175px;
    flex: 0 0 175px;
    width: 100%;
    height: 100%;
    padding: 8px 3px;
    box-sizing: border-box;
}
#imageSelectArea .select-buttons-area {
    display: block;
    width: 100%;
}

#imageSelectArea .addpicture-button-area {
    display: inline-block;
    position: relative;
}
#imageSelectArea .addpicture-button-area > input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#imageSelectArea .addpicture-button,
#imageSelectArea .displayallselect-button,
#imageSelectArea .displayallcancel-button {
    width: 50px;
    height: 44px;
    font-size: 8px;
    padding: 27px 2px 2px;
    background-color: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    background-position: center 16%;
    background-repeat: no-repeat;
    background-size: 27px;
}
#imageSelectArea .addpicture-button {
    background-image: url(../common-img/img/svg/btn_icon_addNewPicture.svg);
}
#imageSelectArea .displayallselect-button {
    background-image: url(../common-img/img/svg/btn_icon_selectpage.svg);
}
#imageSelectArea .displayallcancel-button {
    background-image: url(../common-img/img/svg/btn_icon_cancelpage.svg);
}
/* 画像エリア */
#imageSelectArea .imageselect-contents {
    display: block;
    position: absolute;
    top: 60px;
    width: 100%;
    height: -webkit-calc(100% - 60px);
    height: calc(100% - 60px);
}
/*すすむボタンエリア*/
#imageSelectArea .next-area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    z-index: 1;
    background-color: rgba(255,255,255,0.88);
    box-shadow: 0px 0px 3px 0px #bfbfbf;
    box-sizing: border-box;
}
#imageSelectArea .next-button {
    width: 304px;
    height: 32px;
}

@media screen and (min-width: 1024px) {
    #imageSelectArea .description-area {
        top: 50px;
    }

    #imageSelectArea .select-description {
        padding-left: 24px;
        padding-top: 24px;
        -webkit-align-items: flex-end;
        align-items: flex-end;
    }

    #imageSelectArea .select-info {
        -webkit-align-items: flex-end;
        align-items: flex-end;
        padding-right: 24px;
    }

    #imageSelectArea .select-info-counts {
        font-size: 18px;
    }

    #imageSelectArea .select-info-namelabel {
        font-size: 14px;
    }

    #imageSelectArea .select-buttons {
        -webkit-flex: 0 0 209px;
        flex: 0 0 209px;
        margin-right: 24px;
        padding: 8px 0 8px 3px;
    }

    #imageSelectArea .addpicture-button,
    #imageSelectArea .displayallselect-button,
    #imageSelectArea .displayallcancel-button {
        width: 65px;
        height: 52px;
        font-size: 12px;
        padding: 31px 2px 2px;
        background-size: 30px;
    }

    #imageSelectArea .next-area {
        display: none;
    }

    #imageSelectArea .imageselect-contents {
        top: 60px;
        height: -webkit-calc(100% - 110px);
        height: calc(100% - 60px);
    }
}

#headerCaption.imageselect-header-caption {
    margin-bottom: 0;
}
.imageselect-header-description {
    color: #333;
    font-size: 1.9rem;
    line-height: 30px;
}
@charset "UTF-8";
/*機能非表示機能*/
body.Fn-hide-menu .menu {
  display: none;
}

body.Fn-hide-menu .returnTop,
body.Fn-hide-menu .faq,
body.Fn-hide-menu .help,
body.Fn-hide-menu .copyrightText,
body.Fn-hide-menu .inquiry,
body.Fn-hide-menu .maintenance,
body.Fn-hide-menu .userRule,
body.Fn-hide-menu .personalInfo,
body.Fn-hide-menu .privacyPolicy,
body.Fn-hide-menu .useEnvelop,
body.Fn-hide-menu .transcriptionBased,
body.Fn-hide-menu .dipOss {
  display: none;
}

body.Fn-hide-returnTop .returnTop {
  display: none;
}

body.Fn-hide-faq .faq {
  display: none;
}

body.Fn-hide-help .help {
  display: none;
}

body.Fn-hide-copyrightText .copyrightText {
  display: none;
}

body.Fn-hide-inquiry .inquiry {
  display: none;
}

body.Fn-hide-maintenance .maintenance {
  display: none;
}

body.Fn-hide-userRule .userRule {
  display: none;
}

body.Fn-hide-personalInfo .personalInfo {
  display: none;
}

body.Fn-hide-privacyPolicy .privacyPolicy {
  display: none;
}

body.Fn-hide-useEnvelop .useEnvelop {
  display: none;
}

body.Fn-hide-transcriptionBased .transcriptionBased {
  display: none;
}

body.Fn-hide-dipOss .dipOss {
  display: none;
}

body.Fn-hide-serviceLogo #serviceLogoWrapper {
  display: none;
}

body.Fn-hide-serviceLogo #LogoImg {
  width: 800px;
  height: 30px;
  background-position: left;
  background-size: auto 100%;
}

body.Fn-hide-save .save {
  display: none;
}

body.Fn-hide-price .productPriceLabelArea,
body.Fn-hide-price #totalAmountCaption,
body.Fn-hide-price #totalAmount,
body.Fn-hide-price #itemAmountCaption,
body.Fn-hide-price #itemAmount,
body.Fn-hide-price .paperItemPriceArea {
  display: none;
}

body.Fn-hide-price .productSizeLabelArea {
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
}

body.Fn-hide-prevTop .prevTop {
  display: none;
}

/*複数注文対応非表示*/
body.Fn-hide-multiOrder #totalAmountCaption,
body.Fn-hide-multiOrder #totalAmount,
body.Fn-hide-multiOrder .editItemChangeZone,
body.Fn-hide-multiOrder .itemChangeArea,
body.Fn-hide-multiOrder .previewContentsCheckboxArea {
  display: none;
}

body.Fn-hide-multiOrder .previewContentsArea.popup {
  height: 100%;
}

body.Fn-hide-upload #imageSelectArea .addpicture-button-area {
  display: none;
}

body.Fn-hide-upload #addImageButton {
  display: none;
}

body.Fn-hide-upload #editItemAddBtn,
body.Fn-hide-upload #editItemDeleteBtn,
body.Fn-hide-upload #editItemChangeZoneMsg {
  display: none;
}

body.Fn-hide-upload #readPicInfoArea,
body.Fn-hide-upload .thumbnailPic:not(.checkedItem) {
  display: none;
}

body.Fn-hide-upload #guideZone,
body.Fn-hide-upload #usedImagesExplain,
body.Fn-hide-upload .selectBorderReplaceButtonZone,
body.Fn-hide-upload .thumbnailAddButtonZone,
body.Fn-hide-upload .thumbnailReplaceButtonZone {
  display: none;
}

body.Fn-hide-comment #freeCommentTabOpen {
  display: none;
}

body.Fn-hide-trimming-effect .selectBorderTrimmingButtonZone,
body.Fn-hide-trimming-effect #guideZone {
  display: none;
}

body.Fn-hide-trimming .trimmingImageDrawArea {
  pointer-events: none;
}

body.Fn-hide-trimming #trimmingFnBtnArea1,
body.Fn-hide-trimming #guideZone {
  display: none;
}

body.Fn-hide-effect #trimmingFnBtnArea2 {
  display: none;
}

body.Fn-hide-tape #tape-button-area {
  display: none;
}

body.Fn-hide-matt #matt-button-area {
  display: none;
}

body.Fn-hide-border #border-button-area {
  display: none;
}

body.Fn-hide-paper #paper-button-area {
  display: none;
}

body.Fn-hide-surface #surface-button-area {
  display: none;
}

@media screen and (max-width: 1400px) {
  .roomChangeArea > .roomChangeLabelArea,
  .wallpaperChangeArea > .wallpaperChangeLabelArea {
    flex: 1 1 80px;
  }
  body.osMac #mainContentsLastPreview .roomChangeArea > .roomChangeLabelArea,
  body.osMac #mainContentsLastPreview .wallpaperChangeArea > .wallpaperChangeLabelArea {
    flex: 1 1 40px;
  }
}
@media screen and (min-width: 1401px) and (max-width: 1550px) {
  body.osMac .roomChangeArea > .roomChangeLabelArea,
  body.osMac .wallpaperChangeArea > .wallpaperChangeLabelArea {
    flex: 1 1 80px;
  }
}
@media screen and (max-width: 1350px) {
  body.osMac #mainContentsLastPreview .roomChangeArea > .roomChangeLabelArea,
  body.osMac #mainContentsLastPreview .wallpaperChangeArea > .wallpaperChangeLabelArea {
    flex: 1 1 20px;
  }
  body.osMac .roomChangeArea > .roomChangeLabelArea,
  body.osMac .wallpaperChangeArea > .wallpaperChangeLabelArea {
    flex: 1 1 40px;
  }
}
@media screen and (max-width: 1300px) {
  #mainContentsLastPreview .roomChangeArea > .roomChangeLabelArea,
  #mainContentsLastPreview .wallpaperChangeArea > .wallpaperChangeLabelArea {
    flex: 1 1 60px;
  }
}
body.osMac .roomChangeLabel,
body.osMac .wallpaperChangeLabel {
    font-size: 18px;
}
/*body.osMac .radio,
body.osMac .checkbox {
  font-size:18px;
}*/
@media screen and (max-width: 1300px) {
  body.osMac .roomChangeLabel,
  body.osMac .wallpaperChangeLabel {
    font-size: 16px;
  }
  /*body.osMac .radio,
  body.osMac .checkbox {
    font-size:16px;
  }*/
}
body.osMac .frameColorLabel,
body.osMac .tapeColorLabel,
body.osMac .mattColorLabel,
body.osMac .borderColorLabel {
    font-size: 2.3rem;
}
@media screen and (max-width: 1550px) {
  body.osMac .popupConfirmSettings .previewContentsArea #headerCaption {
    font-size: 2.1rem;
  }
  body.osMac .popupConfirmSettings .previewContentsArea #subtitle {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 1300px) {
  body.osMac .previewContentsArea #headerCaption {
    font-size: 2.2rem;
  }
  body.osMac .previewContentsArea #subtitle {
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 1400px) {
  .popupConfirmSettings .previewContentsArea #headerCaption {
    font-size: 2.1rem;
  }
  .popupConfirmSettings .previewContentsArea #subtitle {
    font-size: 1.8rem;
  }
}

/* テンプレート選択画面キャプション表示領域設定 */
#headerCaption {
  font-size: 2.1rem;
}
/******* mac対応 *******/
body.osMac .previewContentsArea #headerCaption {
    font-size: 2.0rem;
}
#textInputDecideCancelBtnArea,
#textConfirmDecideCancelBtnArea {
    background-color: #1b4494;
}

.okBtnArea,
.fileUploadFailureBtnArea,
.readBtnArea,
.progressbarReceive,
.uploadConfirmBtnArea {
    background-color: #1b4494;
}

.commentPopUpButtonsArea,
.thumbnailTabButton {
    background-color: #1b4494;
}

.okBtnArea,
.fileUploadFailureBtnArea,
.readBtnArea,
.progressbarReceive,
.uploadConfirmBtnArea {
    background-color: #254c99;
}