@charset "UTF-8";
/* ========================================================================== Foundation ========================================================================== */
/* ========================================================================== Variable ========================================================================== */
/* ========================================================================== Base ========================================================================== */
html { width: 100%; height: 100%; }

body { width: 100%; min-width: 320px; height: 100%; min-height: 100%; color: #222; font-size: 16px; font-family: メイリオ, sans-serif; }
@media (max-width: 767px) { body { font-size: 14px; } }

/* vender（ライブラリ） */
/* ========================================================================== Toggle ========================================================================== */
.tgl { display: none; }
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn { box-sizing: border-box; }
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection { background: none; }
.tgl + .tgl-btn { display: block; position: relative; width: 52px; height: 26px; outline: 0; cursor: pointer; }
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before { position: relative; display: block; content: ""; width: 50%; height: 100%; }
.tgl + .tgl-btn:after { left: 0; }
.tgl + .tgl-btn:before { display: none; }
.tgl:checked + .tgl-btn:after { left: 50%; }

.tgl-flat + .tgl-btn { padding: 2px; transition: all .2s ease; background: #fff; border: 3px solid #f2f2f2; border-radius: 2em; }
.tgl-flat + .tgl-btn:after { transition: all .2s ease; background: #f2f2f2; content: ""; border-radius: 1em; }
.tgl-flat:checked + .tgl-btn { border: 3px solid #9FD6AE; }
.tgl-flat:checked + .tgl-btn:after { left: 50%; background: #9FD6AE; }

.tgl-light + .tgl-btn { padding: 2px; transition: all .4s ease; background: #f0f0f0; border-radius: 2em; }
.tgl-light + .tgl-btn:after { transition: all .2s ease; background: #fff; border-radius: 50%; }
.tgl-light:checked + .tgl-btn { background: #9FD6AE; }

/* venders-extension（ライブラリの上書き） */
/* ========================================================================== Bootstrap a overwrite ========================================================================== */
a:focus, a:hover { text-decoration: none; }

/* ========================================================================== Bootstrap alert overwrite ========================================================================== */
.alert { width: 100%; margin: 0 auto; padding: 10px; font-size: 12px; cursor: pointer; }

/* ========================================================================== Bootstrap button overwrite ========================================================================== */
.btn:focus, .btn .focus { outline: 0; }
.btn:active:focus, .btn:active .focus { outline: 0; }
.btn .active:focus, .btn .active .focus { outline: 0; }

/* ========================================================================== Bootstrap breadcrumb overwrite ========================================================================== */
.breadcrumb { background-color: transparent; }
.breadcrumb li { font-size: 12px; }
.breadcrumb li + li:before { content: ">"; }

/* ========================================================================== Bootstrap carousel overwrite ========================================================================== */
.carousel-control.right, .carousel-control.left { background-image: none; }

.carousel-indicators li { display: none; }

/* ========================================================================== Bootstrap col- overwrite ========================================================================== */
[class^="col-"] { padding: 0; }

/* ========================================================================== Bootstrap datepicker overwrite ========================================================================== */
.input-group-addon, .input-group-btn { width: 0%; }

.uib-clear { display: none; }

small[aria-label="Sunday"] { color: #ff0000; }

.uib-weeks > td:first-child { color: #ff0000; }
.uib-weeks > td > button:hover { color: #ff0000; }

/* ========================================================================== Bootstrap form control overwrite ========================================================================== */
.form-control { padding: 3px 4px; color: #222; font-size: 14px; }
.form-control[readonly="readonly"] { box-shadow: none; background: #fff; cursor: no-drop; }
.form-control[readonly="readonly"]:focus { border-color: #ccc; box-shadow: none; }

/* ========================================================================== Input Group ========================================================================== */
.input-group { float: left; margin-right: 10px; width: 100%; }
@media (max-width: 767px) { .input-group { width: 216px; } }
.input-group .input-group-btn > button { top: 0px; padding: 6px; width: 30px; height: 34px; font-size: 16px; }

/* ========================================================================== Bootstrap label overwrite ========================================================================== */
.label { float: right; padding: 4px; }

/* ========================================================================== Leaflet overwrite ========================================================================== */
#map { /* leaflet-tooltip-bottom:beforeがTooltipの吹き出し部分の▲の正体なのでこれも消す */ }
#map .leaflet-tooltip { border: none; box-shadow: none; padding: 0 8px; background-color: rgba(255, 255, 255, 0.5); }
#map .leaflet-tooltip-bottom { margin-top: 0; }
#map .leaflet-tooltip-top:before, #map .leaflet-tooltip-bottom:before, #map .leaflet-tooltip-left:before, #map .leaflet-tooltip-right:before { content: none; }
#map .tips { color: #00336D; text-shadow: 1px 1px 2px gainsboro; }
#map .tipsHeader { display: block; }
#map .tipsStationName { overflow: hidden; font-weight: bold; text-shadow: 1px 1px 2px gainsboro; text-align: center; }
#map .tipsAnalogDataTable { margin: 2px 0; border-top: 1px solid #00336D; font-size: 12px; }
#map .tipsAnalogDataTitle { text-align: right; }
#map .tipsAnalogDatavalue { padding-left: 6px; text-align: right; }
#map .tipsObservationTime { text-align: center; }
#map .leaflet-popup-content { margin: 10px 8px 6px; }
#map .popup { width: 160px; }
#map .popupHeader { display: block; color: #222; cursor: pointer; }
#map .popupHeader:hover { color: #5bc0de; }
#map .popupStationName { overflow: hidden; margin-bottom: 3px; border-bottom: 1px solid transparent; }
#map .popupStationName:hover { border-color: #5bc0de; }
#map .popupCommands { display: block; padding-left: 20px; color: #222; cursor: pointer; }
#map .popupThumbnail { max-width: 100%; }
#map .popupObservationTime { text-align: right; }
#map .command { border-bottom: 1px solid transparent; }
#map .command:hover { border-color: #5bc0de; color: #5bc0de; }

/* ========================================================================== Bootstrap modal overwrite ========================================================================== */
.modal-header { padding: 0 8px; margin-top: -2px; margin-right: 8px; margin-left: 8px; border-bottom: 1px solid #2d7ab2; }

body.modal-open { padding-right: 0 !important; }

.modal-content .glyphicon-remove { width: 100%; text-align: right; cursor: pointer; }

.modal-body { overflow: hidden; top: -4px; padding-top: 0; }
.modal-body img { width: 100%; height: auto; }
.modal-body .table { margin-bottom: 0; }

/* ========================================================================== Bootstrap nav overwrite ========================================================================== */
.navbar-toggle { margin: 0; border-color: #46b8da; background-color: #5bc0de; }
.navbar-toggle .icon-bar { background-color: #fff; }
.navbar-toggle:focus { border-color: #46b8da; background-color: #5bc0de; }
.navbar-toggle:hover { border-color: #269abc; background-color: #31b0d5; }

.navbar-brand { height: auto; font-size: 14px; }
.navbar-brand > img { display: inline-block; }

.navbar-collapse { border: none; }

.navbar-nav li a { padding: 8px 15px; color: #fff; font-size: 14px; }
.navbar-nav li a:focus, .navbar-nav li a:hover { background: #4b626d; color: #fff; }
@media (max-width: 767px) { .navbar-nav li a:focus, .navbar-nav li a:hover { background: #484848; color: #fff; } }
.navbar-nav .open .dropdown-toggle { background: #607D8B; }
@media (max-width: 767px) { .navbar-nav .open .dropdown-toggle { background: #616161; } }
.navbar-nav .open .dropdown-toggle:focus, .navbar-nav .open .dropdown-toggle:hover { background: #4b626d; }
@media (max-width: 767px) { .navbar-nav .open .dropdown-toggle:focus, .navbar-nav .open .dropdown-toggle:hover { background: #484848; } }
.navbar-nav .open .dropdown-menu { background: #607D8B; }
@media (max-width: 767px) { .navbar-nav .open .dropdown-menu { background: #616161; } }
@media (max-width: 767px) { .navbar-nav .open .dropdown-menu li a { color: #fff; }
  .navbar-nav .open .dropdown-menu li a:focus, .navbar-nav .open .dropdown-menu li a:hover { background: #484848; } }

.nav-tabs { margin-bottom: 10px; }

/* ========================================================================== Bootstrap Table overwrite ========================================================================== */
.table { font-size: 14px; word-break: break-all; }
.table tbody td { padding: 10px 8px; border-bottom: 1px solid #ccc; }
.table th { font-weight: normal; vertical-align: middle; }
.table td .btn { font-size: 14px; }
@media screen and (max-width: 482px) { .table td .btn { font-size: 12px; } }

/* ========================================================================== Layout ========================================================================== */
/* ========================================================================== Nav Layout ========================================================================== */
nav { background: #607D8B; color: #fff; }
@media (max-width: 767px) { nav { background: #616161; } }

.l-navbar-header { width: 100%; background: #616161; }

.l-navbar-collapse { width: 100%; max-width: 1366px; } /* ナビゲーションメニューの最大幅を想定解像度の横幅に変更 */

.l-navbar-collapse__title { font-size: 14px; }
@media (min-width: 768px) { .l-navbar-collapse__title { position: absolute; top: 0; right: 0; } }

/* ========================================================================== Main Layout ========================================================================== */
article { position: relative; width: 100%; height: auto; min-height: 100%; padding-bottom: 21px; }
@media (max-width: 575px) { article { padding-bottom: 38px; } }

/* ログインフォーム定義 */
.l-login-area { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: 370px; height: 270px; background: transparent; }
.l-login-area .l-login-area__logo { width: 100%; margin-top: -104px; }
.l-login-area .l-login-area__logo img { width: 100%; }
.l-login-area .l-login-area__form { width: 90%; max-width: 370px; height: 230px; padding: 10px; border: 1px solid #868686; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: #fcfcfd; }

/* コンテンツエリア定義 */
.l-contents-area { width: 100%; max-width: 1366px; height: auto; overflow-x: hidden; overflow-y: auto; background: #fff; border: 1px solid #9E9E9E; -moz-box-shadow: 0px 0px 6px 2px #9E9E9E; -webkit-box-shadow: 0px 0px 6px 2px #9E9E9E; box-shadow: 0px 0px 6px 2px #9E9E9E; } /* コンテンツエリアの最大横幅を想定解像度の横幅に変更 */

/* ========================================================================== Footer Layout ========================================================================== */
footer { position: absolute; right: 0; left: 0; width: 100%; margin-top: -21px; padding: 2px 0; background: #607D8B; color: #fff; font-size: 12px; text-align: center; }
@media (max-width: 575px) { footer { margin-top: -38px; } }
@media (min-width: 576px) { footer .l-footer-text__ver { position: absolute; right: 0; bottom: 0; margin-right: 15px; } }

/* ========================================================================== Object ========================================================================== */
/* component */
/* ========================================================================== Auto Update Style ========================================================================== */
.c-auto-update__frame { overflow: hidden; text-align: right; }
.c-auto-update__frame .c-auto-update__toggle { float: right; }
.c-auto-update__frame .c-auto-update__chara { float: right; height: 26px; line-height: 26px; font-size: 14px; }
.c-auto-update__frame .c-auto-update__time { float: right; width: 100%; font-size: 12px; }

/* ========================================================================== Button Switch Style ========================================================================== */
.btn-switch { transition: all 0.4s ease; position: relative; display: block; width: 52px; height: 26px; cursor: pointer; background-color: #f0f0f0; border-radius: 40px; }
.btn-switch .btn-switch-circle { transition: all 0.2s ease; position: absolute; top: 2px; left: 2px; display: block; height: 22px; width: 22px; background-color: #fff; border-radius: 40px; }

.btn-switch--on { transition: all 0.4s ease; background-color: #9FD6AE; }
.btn-switch--on .btn-switch-circle--on { transition: all 0.2s ease; left: auto; right: 2px; }

/* ========================================================================== Form Set Style ========================================================================== */
.c-login-area__form-set { width: 210px; }
.c-login-area__form-set label, .c-login-area__form-set input { display: block; }

/* ========================================================================== Flash Message Style ========================================================================== */
.c-login-area__flash { height: 44px; }
.c-login-area__flash .alert { width: 90%; }

/* ========================================================================== hタグ Style ========================================================================== */
.c-login-area__h4 { text-align: center; }

/* ========================================================================== Icon Access Style ========================================================================== */
.c-icon-access { cursor: pointer; }
.c-icon-access:hover { color: #5bc0de; }

/* ========================================================================== Image Style ========================================================================== */
.c-img-size--auto { width: 100%; height: auto; }

/* ========================================================================== Sensor Style ========================================================================== */
.sensorOn { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #ea4747; }

.sensorOff { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #47ea72; }

/* project */
/* ========================================================================== Data Table Style ========================================================================== */
@media (min-width: 992px) { .p-data-table__frame { height: 220px; } }

.p-data-table__outer { margin-top: 10px; }
@media (min-width: 992px) { .p-data-table__outer { overflow-y: scroll; height: 100%; margin-top: 38px; padding: 0; } }

@media (max-width: 991px) { .p-data-table__inner { height: 220px; margin-right: 10px; overflow-y: scroll; } }
@media (max-width: 767px) { .p-data-table__inner { margin-right: 0; } }

.p-data-table__td-time { padding: 4px 0 4px 12px; }
@media (max-width: 991px) { .p-data-table__td-time { text-align: center; } }

.p-data-table__td-value { padding: 4px 12px 4px 0; text-align: right; }
@media (max-width: 991px) { .p-data-table__td-value { padding: 4px 24px 4px 0; } }

/* ========================================================================== Display Table Style ========================================================================== */
@media (min-width: 768px) { .p-display-table { width: 660px; } }

@media (min-width: 768px) { .p-display-table__th { width: 226px; } }
@media (max-width: 767px) { .p-display-table__th { display: none; } }

@media (max-width: 767px) { .p-display-table__td { display: block; text-align: right; }
  .p-display-table__td:before { float: left; content: attr(aria-label); } }

/* ========================================================================== Edit and Add Table Style ========================================================================== */
.error-message { color: #c9302c; }
/* 20241007 kawagoe メール送信通知設定対応 Start */
@media (max-width: 767px) {.p-edit-table_notifcate { table-layout: fixed;width: 100%; min-width: 400px;} }
@media (min-width: 767px) {.p-edit-table_notifcate { table-layout: fixed;width: 100%; min-width: 400px} }
/* 20241007 kawagoe メール送信通知設定対応 End */
.p-edit-table ol, .p-edit-table ul { list-style: none; padding: 0; }
@media (max-width: 767px) { .p-edit-table { border: 1px solid transparent; } }
.p-edit-table .p-edit-table__empty-tr td { padding: 8px; border-color: transparent; background-color: #fff; }

@media (max-width: 767px) { .p-edit-table__tr { display: block; border-bottom: 2px solid #ccc; } }

@media (min-width: 768px) { .p-edit-table__th { width: 26%; } }
@media (max-width: 767px) { .p-edit-table__th { display: block; } }

@media (min-width: 768px) { .p-edit-table__td { width: 37%; } }
@media (max-width: 767px) { .p-edit-table__td { display: block; } }

@media (min-width: 768px) { .p-edit-table__th2 { width: auto; } }
@media (max-width: 767px) { .p-edit-table__th2 { display: none; } }

/* 20241007 kawagoe メール送信通知設定対応 Start */
@media (min-width: 768px) { .p-edit-table__th3_time { width: 20%; text-align: center;} }
@media (max-width: 767px) { .p-edit-table__th3_time { width: 20%; text-align: center;} }
@media (min-width: 768px) { .p-edit-table__th3_week { width: 5%; text-align: center;} }
@media (max-width: 767px) { .p-edit-table__th3_week { width: 5%; text-align: center;} }
/* 20241007 kawagoe メール送信通知設定対応 End */

@media (min-width: 768px) { .p-edit-table__td2 { width: auto; } }
@media (max-width: 767px) { .p-edit-table__td2 { display: block; }
  .p-edit-table__td2::before { content: attr(label); float: left; clear: both; font-weight: bold; }
  .p-edit-table__td2 p { padding-left: 6em; } }

/* 20241007 kawagoe メール送信通知設定対応 Start */
@media (min-width: 768px) { .p-edit-table__td3_time { width: 35%; text-align: center;} }
@media (max-width: 767px) { .p-edit-table__td3_time { width: 35%; text-align: center;}
  .p-edit-table__td3_time::before { content: attr(label); float: left; clear: both; font-weight: bold; }
  .p-edit-table__td3_time p { padding-left: 6em; } }
  @media (min-width: 768px) { .p-edit-table__td3_week { width: 6%; text-align: center;} }
  @media (max-width: 767px) { .p-edit-table__td3_week { width: 6%; text-align: center;}
    .p-edit-table__td3_week::before { content: attr(label); float: left; clear: both; font-weight: bold; }
    .p-edit-table__td3_week p { padding-left: 6em; } }
/* 20241007 kawagoe メール送信通知設定対応 End */

@media (max-width: 767px) { .p-empty__td { display: none; } }

.p-error-msg { position: relative; padding-top: 30px; }

.p-presettime { display: inline-table; margin: 0 16px 10px 0; }
.p-presettime .error-message { top: 4px; left: 8px; }

.p-add-btn { text-align: center; }

.p-delete-btn { margin-top: -36px; margin-left: 90px; }
.p-delete-btn-station { margin-top: -49px; margin-left: 90px; }

/* ========================================================================== Gradation Background Style ========================================================================== */
body { position: relative; }
body:after { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; content: ""; background: #e0e0e0; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzllOWU5ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e0e0e0), color-stop(100%, #9e9e9e)); background: -moz-linear-gradient(#e0e0e0, #9e9e9e); background: -webkit-linear-gradient(#e0e0e0, #9e9e9e); background: linear-gradient(#e0e0e0, #9e9e9e); }

/* ========================================================================== Index Table Style ========================================================================== */
@media (max-width: 482px) { .p-index-table { font-size: 12px; } }
@media (max-width: 767px) { .p-index-table thead { display: none; }
  .p-index-table tr { display: block; border-bottom: 2px solid #ccc; }
  .p-index-table td { display: block; overflow: hidden; text-align: right; word-break: break-all; }
  .p-index-table td:before { float: left; content: attr(aria-label); } }
.p-index-table .actions button { margin-right: 4px; margin-bottom: 3px; }

/* ========================================================================== Logout Button Style ========================================================================== */
.p-logout-btn { padding: 4px; font-size: 12px; }

/* ========================================================================== Login Button Style ========================================================================== */
.p-login-btn { display: block; width: 210px; }

/* ========================================================================== Map Style ========================================================================== */
#map { height: 600px; border: 1px solid #ccc; }

/* ========================================================================== modal Style ========================================================================== */
.p-modal-title { float: left; }

.p-modal-time { float: right; }

/* ========================================================================== ng-hide Style ========================================================================== */
.p-ng-hide { -moz-transition: linear 0.5s; -o-transition: linear 0.5s; -webkit-transition: linear 0.5s; transition: linear 0.5s; }
.p-ng-hide.ng-hide-remove { opacity: 0; }
.p-ng-hide.ng-hide-remove-active, .p-ng-hide.ng-hide-add { opacity: 1; }
.p-ng-hide.ng-hide-add-active { opacity: 0; }

/* ========================================================================== Notification Table Style ========================================================================== */
.p-notification-table__th { width: 226px; }

.p-notification-table_alias { white-space: normal; }

/* ========================================================================== Overray Style ========================================================================== */
.overRayHidden { display: none; }

.overRay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100px; margin: auto; color: rgba(254, 254, 254, 0.7); font-size: 1.8vw; line-height: 100px; text-align: center; }
@media (max-width: 767px) { .overRay { font-size: 2.6vw; } }

.overRay__span { padding: 0 3px; background: rgba(248, 229, 66, 0.7); color: #222; white-space: nowrap; }

/* ========================================================================== Spiner Style ========================================================================== */
.p-spiner-body__base { overflow-y: scroll; }

.spinner__backdrop.modal-backdrop { background: transparent; }

.spinner__window .modal-dialog { position: absolute; top: 50%; right: 0; bottom: 50%; left: 0; }
.spinner__window .modal-content { border: none; }

/* ========================================================================== Thumbnail Style ========================================================================== */
.p-thumbnail-header__frame { display: block; color: #222; cursor: pointer; }
.p-thumbnail-header__frame:hover { color: #5bc0de; }
.p-thumbnail-header__frame:hover .p-thumbnail-header__title, .p-thumbnail-header__frame:hover .p-thumbnail-header__img { border-color: #5bc0de; }

.p-thumbnail-header__title { overflow: hidden; height: 22px; border-bottom: 1px solid transparent; }

.p-thumbnail-header__img-frame { position: relative; width: 100%; height: 0; padding-bottom: 80%; }

.p-thumbnail-header__img { border: 1px solid transparent; box-sizing: border-box; }

.p-thumbnail-footer__frame { height: 22px; font-size: 14px; text-align: right; }

.p-archive-thumbnail__frame { position: relative; z-index: 1; overflow-y: scroll; width: 100%; }

/* utility */
/* ========================================================================== Border ========================================================================== */
.u-border--default { border: 1px solid #ccc; }

.u-border--default-l { border-left: 1px solid #ccc; }

.u-border--default-b { border-bottom: 1px solid #ccc; }

.u-border__archive-l { border-left: 1px solid #ccc; }
@media (max-width: 767px) { .u-border__archive-l { border-left: none; } }

/* ========================================================================== Margin ========================================================================== */
.u-margin--no { margin: 0; }

/* auto系 */
.u-margin--auto { margin: auto; }

.u-margin--auto-rl { margin: 0 auto; }

/* 単一系 */
.u-margin--default-right { margin-right: 15px; }

.u-margin--mobile-top { margin-top: 8px; }

.u-margin--mobile-right { margin-right: 8px; }

.u-margin--punctuation { margin-bottom: 10px; }

.u-margin--punction-tb { margin-top: 10px; margin-bottom: 10px; }

.u-margin--punction-t { margin-top: 10px; }

/* 特注 */
.u-margin__login-btn { margin: 24px auto 0; }

.u-margin__logout-btn { margin: 4px 0; }

.u-margin__contents-area { margin: 90px auto 20px; }
@media (max-width: 767px) { .u-margin__contents-area { margin-top: 70px; } }

.u-margin__form-set { margin: 10px auto; }

.u-margin__alert-message { margin-top: 4px; }

.u-margin__thumbnail-header { margin-bottom: 3px; }

.u-margin__sensor { margin-top: 2px; }

/* ========================================================================== Padding ========================================================================== */
.u-padding--no { padding: 0; }

/* auto系 */
/* 単一系 */
.u-padding--default-tb { padding-top: 8px; padding-bottom: 8px; } /* 全体的にpaddingをモバイル設定と同じ8pxにしコンテンツエリアを若干拡張 */

@media (max-width: 767px) { .u-padding--mobile-tb { padding-top: 8px; padding-bottom: 8px; } }

.u-padding--responsive-tb { padding-top: 8px; padding-bottom: 8px; } /* 全体的にpaddingをモバイル設定と同じ8pxにしコンテンツエリアを若干拡張 */
@media (max-width: 767px) { .u-padding--responsive-tb { padding-top: 8px; padding-bottom: 8px; } }

.u-padding--default-rl { padding-right: 8px; padding-left: 8px; } /* 全体的にpaddingをモバイル設定と同じ8pxにしコンテンツエリアを若干拡張 */

@media (max-width: 767px) { .u-padding--mobile-rl { padding-right: 8px; padding-left: 8px; } }

.u-padding--responsive-rl { padding-right: 8px; padding-left: 8px; } /* 全体的にpaddingをモバイル設定と同じ8pxにしコンテンツエリアを若干拡張 */
@media (max-width: 767px) { .u-padding--responsive-rl { padding-right: 8px; padding-left: 8px; } }

@media (min-width: 768px) { .u-padding--responsive-r { padding-right: 8px; } }

@media (min-width: 768px) { .u-padding--responsive-l { padding-left: 8px; } }

/* 特注 */
.u-padding__nav { padding: 8px 15px; }
@media (max-width: 767px) { .u-padding__nav { padding: 8px; } }

@media (max-width: 767px) { .u-padding__nav-title { padding-top: 7px; } }

.u-padding__tumbnail { padding-right: 2px; padding-left: 2px; }

.u-padding__modal--close { padding-top: 6px; padding-right: 6px; }

/* ========================================================================== Flap ========================================================================== */
.u-flap-no { overflow: hidden; white-space: nowrap; }

.u-flap-no--ellipse { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.u-flap-all { overflow: hidden; word-break: break-all; }

/*# sourceMappingURL=import.css.map */

.pad{padding: 2px;}