/*
このファイルにはヘッダーやフッターなど、
共通して使用できるCSSを記述します。
*/

.pb-3{
	height:calc(100% - 30px); /* 画面全体 - フッター */
}
/*
	未ロードのVueテンプレートを隠す
*/
[v-cloak] {
	display: none
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* "~\poweb\PC\css\common\default\common.css" をマージ */
/* ダブルクリックで選択させない */
#container{
	user-select: none; /* CSS3 */
	-moz-user-select: none; /* Firefox */
	-webkit-user-select: none; /* Safari、Chromeなど */
	-ms-user-select: none; /* IE10かららしい */
}
.visHidden{
	visibility: hidden;
}
.ptrEvtNone{
	pointer-events : none;
}
.ovfHidden{
	overflow : hidden;
}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.disp-none {
	display: none !important;
}

.disp-block {
	display: block;
}

.disp-flex {
	display: flex;
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */


/*
全体に対する指定
*/
html{
  overflow: auto;
}
/*errorDialogでマウスクリック負荷領域をbody領域をはみ出して作成しているのでスクロールしないように設定*/
body {
	overflow: hidden;
	/*position:fixed;*/
	width: 100%;
	height: 100%;
	min-width: 1350px;
	min-height: 700px;

	/*デフォルトの拡大率を100%にする*/
	zoom: 1.0;
	-moz-transform: scale(1.0);
}

/* 最小幅固定 */
#contents,
.closeOverlay,
#c-modalDialog,
#loadingDialog,
#flowButtonArea,
.footer{
	min-width: 1350px;
}

/*親要素の幅高さを100%に指定*/
/*#container{
  width: 100%;
  height:100%;
  position: relative;
}*/
#contents{
  width:100%;
}

/*文字指定*/
html,body,button,input{
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  width: 100%;
  height: 100%;
  color:hsl(0,0%,9.4%);
  font-size: 14px;
  line-height: 1.286;
}

/*アンカー要素通常時*/
a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

select,textarea{
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

body{
  background-image: url('/posca/img/pc/desktop/default/spk_02_Thumb_back01_parts.png');
}

/*
ボタン
*/
button,
#menuList > li,
#ctlImageMenuList .imgMenu .icon,
#commentMenuList .imgMenu .icon,
#stampMenuList .imgMenu .icon,
#addImgActionBtnArea button{
  border-radius: 10px;
  background-color: hsl(81,53%,47%);
  width: 174px;
  height: 32px;
  color:hsl(0,0%,100%);
  opacity:1;
  text-align: center;
  cursor:pointer;
}

/* 2021/03/16 FFGS 上記のグループから分離 */
#menuList > li
{
	border-radius: 10px;
	background-color: hsl(81,53%,47%);
/*	width: 174px;
	height: 32px;
*/	color: hsl(0,0%,100%);
	opacity: 1;
	text-align: center;
	cursor: pointer;
}


/*フッターボタン*/
#flowButtonArea button,
.previewArea .closeBtnArea button,
.previewArea .choiceBtnArea button,
#maxSavedDialog #okBtn,
#errorDialog #yesBtn,
#errorDialog #noBtn,
#errorDialog #okBtn,
#saveOverRideDlg #yesBtn,
#saveOverRideDlg #noBtn,
#saveOverRideDlg #okBtn,
#selectImageDlg #selectImgDlgOk,
#selectImageDlg #selectImgDlgCancel,
#confirmDialog #okBtn,
#confirmDialog #cancelBtn,
#confirmDialog #yesBtn,
#confirmDialog #noBtn,
.previewDialog .dialogButtonArea button,
#selectImageDlg .cancelBtn,
#selectImageDlg .okBtn,
.buttonAreaOnDialog button {
	background-color: hsl(81,53%,47%);
	border-style: solid;
	border-width: 2px;
	border-color: hsl(0,0%,100%);
	border-radius: 8px;
	width: 185px;
	height: 34px;
	color: hsl(0,0%,100%);
	font-size: 1.4em;
}
.buttonAreaOnDialog button{
  margin: 0 10px;
}

/*
状態変化
*/

/*通常ボタン*/
button:hover,
.logos .helpBtn:hover,
#menuList > li:hover,
#imgMenuList > li:hover,
#ctlImageMenuList .imgMenu .icon:hover,
#commentMenuList .imgMenu .icon:hover,
#stampMenuList .imgMenu .icon:hover,
#addImgActionBtnArea button:hover{
  opacity:0.8;
}
button:active,
#menuList > li:active,
#imgMenuList > li:active,
#ctlImageMenuList .imgMenu .icon:active,
#commentMenuList .imgMenu .icon:active,
#stampMenuList .imgMenu .icon:active,
#addImgActionBtnArea button:active{
  opacity:1;
  background-color: hsl(81,100%,14.7%);
}
#header .helpBtn:active{
  /*background-color: hsl(0, 0%, 0%);*/
}

/*フッター緑遷移ボタン*/
#flowButtonArea button:hover,
.popup .buttonArea button:hover,
.popup .popupBtnArea button:hover,
.previewArea .closeBtnArea button:hover,
.previewArea .choiceBtnArea button:hover,
#maxSavedDialog #okBtn:hover,
#errorDialog #yesBtn:hover,
#errorDialog #noBtn:hover,
#errorDialog #okBtn:hover,
#selectImageDlg #selectImgDlgOk:hover,
#selectImageDlg #selectImgDlgCancel:hover,
#confirmDialog #okBtn:hover,
#confirmDialog #cancelBtn:hover,
#confirmDialog #yesBtn:hover,
#confirmDialog #noBtn:hover,
.previewDialog .dialogButtonArea button:hover,
#selectImageDlg .cancelBtn:hover,
#selectImageDlg .okBtn:hover,
#comfirmationBtnArea #cancelBtn:hover,
#comfirmationBtnArea #okBtn:hover,
.buttonAreaOnDialog button:hover{
  opacity:1;
  box-shadow: 0px 0px 9.5px 0.5px hsl(0,0%,100%);
  text-shadow:0 0 9.5px hsl(0,0%,100%);
}
#flowButtonArea button:active,
.popup .buttonArea button:active,
.popup .popupBtnArea button:active,
.previewArea .closeBtnArea button:active,
.previewArea .choiceBtnArea button:active,
#maxSavedDialog #okBtn:active,
#errorDialog #yesBtn:active,
#errorDialog #noBtn:active,
#errorDialog #okBtn:active,
#selectImageDlg #selectImgDlgOk:active,
#selectImageDlg #selectImgDlgCancel:active,
#confirmDialog #okBtn:active,
#confirmDialog #cancelBtn:active,
#confirmDialog #yesBtn:active,
#confirmDialog #noBtn:active,
.previewDialog .dialogButtonArea button:active,
#selectImageDlg .cancelBtn:active,
#selectImageDlg .okBtn:active,
#comfirmationBtnArea #cancelBtn:active,
#comfirmationBtnArea #okBtn:active,
.buttonAreaOnDialog button:active{
  background-color: hsl(22,77.5%,48.8%);
  box-shadow: 0px 0px 9.5px 0.5px hsl(0,0%,100%);
  text-shadow:0 0 9.5px hsl(0,0%,100%);
}
#errorText ol{
  margin: 15px 0;
}
#errorText ol li{
  list-style-type: decimal;
  list-style-position: inside;
}

/*
form関連
*/

/*グルーピング領域*/
#freePhrasePage > *:not(#textGuidanceArea),
#textFontArea,
#textSizeArea,
#phraseArea,
#contents .scroll > *:not(#textGuidanceArea){
  margin-bottom: 10px;
  border: 2px solid hsl(0, 0%, 70%);
  min-height: 24px;
  border-radius: 8px;
  background-color: hsl(0, 0%, 100%);
  padding: 10px;
}

input{
  border:solid 1px #AAAAAA;
  background-color: hsl(0,0%,100%);
  height:24px;
  font-family: "Meiryo UI", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  padding:0;
  margin:0;
  padding:0 10px;
  box-sizing: border-box;
}

input:focus,
button:focus,
textarea:focus,
select:focus,
select option:focus{
  outline:none;
}
input[type="checkbox"]{
  margin-top:0.1em;
  width:1.2em;
  height:1.2em;
  border:none;
}
/*フォントサイズ変更*/
select,
select:hover,
select:focus,
select:active{
  font-size: 0.9em;
  -ms-appearance:none;
  /* 2021/07/02 FFGS 削除 */
  /*-moz-appearance:none;*/
  /*webkitは矢印も消えるためけさない*/
  /*-webkit-appearance: none;*/
  height: 28px;
  border-radius: 0;

}

select,
textarea{
  padding:2px 6px;
  box-sizing: border-box;
  border:solid 2px hsl(0,0%,80%);
  width:auto;
}
select option{
  background-color: white;
}
/*input　入力系*/
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
select:focus,
textarea:focus{
  background-color: hsl(81,80%,86%);
}


/* "./css/desktop_edit/default/layout/page.css" のマージ分 */
.l-html, .l-body {
	height: 100%;
}

.l-body {
	min-width: 1350px;
	/*min-height: 625px;*/
	overflow: hidden;
}

.l-layoutRoot {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.l-layoutRoot2 {
	height: 100%;
	flex-direction: column;
}
/*.l-header{
  flex: 0 0 52px;
}*/
.l-main {
	flex: 1 1 auto;
	overflow-x: hidden;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.l-contentHeaderArea {
	flex: 0 0 auto;
	position: relative;
}

.l-flowButtonArea {
	flex: 0 0 auto;
}

/* "./css/desktop_edit/default/object/component/component.css" のマージ分 */
/*
## Horizontal 1 Line Grid
*/
.c-horizontal1LineGrid {
	display: flex;
	align-items: center;
}

.c-horizontal1LineGrid__mainPart {
	flex: 1 1 auto;
}

.c-horizontal1LineGrid__subPart {
	flex: 0 0 auto;
}

/*
## Content Footer
*/
.p-contentFooter {
	height: 54px;
	background-color: #888;
}


/*
リテーラロゴエリア
*/


.logos{
  width:100%;
  background-color: hsl(0,0%,100%);
  height:52px;
  position:relative;
}

.logs .orderHistory,
.logos .returnTop,
.logos .faq{
  height:100%;
  float:right;
  position:relative;
}
/*アイコンのダミー画像非表示に*/
.logos .orderHistory img,
.logos .returnTop img,
.logos .faq img{
  display:none;
}

/*ホームボタン*/
.logos .returnTop .returnTopBtn{
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  padding-left:15px;

  right:185px; /*間隔(10px) + ヘルプボタン幅 + 間隔(19px)*/
  width:120px;

  box-sizing: border-box;
  padding-bottom:2px;
  line-height: 10px;
}

/*ヘルプボタン*/
.logos .faq .faqBtn{
  position:absolute;
  margin-top:10px;
  padding-left:15px;

  width:156px;
  right:19px;

  box-sizing: border-box;
  padding-bottom:2px;
  line-height: 10px;
}
/*ヘルプボタンアイコン*/
.logos .orderHistory .orderHistoryBtn::before,
.logos .faq .faqBtn::before,
.logos .returnTop .returnTopBtn::before{
  position:absolute;
  content:"";
  top:0;
  bottom:0;
  margin:auto;
  display:inline-block;
  width:1.4em;
  height: 1.4em;
  background-size:1.4em 1.4em;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
.logos .faq .faqBtn::before{
  left:5px;
  background-image: url("/posca/img/pc/desktop/default/status_icon_question.svg");
}
.logos .returnTop .returnTopBtn::before{
  left:10px;
  background-image: url("/posca/img/pc/desktop/default/status_icon_home.svg");
}


/*
ヘッダー部分
*/


#header{
  height: 50px;
  position:relative;
  border-top: solid 2px hsl(81,53%,47%);
  padding:0 10px;

}

#header #title{
  left:0;
  height:1.4em;
  font-size: 1.4em;
  position:absolute;
  margin:auto auto auto 20px;
  top:0;
  bottom:0;
}

/*注文フロー*/
#header .orderFlow{
  position:absolute;
  float:right;
  width:597px;
  height:26px;
  top:0;
  bottom:0;
  right:56px; /*本来の位置 + ヘルプボタン + 間隔分(10px + 20px)*/
  margin:auto;


  background-repeat: no-repeat;
  background-size: 597px 26px;
  background-position: center;
}

/*ヘルプボタン*/
/*#header .helpBtn{
  position:absolute;
  float:right;
  width:26px;
  height:26px;
  top:0;
  bottom:0;
  right:20px;
  margin:auto;
  border-radius: 50%;
  background-color: hsl(0, 0%, 29%);
}*/

#header .helpBtn::before{
  position:absolute;
  content:"";
  top:0;
  bottom:0;
  /*left:0;*/
  /*right:0;*/
  margin:auto;
  display:inline-block;
  width:1.4em;
  height: 1.4em;
  background-size:1.4em 1.4em;
  /*background-image: url("/posca/img/pc/desktop/default/status_icon_question.svg");*/
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}


/*
フッター
*/


#flowButtonArea{
  clear:both;
  width:100%;
  height: 54px;
  background-color: hsl(81,53%,47%);

  /*position:absolute;
  bottom:30px;*/
  z-index: 1;
}

#flowButtonArea #returnFlow button{
  float:left;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  margin:auto auto auto 10px;
}
#flowButtonArea #nextFlow button{
  float:right;
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  margin:auto 10px auto auto;
}
#flowButtonArea #returnFlow.dspNone,
#flowButtonArea #nextFlow.dspNone{
  display:none;
}

/*
最下部ナビゲーション
*/


/*#footer{*/
.footer{
  width: 100%;
  height:30px;
  background-color: hsl(0,0%,29.4%);

  position: absolute;
  z-index: 1;
}

/*#footer .footerLinkArea{*/
.footer .footerLinkArea {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: end; /*IE10*/
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-ms-flex-align: center; /*IE10*/
	-webkit-align-items: center;
	align-items: center;
	height: 100%;
	margin-right: 10px;
}

/* ナビゲーション各要素 */
/*#footer .footerLinkArea * {*/
.footer .footerLinkArea * {
	float: left;
	font-size: 0.8em;
	text-align: center;
	color: hsl(0,0%,100%);
	padding-left: 10px;
}

/*#footer .footerLinkArea *:first-child{*/
.footer .footerLinkArea *:first-child {
	position: absolute;
	left: 0;
	height: 1em;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

/*#footer .footerLinkArea .copyrightText + .sectionLine{*/
.footer .footerLinkArea .copyrightText + .sectionLine {
	display: none;
}



/*
ポップアップ時コンテンツオーバーレイ
*/


/*コンテンツ上黒半透明*/
.anmon .closeOverlay,
.anmPreview .closeOverlay,
.anmDialog .closeOverlay,
.anmDetail .closeOverlay,
.anmSaveAs .closeOverlay {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: hsla(0,0%,20%,0.5);
	z-index: 10;
}

.closeOverlay{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width: 100%;
  height: 100%;

  /*opacity: 0;*/
  z-index: -1;
  min-width: 1350px;
  min-height: 700px;
}

/*
汎用ポップアップ
*/

/*ポップアップウィンドウ*/
.popup,
#errorDialog,
#selectImageDlg,
#confirmDialog,
.previewDialog,
#deleteComfirmationArea{
  opacity:1;
  z-index: 11;
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  top:0;
  bottom:0;
  border-width: 2px;
  border-color: hsl(0,0%,79.2%);
  border-style: solid;
  border-radius: 8px;
  background-color: hsl(0,0%,100%);

  /*サイズ変更箇所*/
  width:50%;
  height:70%;

  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  -ms-flex-direction:column;
  -ms-flex-wrap:none;
  -webkit-flex-flow:column nowrap;
  flex-flow:column nowrap;

  -ms-flex-pack:end;
  -webkit-justify-content:flex-end;
  justify-content:flex-end;

}


/*ポップアップ表示非表示時*/
/*通常時非表示*/
.popup,
#selectImageDlg,
.previewDialog.dspNone,
.anmoff #errorDialog,
.anmoff #selectImageDlg,
.anmoff .popup,
.anmoff #deleteComfirmationArea,
#errorDialog.dspNone{
  opacity: 0 ;
  z-index: -1 ;
}
.popup.dspNone{
  opacity: 0 !important;
  z-index: -1 !important;
}
.popup.dspBlock{
  opacity:1 !important;
  z-index: 11 !important;
}
/*errorダイアログは最上面に*/
#errorDialog{
  opacity:1;
  z-index: 20 !important;
}
/*エラーダイアログ タイトル部分追加*/
#errorDialog #errorTitle{
  font-size: 1.2em;
  padding:15px;
  padding-left:20px;
  border-bottom:solid 1px hsl(0,0%,79.2%);
  box-sizing: border-box;
}

/*errorDialogの後ろの表示を選択できないように修正*/
#errorDialog::after{
  content:"";
  display:block;
  position:absolute;
  top:100px;
  left:0;
  right:0;
  bottom:0;
  /*margin:auto;*/
  width: 400%;
  height: 1500%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  background-color: red;
  opacity:0;
}
#errorDialog button{
  z-index: 21 !important;
}

/*ポップアップの子は暫定的にuserselect noneに*/
.popup > *,
#errorDialog > *,
#selectImageDlg > *,
#confirmDialog > *{
  -ms-user-select:none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

/*ポップアップフッター*/
.popup .buttonArea,
.popup .popupBtnArea,
.previewDialog .dialogButtonArea,
#comfirmationBtnArea{
  background-color: hsl(81,53%,47%);

  height: 54px;

  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-sizing:border-box;

  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;

  -ms-flex-align:center;
  -webkit-align-items:center;
  align-items:center;

  -ms-flex-pack:center;
  -webkit-justify-content:center;
  justify-content:center;
}

/*ポップアップフッターボタン*/
.popup .buttonArea > *,
.popup .popupBtnArea >*,
.previewDialog .dialogButtonArea > *,
#comfirmationBtnArea > *{
  border-style: solid;
  border-width: 2px;
  border-color: hsl(0,0%,100%);
  border-radius: 10px;
  background-color: hsl(81,53%,47%);
  width:45%;/* 50% * 90% */
  max-width: 270px;
  height: 34px;
  color:hsl(0,0%,100%);
  font-size: 1.4em;
  white-space: nowrap;

}
.popup .buttonArea > *:first-child,
.popup .popupBtnArea >*:first-child,
.previewDialog .dialogButtonArea > *:first-child,
#comfirmationBtnArea > *:first-child{
  margin-right:20px;
}
.popup .buttonArea > *:last-child,
.popup .popupBtnArea >*:last-child,
.previewDialog .dialogButtonArea > *:last-child,
#comfirmationBtnArea > *:last-child{
  margin-left:20px;
}

/*クローズアイコン*/
.popup .closeIcon{
  position:absolute;
  top:-20px;
  right:-20px;
  width:40px;
  height:40px;
  background-image: url("/posca/img/pc/desktop/default/btn_icon_delete.svg");
  background-repeat: no-repeat;
  -webkit-background-size: 30px;
  background-size: 30px;
  background-position: center;

  background-color: hsl(0,0%,100%);
  border:2px solid hsl(22,77.5%,48.8%);

  border-radius: 50%;
  cursor:pointer;
}
.popup .closeIcon:hover{
  background-image: url("/posca/img/pc/desktop/default/btn_icon_delete_hover.svg");
  box-shadow: 0px 0px 9.5px 0.5px hsl(22,77.5%,48.8%);
}
.popup .closeIcon:active{
  background-color: hsl(22,77.5%,48.8%);
  background-image: url("/posca/img/pc/desktop/default/btn_icon_delete_white.svg");
  box-shadow: 0px 0px 3px 0.5px hsl(22,77.5%,30%);
}

/*テキスト内容に応じて可変するポップアップ*/
#maxSavedDialog,
#savePopup,
#errorDialog,
#confirmDialog{
  height:auto;
  top:50%;
  left:50%;
  bottom:auto;
  width:40%;
  /*chrome用*/
  -webkit-transform:translate(-64%, -50%);
  /*firefox,ie用*/
  transform:translate(-64%, -50%);
}
/*テキスト間隔*/
#maxSavedDialog #maxSavedWarningText,
#savePopup .saveTextArea,
#errorDialog #errorText,
#guidance1.popup .guidanceTextArea,
#guidance2.popup .guidanceTextArea,
#changeImageGuidance .guidanceTextArea,
#confirmDialog #confirmText{
  padding:20px;
  word-wrap:break-word;
}
#errorDialog #errorText,
#confirmDialog #confirmText{
  /*padding:10px;*/
}
/*
フッターdivがないものはその分間隔を開ける
*/
#errorDialog,
#confirmDialog{
  padding-bottom:54px;
}
/*ボタン無*/
#errorDialog.noBtn{
  padding-bottom:0;
}

/*ポップアップフッター表現*/
#errorDialog::before,
#selectImageDlg::before,
#confirmDialog::before{
  content:"";
  position:absolute;
  height:54px;
  width:100%;

  bottom:0;
  left:0;

  background-color: hsl(81,53%,47%);

  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-sizing:border-box;

  z-index: -1;
}
#errorDialog::before{
  bottom:-0.5px;
}

#errorDialog.noBtn::before{
  display:none;
}
/*左側ボタン*/
#errorDialog #noBtn,
#confirmDialog #cancelBtn,
#confirmDialog #noBtn,
#selectImageDlg .cancelBtn
{
  position:absolute;
  margin:0 auto;
  right:53%;
  right:calc(50% + 20px);
  /*left:0%;*/
  bottom:10px;/*(ヘッダー高さ - ボタンの大きさ)/2*/
}
#errorDialog.noBtn #noBtn{
  display:none;
}
/*右側ボタン*/
#errorDialog #yesBtn,
#confirmDialog #okBtn,
#confirmDialog #yesBtn,
#selectImageDlg .okBtn{
  position:absolute;
  margin:0 auto;
  /*right:0;*/
  left:53%;
  left:calc(50% + 20px);
  bottom:10px;/*(ヘッダー高さ - ボタンの大きさ)/2*/
}
#errorDialog.noBtn #yesBtn{
  display:none;
}

/*中央ボタン*/
#errorDialog #okBtn{
  position:absolute;
  margin:auto;
  left:0;
  right:0;
  bottom:10px;
}
#errorDialog.noBtn #okBtn{
  display:none;
}
.buttonAreaOnDialog{
  position: absolute;
  width: 100%;
  overflow: hidden;
  left: 0;
  bottom: 0;
  padding: 10px;
  text-align: center;
  background-color: hsl(81,53%,47%);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-sizing: border-box;
  z-index: 1;
}
.closeDialogButton{
  display: block;
  position: absolute;
  top: 13px;
  right: 13px;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-image: url("/posca/img/pc/desktop/default/icon_close.svg");
  text-indent: -9999px;
  background-color: transparent!important;
}
.errorCatchDialogContainer{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 200;
	background-color: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
}
.errorCatchDialogContainer .errorCatchDialogPanel{
	padding: 30px;
	line-height: 1.7em;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.5);
  max-width: 80%;
  border-width: 2px;
  border-color: hsl(0,0%,79.2%);
  border-style: solid;
  border-radius: 8px;
  background-color: hsl(0,0%,100%);
  font-size: 1.2em;
}

/**
編集画面からポップアップ関連のCSSを移殖
初期値を非表示とし、c-modalDialog__panelクラスに対して、dspBlock dspNoneを付与することで表示切替ができる
**/
.c-modalDialog__panel.dspNone{
  display: none;
  opacity: 0 !important;
  z-index: -1 !important;
}
.c-modalDialog__panel.dspBlock,
.anmSaveAs .c-modalDialog__panel--inputText,
.anmDialog .c-modalDialog__panel--hasClose{
  display: flex;
  opacity:1 !important;
  z-index: 11 !important;
}

.c-modalDialog{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.c-modalDialog .popup,
.c-modalDialog .c-modalDialog__panel{
  pointer-events: auto;
}
/*表示非表示設定*/
.c-modalDialog__panel{
  min-width: 200px;
  min-height: 120px;
  max-width: 800px;

  display: flex;
  position: relative;

  background-color: #fff;
  border: 2px solid #CACACA;
  border-radius: 10px;

  opacity: 0 ;
  z-index: -1 ;
  display: none;
}
/*以下ポップアップ定義*/
.c-modalDialog__panel--imageConfirm{
  min-width: 500px;
  min-height: 500px;
  width: 37%;
  height: 500px;
}
.c-modalDialog__panel--inputText{
  min-width: 622px;
  font-size: 18px;
}
.c-modalDialog__panel--image{
  width: 60%;
  height: 60%;
}
.c-modalDialog__mainImage{
  margin: 20px 30px 0 30px;
}
.c-modalDialog__image{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.c-modalDialog__closeBtn{
  display: block;
  position: relative;
  top: 13px;
  right: 13px;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-image: url("/posca/img/pc/desktop/default/icon_close.svg");
  text-indent: -9999px;
}
.c-modalDialog__closeBtn--image{
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  width: 44px;
  height: 44px;
  position: absolute;
  top: -25px;
  right: -25px;
  border: 2px solid #dd621c;
  border-radius: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  background-image: url("/posca/img/pc/desktop/default/btn_icon_delete.svg");
  background-color: #fff;
}
.c-modalDialog__panel--hasClose .c-modalDialog__closeBtn{
  display: block;
}
.c-modalDialog .is-hidden{
  display: none;
}
.c-modalDialog__closeBtn:hover{
  opacity: 0.8;
}
.c-modalDialog__panel--loading{
  flex-direction: column;
  font-weight: bold;
  color: #fff;
}
.c-modalDialog__loadingIcon{
  display: block;
  text-align: center;
}

@keyframes loading {
    0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

.c-modalDialog__header{
  font-size: 20px;
  height: 49px;
  padding: 11px 12px 10px 12px;
  box-sizing: border-box;
}
.c-modalDialog__underline{
  border-bottom: 1px solid #CACACA;
}
.c-modalDialog__footer{
  min-height: 55px;
  padding: 11px 15px;
  box-sizing: border-box;

  display: flex;
  justify-content: center;

  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

  background-color: #666;
}
.c-modalDialog__content{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height:100%;
  height:100%;
}
.c-modalDialog__body{
  flex: 1 1 auto;
  display: flex;
  justify-content:space-between;
}
.c-modalDialog__body--image{
  position: relative;
}
.c-modalDialog__body--inputText{
  flex-direction: column;
  padding-bottom: 25px;
  box-sizing: border-box;
}
.c-modalDialog__message{
  display: block;
  max-width: 100%;

  padding: 19px 28px 23px 32px;

  font-size: 18px;
}
.c-modalDialog__message--image{
  font-size: 16px;
}
.c-modalDialog__message--inputText{
  flex: 0 0 auto;
  padding-bottom: 0;
}
.c-modalDialog__input--inputText{
  flex: 0 0 auto;
  padding-left: 32px;
  padding-right: 28px;
  display: flex;
  align-items: center;
}
.c-modalDialog__message p:not(:first-of-type){
  margin-top: 11px;
}
.c-modalDialog__message p:empty{
  display: none;
}
.c-modalDialog__message.is-attention{
  padding-left: 73px;
  background-position: 14px 15px;
  background-repeat: no-repeat;
  background-size: 48px 40px;
  background-image: url("/posca/img/pc/desktop/default/icon_attention_l.svg");
}
.c-modalDialog__message.is-information{
  padding-left: 73px;
  background-position: 20px 15px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-image: url("/posca/img/pc/desktop/default/icon_information_l.svg");
}
.c-modalDialog__imageBox{
  background-color: #B3B3B3;
  display: block;
  margin: 8px 13px 10px 13px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.c-modalDialog__imageBox img{
  max-width: 100%;
  max-height: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.c-modalDialog__footerBtn{
  position: relative;
  min-width: 185px;
  max-height: 32px;
  /*padding: 5px 20px 5px 20px;*/
  margin: 0 5px;

  border-radius: 10px;
  box-sizing: border-box;
  border: 2px solid #fff;

  font-size: 18px;
  white-space: nowrap;
  line-height: 0.5px;
  color: #fff;
}
.c-modalDialog__footerBtn:hover{
  box-shadow: 0px 0px 9.5px 0.5px hsl(0,0%,100%);
  text-shadow: 0 0 9.5px hsl(0,0%,100%);
}
.c-modalDialog__footerBtn:active{
  background-color: #DD621C;
}
.c-modalDialog__loadingMessage{
  text-align: center;
}
#errorDialogHeader:not(.is-hidden) ~ * #closeBtnOnErrorDialog {
  top: -33px;
}
.c-modalDialog__panel.c-modalDialog__panel--inputText .is-disabled{
  pointer-events: none !important;
  opacity: 0.3 !important;
}
/*ダイアログ内input要素*/
.c-labelAndForm{
  display:flex;
}
.c-labelAndForm--inputDialog{
  margin-top: 14px;
  margin-left: 11px;
}
.c-labelAndForm__label{
  flex: 0 0 auto;
  min-width: 45px;
}
.c-labelAndForm__label--inputDialog{
  margin-right: 11px;
  margin-top: 1px;
}
.c-labelAndForm__input{
  flex:1 1 auto;
}
.c-labelAndForm__input > input{
  width: 100%;
}
.c-labelAndForm__input--inputDialog > input{
  height: 30px;
  min-width: 305px;
  box-sizing: border-box;
  padding: 0 5px;
  font-size: 18px;
}
.c-modalDialog__panel span.is-emphasized{
  color: #087AEC;
}
/*共通アイコン指定*/

/*戻る、次へアイコン*/
#flowButtonArea #nextBtn{
  padding-right: 0.5em;
}
#flowButtonArea #nextBtn::before,
#flowButtonArea #nextBtn::after,
#flowButtonArea #returnFlow button::before,
#flowButtonArea #returnFlow button::after{
  content: "";
  margin:auto;
  position:absolute;
  top:0;
  bottom:0;
  right:8px;
  width: 13px;
  height: 2px;
  background-color: hsl(0,0%,100%);
}
#flowButtonArea #returnFlow button::before,
#flowButtonArea #returnFlow button::after{
  left:8px;
  right:auto;
}
#flowButtonArea #nextBtn::before{
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top:9px;
}
#flowButtonArea #nextBtn::after{
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  bottom:9px;
}
#flowButtonArea #returnFlow button::before{
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top:9px;
}
#flowButtonArea #returnFlow button::after{
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  bottom:9px;
}

/*閉じるアイコン*/
.popup .buttonArea .closePopupBtn,
.popup .buttonArea .selectBtn,
.popup .closeBtnArea button,
.popup .choiceBtnArea button{
  position:relative;
}
.popup .buttonArea .closePopupBtn::before,
.popup .buttonArea .selectBtn::before,
.popup .closeBtnArea button::before,
.popup .choiceBtnArea button::before{
  content: "";
  display:inline-block;
  margin:auto 0;
  position:absolute;
  top:0;
  bottom:0;
  left:8px;
  width: 1em;
  height:1em;
  background-repeat: no-repeat;
  -webkit-background-size: 1em;
  background-size: 1em;
}
.popup .buttonArea .closePopupBtn::before,
.popup .closeBtnArea button::before{
  background-image: url('/posca/img/pc/desktop/default/btn_icon_delete_white.svg');
}
.popup .buttonArea .selectBtn::before,
.popup .choiceBtnArea button::before{
  background-image: url('/posca/img/pc/desktop/default/btn_icon_decide.svg');
}
.popup .buttonArea .selectBtn{
  padding-left:0.5em;
}
.popupWindow {
	cursor: pointer;
}

/*ローディングにポップアップの描画が反映されないよう対応*/
#loadingDialog.popup{
  border-radius: 0;
  border:none;
}

.logo1 {
	background-repeat:no-repeat;
	background-size:127px 40px;
	background-position:center;
	background-repeat : no-repeat;
	width:127px;
	height:52px;
	float: left;
	margin-left:10px;
}

.logo2 {
	background-repeat:no-repeat;
	background-size:350px 40px;
	background-position:center;
	background-repeat : no-repeat;
  	width:350px;
	height:52px;
	float:left;
	margin-left:10px;
}

#header .help{
	height: 100%;
	float: right;
}

#header .help .helpBtn{
	position: absolute;
	margin-top: 12px;
	padding-left: 15px;
	width: 100px;
	right: 10px;
	box-sizing: border-box;
	padding-bottom: 2px;
	line-height: 10px;
  border-radius: 10px;
  width: 100px;
  height: 26px;
}

#header .help .helpBtn::before {
	left: 5px;
	background-image: url("/posca/img/pc/desktop/default/status_icon_question.svg");
}

/*アイコンのダミー画像非表示に*/
#header .help .helpBtn img{
  display:none;
}

#header .orderFlow{
  right:120px;
}

/*
** ローディング
*/
/* ローダー表示のトリガー (body要素にloadingクラスを付与)*/
.loading .loader {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: none;
}
/* ローダー表示中の背景及びローダーアイコンの位置指定 */
.loader {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0 !important;
	background-color: hsla(0,0%,20%,0.5);
	-ms-flex-direction: column;
	-ms-flex-wrap: nowrap;
	-webkit-flex-flow: column nowrap;
	flex-flow: column nowrap;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	z-index: 5;
	min-width: 1350px;
	min-height: 700px;
}
/* ローダーアイコン表示 アニメーションの指定 */

.icon-loading {
	display: none;
}
.message-loading {
	display: none;
}
.loader .message-loading {
	display: block;
}
.loader .icon-loading {
	width: 100px;
	height: 100px;
	display: block;
	transform: translate(-50%,-50%);
	background-repeat: repeat;
	background-position: center;
	background-image: url("/posca/img/pc/desktop/default/loadIcon.png");

	/*ie*/
	-ms-animation-name: nowLoadingEffect;
	-ms-animation-duration: 1s;
	-ms-animation-timing-function: linear;
	-ms-animation-iteration-count: infinite;
	
	/*firefox*/
	-moz-animation-name: nowLoadingEffect;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	
	/*chrome etc*/
	-webkit-animation-name: nowLoadingEffect;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}
/* ローダーのテキスト */
.loader > h1 {
	width: 300px;
	height: 1.4em;
	font-size: 1.2em;
	text-align: center;
	position: relative;
	color: white;
	display:block;
}
.non-loader{
	display:none;
}
/*
**  アニメーション
*/
@-ms-keyframes nowLoadingEffect {
	0% {
		-ms-transform: rotate(0deg);
	}

	12.5% {
		-ms-transform: rotate(0deg);
	}

	12.6% {
		-ms-transform: rotate(45deg);
	}

	25% {
		-ms-transform: rotate(45deg);
	}

	25.1% {
		-ms-transform: rotate(90deg);
	}

	37.5% {
		-ms-transform: rotate(90deg);
	}

	37.6% {
		-ms-transform: rotate(135deg);
	}

	50% {
		-ms-transform: rotate(135deg);
	}

	50.1% {
		-ms-transform: rotate(180deg);
	}

	62.5% {
		-ms-transform: rotate(180deg);
	}

	62.6% {
		-ms-transform: rotate(225deg);
	}

	75% {
		-ms-transform: rotate(225deg);
	}

	75.1% {
		-ms-transform: rotate(270deg);
	}

	87.5% {
		-ms-transform: rotate(270deg);
	}

	87.6% {
		-ms-transform: rotate(315deg);
	}

	100% {
		-ms-transform: rotate(315deg);
	}
}

@-moz-keyframes nowLoadingEffect {
	0% {
		-moz-transform: rotate(0deg);
	}

	12.5% {
		-moz-transform: rotate(0deg);
	}

	12.6% {
		-moz-transform: rotate(45deg);
	}

	25% {
		-moz-transform: rotate(45deg);
	}

	25.1% {
		-moz-transform: rotate(90deg);
	}

	37.5% {
		-moz-transform: rotate(90deg);
	}

	37.6% {
		-moz-transform: rotate(135deg);
	}

	50% {
		-moz-transform: rotate(135deg);
	}

	50.1% {
		-moz-transform: rotate(180deg);
	}

	62.5% {
		-moz-transform: rotate(180deg);
	}

	62.6% {
		-moz-transform: rotate(225deg);
	}

	75% {
		-moz-transform: rotate(225deg);
	}

	75.1% {
		-moz-transform: rotate(270deg);
	}

	87.5% {
		-moz-transform: rotate(270deg);
	}

	87.6% {
		-moz-transform: rotate(315deg);
	}

	100% {
		-moz-transform: rotate(315deg);
	}
}

@-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);
	}
}

/* 戻る、保存、次へボタン */
/*
## Horizontal 1 Line Grid
*/
.c-horizontal1LineGrid{
  display: flex;
  align-items: center;
}
.c-horizontal1LineGrid__mainPart{
  flex: 1 1 auto;
}
.c-horizontal1LineGrid__subPart{
  flex: 0 0 auto;
}
/*
## Vertical 1 Line Grid
*/
.c-vertical1LineGrid{
  display: flex;
  flex-direction: column;
}
.c-vertical1LineGrid--panelStyle{
  border-radius: 10px;
  background-color: rgba(0,0,0,0.5);
  /*border: 1px solid #888;*/
  box-sizing: border-box;
  position: relative;
  margin-left: 10px;
  color: #fff;
}
.c-vertical1LineGrid--leftTabStyle{
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-left: 0;
  margin-right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  color: #fff;
}
.c-vertical1LineGrid__noStreatchPart{
  flex: 0 1 auto;
  overflow: auto;
  margin-right: 4px;
}
.c-vertical1LineGrid__mainPart{
  flex: 1 1 auto;
  overflow: auto;
}
.c-vertical1LineGrid__mainPart--leftTabStyle{
  margin-top: 10px;
  margin-right: 4px;
  margin-bottom: 15px;
}
.c-vertical1LineGrid__subPart{
  flex: 0 0 auto;
}

/*
## Transfer Buttons (Go Prev / Go Next)
*/
.c-root__transferBtn{
  min-height: 34px;
  min-width: 185px;
  background-color: #666;
  border: 2px solid #fff;
  border-radius: 10px;
  margin: 0 10px;
  color: #fff;
  font-size: 1.4em;
  position: relative;
}
[id="os_name"][value="mac"] ~ * .c-root__transferBtn{
  min-width: 225px;
}
.c-root__transferBtn:hover{
  box-shadow: 0px 0px 9.5px 0.5px hsl(0,0%,100%);
  text-shadow: 0 0 9.5px hsl(0,0%,100%);
}
.c-root__transferBtn:active{
  background-color: #DD621C;
}
.c-root__transferBtn--toPrev:before,
.c-root__transferBtn--toPrev:after,
.c-root__transferBtn--toNext:before,
.c-root__transferBtn--toNext:after{
  content: "";
  margin: auto;
  position: absolute;
  height: 2px;
  background-color: hsl(0,0%,100%);
}
.c-root__transferBtn--toPrev:before,
.c-root__transferBtn--toPrev:after{
  left: 8px;
  width: 13px;
}
.c-root__transferBtn--toNext:before,
.c-root__transferBtn--toNext:after{
  right: 8px;
  width: 13px;
}
.c-root__transferBtn--toPrev:before{
  transform: rotate(-45deg);
  top: 9px;
}
.c-root__transferBtn--toPrev:after{
  transform: rotate(45deg);
  bottom: 9px;
}
.c-root__transferBtn--toNext:before{
  transform: rotate(45deg);
  top: 9px;
}
.c-root__transferBtn--toNext:after{
  transform: rotate(-45deg);
  bottom: 9px;
}
.c-root__transferBtn.is-hidden{
  visibility: hidden;
}
/*
## Optional Button
*/
.c-root__optionalBtn {
	border-radius: 10px;
	background-color: #DD621C;
	color: #fff;
	padding: 2px 20px 3px 20px;
	font-size: 20px;
	border: 2px solid #fff;
	min-width: 184px;
}

	.c-root__optionalBtn:hover {
		box-shadow: 0px 0px 9.5px 0.5px hsl(0,0%,100%);
		text-shadow: 0 0 9.5px hsl(0,0%,100%);
	}

.c-root__remindOptionalBtn {
	border-radius: 8px;
	background-color: #DD621C;
	color: #fff;
	padding: 0px 10px 2px 10px;
	margin: 0 5px;
	font-size: 16px;
	vertical-align: 1px;
	display: inline-block;
}
/*
## text-Centering
*/
.u-centering{
  text-align: center;
}
/*
## right
*/
.u-txtRight{
  /*text-align: right;*/
  margin-left:auto;
}

/*
## is-disabled
*/
.is-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/**
	OCAPIのエラーメッセージ部
*/
.errList > ul {
	display: block;
	/*width: 100%;*/
	border: 4px solid #e7002e;
	background: #FFFFFF;
	padding: 10px 20px 20px;
}
.errList {
	display: none;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto 30px;
	padding: 0;
}
.errList > ul > li > a {
	display: block;
	font-size: 14px;
	color: #000000;
	text-decoration: none;
	padding-left: 14px;
	line-height: 1.4;
	background: url(/posca/img/pc/desktop/default/icon_downarrow_green.svg) 0 6px no-repeat;
	background-size: 8px auto;
	pointer-events: none;
}
.c-modalDialog__closeBtn {
	display: block;
	position: relative;
	top: 13px;
	right: 13px;
	width: 28px;
	height: 28px;
	background-size: contain;
	background-image: url(/posca/img/pc/desktop/default/icon_close.svg);
	float:right;
	/*text-indent: -9999px;*/
}

/*
	保存しましたダイアログ
*/
.popupContentTitle {
	margin-top: 14px;
	margin-bottom: 10px;
	padding: 0 0 0 64px;
	box-sizing: border-box;
	height: 30px;
	line-height: 34px;
	font-size: 24px;
	font-weight: normal;
	color: #444;
	text-align: left;
	background-color: #fff;
	display: flex;
	white-space: nowrap;
}

/*
	ガイダンスダイアログ
*/
.guidanceContentTitle {
	margin-top: 14px;
	margin-bottom: 10px;
	padding: 0 0 0 24px;
	box-sizing: border-box;
	height: 30px;
	line-height: 34px;
	font-size: 24px;
	font-weight: normal;
	color: #444;
	text-align: left;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
}

/*アイコン*/
.guidanceContentIcon {
	position: absolute;
	top: 45px;
	left: 15px;
	margin-top: 16px;
	transform: scale(0.5);
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: center;
}

/* HowToの上側のメッセージサイズ */
.guidanceContent__contentArea__topMsg {
	font-size: 20px;
	line-height: 30px;
	text-align: left;
	margin: 20px 14px 0 80px;
}

/*アイコン*/
.popupContentIcon {
	position: absolute;
	top: 0;
	left: 14px;
	margin-top:16px;
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(/posca/img/pc/desktop/default/icon_information_l.svg);
}

/* 保存データを開く */
.popupContentLinkArea {
	margin-top: 14px;
	height: 30px;
	display: inline-block;
	align-items: center;
	position: absolute;
	right: 10px;
	white-space: nowrap;
}
/* 保存しました本体 */
.popupContent {
	max-width: 800px;
	padding: 0;
	border-radius: 10px;
	position: relative;
	width: 94%;
	min-height: 400px;
	background-color: #fff;
	box-sizing: border-box;
	display:block;
}
/*  */
.popupContentContentArea {
	display:block;
	min-height: 300px;
	width: calc(100% - 28px);
	margin: 3px 14px 14px 14px;
	background-color: rgba(186,241,248,.3);
	border: 2px solid rgba(0,0,0,.2);
	border-radius: 10px;
}
.popupContentContentAreaHowTo {
	display: block;
	min-height: 300px;
	width: calc(100% - 28px);
	margin: 3px 14px 14px 14px;
	background-color: rgba(186,241,248,.3);
	border: 2px solid rgba(0,0,0,.2);
	border-radius: 10px;
	text-align: center;
}
/* データを保存しました */
.popupiContent {
	font-size: 1.8rem;
	font-weight: 700;
	text-align: left;
	color: #000000;
	margin: 10px 10px 10px 10px;
	border-bottom: 1px solid #d2d2d2;
}
/* HowToの上側のメッセージサイズ */
.popupContent__contentArea__topMsg {
	font-size: 20px;
	line-height: 24px;
	text-align: left;
	margin: 20px 14px 0 14px;
}
/* HowToの下側のメッセージサイズ */
.popupContent__contentArea__bottomMsg {
	font-size: 15px;
	line-height: 20px;
	text-align: left;
	margin: 0 14px 0 14px;
}
/* HowToの画像 */
.popupContent__contentArea__frame {
	margin: 10px 0 10px 14px;
	width: calc(100% - 28px);
	min-height: 150px;
	background-color: #fff;
}
/* 次回から表示しないのエリア */
#ConfirmCheckboxArea, .ConfirmCheckboxArea {
	font-size: 1.5rem;
	text-align: center;
	position: relative;
	margin-bottom: 14px;
}
.ConfirmCheckboxArea input[type='checkbox'] {
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	cursor: pointer;
}
.ConfirmCheckboxArea label {
	/*margin: 0 2rem;*/
	cursor: pointer;
}

/* 画面上部の～ */
.lebe {
	margin: 3px 14px 14px 14px;
	font-size: 1.4rem;
	line-height: 1.6;
}
.result {
	border: 1px solid #d2d2d2;
	font-size: 14px;
	line-height: 1.6;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}
.result > dt {
	font-weight: 700;
	margin:3% 3% 3% 3%;
	border-bottom: 1px dotted #d2d2d2;
}
.result > dd {
	margin: 3% 3% 3% 3%;
	line-height: 1;
}


/* FFGS追加  */
/* 編集中一覧/注文履歴 */
.logos .orderHistory .orderHistoryBtn {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	padding-left: 15px;
	right: 315px; /*間隔(10px) + ヘルプボタン幅 + 間隔(19px)*/
	width: 185px;
	box-sizing: border-box;
	padding-bottom: 2px;
	line-height: 10px;
}

.logos .orderHistory .orderHistoryBtn::before {
	left: 10px;
	background-image: url("/posca/img/pc/desktop/default/status_icon_home.svg");
}


.scale-button {
	background-color: #4A4A4A;
	color: #fff;
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	text-align: center;
	line-height: 25px;
	margin-right: 8px;
}

.is-emphasized {
	color: #087AEC;
}

/**
 * OCAPIダイアログ
*/
#ocapi_login_dlg.login_form_pc {
	height: 95vh;
	max-height: 370px;
	overflow-y: auto;
}
#ocapi_login_dlg .c-modalDialog__message {
	width: 500px;
	/*height: 450px;*/
}
#ocapi_login_dlg .subttl {
	margin-bottom: 15px;
	overflow: inherit;
	font-size: 20px;
	font-weight: 700;
	text-align: left;
	color: #000000;
}
#ocapi_login_dlg .requiredMsg {
	font-size: 14px;
	margin-bottom: 20px;
	color: #000000;
}
#ocapi_login_dlg .required {
	display: block;
	margin-bottom: 23px;
	text-align: left;
	font-size: 0.8em;
}
#ocapi_login_dlg .requiredTxt{
	height:30px;
}

#ocapi_login_dlg .checkbox {
	font-size: 0.8em;
	margin-bottom: 15px;
	cursor: pointer;
}
#ocapi_login_dlg input {
	vertical-align: middle;
}
#ocapi_login_dlg .remenberSelect {
	margin-left: 10px;
	user-select: none
}
#ocapi_login_dlg .remenberLabel {
	cursor: pointer;
}
#ocapi_login_dlg .forgotLabel {
	display: block;
	margin-top: 8px;
	margin-left: 8px;
	font-size:0.8em;
}
#ocapi_login_dlg .registLabel {
	/*display: block;*/
	/*margin: -26px 0 0 auto;*/
	margin-bottom: 10px;
}
#ocapi_login_dlg .forgotAllow {
	margin-top:8px;
	width: 8px;
	height: 8px;
	border-top: 2px solid;
	border-right: 2px solid;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#ocapi_login_dlg .forgotArea {
	display: flex;
	align-items: center;
}
#ocapi_login_dlg p{
	margin-bottom:5px;
}
#ocapi_login_dlg #emailCaution{
	display: none;
	color: red;
}
#ocapi_login_dlg #passwordCaution {
	display: none;
	color: red;
}
#ocapi_login_dlg_footer button {
	margin: 5px 0;
}

/* チャットボット */
#chava-root {
    display: none;
}
/*
    #chava-root button.chava-chat-btn {
        bottom: 120px;
        height: 120px;
        border-radius: 0;
        min-width: 35px;
        max-width: 35px;
        padding: 0;
    }

        #chava-root button.chava-chat-btn svg.chat-icon,
        #chava-root button.chava-chat-btn span {
            padding: 2px 5px 2px 5px;
        }

        #chava-root button.chava-chat-btn.left {
            left: 0px;
        }

        #chava-root button.chava-chat-btn.right {
            right: 0px;
        }

        #chava-root button.chava-chat-btn svg.chat-icon {
            font-size: 25px !important;
        }

        #chava-root button.chava-chat-btn span {
            font-size: 20px;
        }
*/

#guidance1Dlg .c-modalDialog__content,
#guidance1Dlg .popupContentContentArea {
	max-height: calc(100vh - 1vh);
	overflow-y: auto;
	overflow-x: hidden;
}
#guidance2Dlg .c-modalDialog__content,
#guidance2Dlg .popupContentContentArea {
	max-height: calc(100vh - 1vh);
	overflow-y: auto;
	overflow-x: hidden;
}
#guidance3Dlg .c-modalDialog__content,
#guidance3Dlg .popupContentContentArea {
	max-height: calc(100vh - 1vh);
	overflow-y: auto;
	overflow-x: hidden;
}
#guidance4Dlg .c-modalDialog__content,
#guidance4Dlg .popupContentContentArea {
	max-height: calc(100vh - 1vh);
	overflow-y: auto;
	overflow-x: hidden;
}
#guidance5Dlg .c-modalDialog__content,
#guidance5Dlg .popupContentContentArea {
	max-height: calc(100vh - 1vh);
	overflow-y: auto;
	overflow-x: hidden;
}