/* Colorbox Core Style: 次の CSS はサンプルテーマ間で一貫しており、変更しないでください。 */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);} #cboxWrapper {max-width:none;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* User Style: Colorbox の外観を変更するには、次のスタイルを変更します。生成された HTML のネストを表す方法で順序付けされ、タブ付けされます。s */ #cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);} #colorbox{outline:0;} #cboxTopLeft{width:14px; height:14px; background:url(../img/colorbox/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(../img/colorbox/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(../img/colorbox/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(../img/colorbox/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(../img/colorbox/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(../img/colorbox/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(../img/colorbox/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(../img/colorbox/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(../img/colorbox/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(../img/colorbox/loading.gif) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} /* これらの要素はボタンであり、不要な基本スタイルを避けるために追加のスタイルをリセットする必要がある場合があります。 */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; position:absolute; bottom:-29px; background:url(../img/colorbox/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} /* :active (マウスクリック) ではアウトラインを回避しますが、:focus (タブナビゲーション) ではアウトラインを保持します。 */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious:hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext:hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose:hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow:hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow:hover{background-position:-125px 0px;} /* //////////////////////////// Add css //////////////////////////// */ /* 枠線、ボタンを削除 */ #cboxTopLeft, #cboxTopCenter, #cboxTopRight, #cboxMiddleLeft, #cboxMiddleRight, #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight, #cboxClose{ display: none; } /* 背景色変更 */ #cboxOverlay{ background-color: #707070; opacity: 0.7 !important; cursor: default !important; } /* ダイアログ全体 */ #cboxContent{ border-radius: 3px; border: 5px solid gray; } /* 高さ自動調整 */ #colorbox.inline_dialog_area #cboxContent, #colorbox.inline_dialog_area #cboxLoadedContent{ height: auto !important; } #cboxContent div.dialog_area{ padding: 20px 20px 5px; } /* タイトル */ #cboxLoadedContent .dialog_title{ font-weight: bold; margin: 10px; font-size: 20px; } /* 確認ダイアログアイコン */ #cboxLoadedContent .dialog_title.dialog_confirmation:before{ display: inline-block; background-image: url(../img/question.png); background-repeat: no-repeat; background-size: contain; content: ""; width: 35px; height: 35px; margin-right: 5px; } /* 情報ダイアログアイコン */ #cboxLoadedContent .dialog_title.dialog_information:before{ display: inline-block; background-image: url(../img/information.png); background-repeat: no-repeat; background-size: contain; content: ""; width: 35px; height: 35px; margin-right: 5px; } /* 警告ダイアログアイコン */ #cboxLoadedContent .dialog_title.dialog_warning:before{ display: inline-block; background-image: url(../img/exclamation.png); background-repeat: no-repeat; background-size: contain; content: ""; width: 35px; height: 35px; margin-right: 5px; } /* エラーダイアログアイコン */ #cboxLoadedContent .dialog_title.dialog_error:before{ display: inline-block; background-image: url(../img/cross-circle.png); background-repeat: no-repeat; background-size: contain; content: ""; width: 35px; height: 35px; margin-right: 5px; } /* ダイアログタイトル */ #cboxLoadedContent .dialog_title span{ display: inline-block; vertical-align: top; /* font-size: 20px; */ } /* 表示コンテンツ */ #cboxLoadedContent .dialog_box_area{ max-width: 400px; margin: 20px auto; padding: 10px; } /* コンテンツ内タイトル */ #cboxLoadedContent .dialog_box_title{ font-weight: bold; margin-bottom: 10px; } /* 選択肢のラベル */ #cboxLoadedContent .dialog_box_area label{ margin-left: 5px; display: inline-block; } /* 入力欄 */ #cboxLoadedContent .dialog_box_area input[type=text]{ margin-left: 5px; width: 70%; } /* ボタンエリア */ #cboxLoadedContent .dialog_btn-area{ text-align: center; margin-top: 30px; } /* OKボタン　会員 */ #cboxLoadedContent .dialog_ok-btn{ border-radius: 5px; font-size : 1rem; cursor : pointer; /* background-color: #0974d6; */ background-color: #f9800f; color: white; font-weight: bold; width: 100px; } /* キャンセルボタン　会員 */ #cboxLoadedContent .dialog_cancel-btn{ border-radius: 5px; font-size : 1rem; cursor : pointer; border: 1px solid #f9800f; background-color: white; color: #f9800f; font-weight: bold; width: 100px; margin-left: 50px; } /* //////////////////////////// Add css //////////////////////////// */