@charset "UTF-8";
html {
  font-display: swap;
}

.ming {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

select::-ms-expand {
  display: none;
}

select {
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}

address {
  margin-bottom: 0;
}

ol, ul, dl {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

dd {
  margin-bottom: 0;
  margin-left: 0;
}

label {
  margin-bottom: 0;
}

img {
  display: block;
  height: auto;
  margin: auto;
  max-width: 100%;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(51, 51, 51, 0);
  -webkit-font-smoothing: antialiased;
}

@-ms-viewport {
  width: device-width;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, Helvetica Neue, Lucida Grande, Arial, Hiragino Kaku Gothic ProN, \\30E1\30A4\30EA\30AA, Meiryo, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  text-align: left;
  background-color: #ffffff;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 10px;
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 5px;
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 10px;
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color: #1565C0;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #1565C0;
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]) :hover {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 10px;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 10px;
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 7.5px;
  padding-top: 0.75rem;
  padding-bottom: 7.5px;
  padding-bottom: 0.75rem;
  color: #333;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 5px;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 5px;
  margin-bottom: .5rem;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

.bold {
  font-weight: bold;
}

.medium {
  font-weight: 500;
}

.black {
  color: #333;
}

.white {
  color: #fff;
}

.gray {
  color: #999;
}

.whiteBg {
  background: #ffffff;
}

.taL {
  text-align: left !important;
}

.taC {
  text-align: center !important;
}

.taR {
  text-align: right !important;
}

.clearText {
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
}

.autoImg {
  width: 100%;
  height: auto;
}

.autoImg.full {
  width: auto;
  max-width: 100%;
  height: auto;
  display: table;
  margin: 0 auto;
}

.autoImg.lg {
  width: 80%;
  margin: 0 auto;
  display: block;
}

.autoImg.md {
  width: 50%;
  margin: 0 auto;
  display: block;
}

.autoImg.sm {
  width: 30%;
  margin: 0 auto;
  display: block;
}

.hAuto {
  height: auto !important;
}

.icon {
  position: relative;
}

.icon:before, .icon:after {
  background: no-repeat center/contain;
  content: "";
  position: absolute;
}

.logo {
  position: relative;
}

.logo:before, .logo:after {
  background: no-repeat center/contain;
  content: "";
  position: absolute;
}

/*-----▼ 2カラムのときのレスポンシブな背景画像 ▼-----*/
.rwdBgImg {
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  display: block;
  height: 100%;
}

/*-----▲ 2カラムのときのレスポンシブな背景画像 ▲-----*/
/*----------▼▼ base ▼▼----------*/
html {
  font-size: 62.5%;
}

body {
  font-size: 1.6em;
  position: relative;
}

/*----------▲▲ base ▲▲----------*/
/*----------▼▼ clearfix ▼▼----------*/
/*-----▼ class ▼-----*/
.cf:after {
  clear: both;
  content: "";
  display: block;
}

/*-----▲ class ▲-----*/
/*-----▼ @mixin ▼-----*/
/*-----▲ @mixin ▲-----*/
/*----------▲▲ clearfix ▲▲----------*/
.hop-wrapper {
  padding: 16px;
  width: 100%;
}

.hop-wrapper tr, .hop-wrapper th, .hop-wrapper td {
  vertical-align: middle;
}

.hop-mainTab {
  border-bottom: 4px solid #ccc;
}

.hop-mainTab__item {
  float: left;
  margin: 0 8px 0 8px;
  line-height: 1em;
}

.hop-mainTab__item + .--last {
  float: right;
}

.hop-mainTab__link {
  font-size: 15px;
  font-size: 1.5rem;
  color: #1565C0;
  background-color: #F1F1F1;
  border-radius: 4px 4px 0 0;
  font-weight: bold;
  text-decoration: underline;
  display: block;
  padding: 16px 16px;
  position: relative;
}

.hop-mainTab__link:link, .hop-mainTab__link:visited {
  color: #1565C0;
}

.hop-mainTab__link.--active {
  color: #fff;
  background-color: #1565C0;
  text-decoration: none;
  pointer-events: none;
}

.hop-mainTab__link.--active:after {
  content: '';
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: -4px;
  background-color: #1565C0;
}

.hop-mainTab__link.--newMark:before {
  content: '';
  width: 12px;
  height: 12px;
  background-color: #C42632;
  border-radius: 6px;
  position: absolute;
  right: -6px;
  top: -6px;
}

.hop-listInner {
  background-color: #F1F1F1;
  padding: 16px;
}

.hop-periodSwitch {
  float: left;
  border-radius: 100px;
  border: 1px solid #ccc;
  background-color: #dddddd;
  margin-right: 16px;
}

.hop-periodSwitch__item {
  float: left;
}

.hop-periodSwitch__link {
  color: #1565C0;
  font-size: 15px;
  font-size: 1.5rem;
  display: block;
  text-decoration: underline;
  font-weight: bold;
  line-height: 48px;
  padding: 0 24px;
  position: relative;
}

.hop-periodSwitch__link:link, .hop-periodSwitch__link:visited {
  color: #1565C0;
}

.hop-periodSwitch__link.--active {
  border-radius: 100px;
  background-color: #fff;
}

.hop-periodSwitch__link.--cal {
  padding-left: 48px;
}

.hop-periodSwitch__link.--cal:before {
  content: '';
  width: 24px;
  height: 24px;
  background-image: url(../image/icon_cal.png);
  background-size: contain;
  position: absolute;
  left: 16px;
  top: calc(50% - 12px);
}

.hop-periodSwitch__link.--new:before {
  content: '';
  width: 12px;
  height: 12px;
  background-color: #C42632;
  border-radius: 6px;
  position: absolute;
  right: 9px;
  top: 8px;
}

.hop-listSearch {
  float: left;
  background-color: #fff;
  border-radius: 4px;
  height: 48px;
  border: 1px solid #ccc;
  padding: 4px 8px;
}

.hop-listSearch__form {
  float: left;
}

.hop-listSearch__item {
  float: left;
  margin-right: 8px;
}

.hop-listSearch__item:last-child {
  margin-right: 0;
}

.hop-listSearch__label {
  display: block;
  font-size: 10px;
  font-size: 1rem;
  line-height: 1em;
  font-weight: bold;
  color: #999;
}

.hop-listSearch__input {
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  border: none;
  line-height: 18px;
  background-color: #F1F1F1;
}

.hop-listSearch__input.--kana {
  width: 90px;
  height: 20px;
  line-height: 16px;
  line-height: 1.6rem;
}

.hop-listSearch__input.--no {
  width: 40px;
  height: 20px;
  line-height: 16px;
  line-height: 1.6rem;
}

.hop-listSearch__input.--phone {
  width: 90px;
  height: 20px;
  line-height: 16px;
  line-height: 1.6rem;
}

.hop-listSearch__btnList {
  float: left;
}

.hop-listSearch__btnItem {
  float: left;
}

.hop-listSearch__submit {
  font-size: 15px;
  font-size: 1.5rem;
  border: 0;
  background-color: transparent;
  text-decoration: underline;
  font-weight: bold;
  line-height: 40px;
  margin: 0 8px;
}

.hop-listSearch__submit.--submit {
  color: #1565C0;
}

.hop-listSearch__submit.--clear {
  color: #999;
}

.hop-listSubMenu {
  float: right;
}

.hop-listSubMenu__item {
  float: left;
  margin-right: 12px;
}

.hop-listSubMenu__item:last-child {
  margin-right: 0;
}

.hop-listSubMenu__link {
  color: #1565C0;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  display: block;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
  line-height: 48px;
  text-decoration: underline;
  padding: 0 12px;
}

.hop-listSubMenu__link:link, .hop-listSubMenu__link:visited {
  color: #1565C0;
}

.hop-listSubMenu__link.--blue {
  color: #fff;
  background-color: #1565C0;
  border: none;
}

.hop-listSubMenu__link.--new {
  position: relative;
}

.hop-listSubMenu__link.--new:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #C42632;
  right: -6px;
  top: -6px;
}

.hop-listTableOuter {
  margin-top: 16px;
  height: calc(100vh - 250px);
  overflow-y: scroll;
}

.hop-listTable {
  width: 100%;
}

.hop-listTable__thead {
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  background-color: #333;
  z-index: 1;
}

.hop-listTable__theadTh {
  color: #fff;
  font-size: 13px;
  font-size: 1.3rem;
  padding: 8px 8px;
  position: relative;
}

.hop-listTable__theadTh.--thBtn {
  width: 96px;
}

.hop-listTable__theadTh.--new:after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #C42632;
  left: -8px;
  top: calc(50% - 6px);
}

.hop-listTable__theadSelect {
  font-size: 11px;
  font-size: 1.1rem;
  width: 80px;
  background-color: #fff;
  border: 1px solid #999;
}

.hop-listTable__tbodyTr {
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}

.hop-listTable__tbodyTr.--done {
  background-color: #DDDDDD;
}

.hop-listTable__tbodyTd {
  padding: 8px 8px;
  font-size: 13px;
  font-size: 1.3rem;
  position: relative;
}

.hop-listTable__tbodyTdIcon {
  width: 24px;
  height: auto;
}

.hop-listTable__tbodyTdLink {
  color: #1565C0;
  position: relative;
  text-decoration: underline;
}

.hop-listTable__tbodyTdLink:link, .hop-listTable__tbodyTdLink:visited {
  color: #1565C0;
}

.hop-listTable__tbodyTdLink.--new:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #C42632;
  left: -16px;
  top: calc(50% - 6px);
}

.hop-listTable__tbodyTdBtn {
  font-size: 13px;
  font-size: 1.3rem;
  display: block;
  padding: 12px 0;
  width: 96px;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  text-decoration: underline;
  line-height: 1em;
}

.hop-listTable__tbodyTdBtn.--red {
  color: #fff;
  background-color: #C42632;
}

.hop-listTable__tbodyTdBtn.--red:link, .hop-listTable__tbodyTdBtn.--red:visited {
  color: #fff;
}

.hop-listTable__tbodyTdBtn.--blue {
  color: #fff;
  background-color: #1565C0;
}

.hop-listTable__tbodyTdBtn.--blue:link, .hop-listTable__tbodyTdBtn.--blue:visited {
  color: #fff;
}

.hop-listTable__tbodyTdBtn.--redLine {
  color: #C42632;
  border: 1px solid #C42632;
}

.hop-listTable__tbodyTdBtn.--redLine:link, .hop-listTable__tbodyTdBtn.--redLine:visited {
  color: #C42632;
}

.hop-listTable__tbodyTdBtn.--gray {
  color: #333;
  background-color: #ccc;
}

.hop-listTable__tbodyTdBtn.--gray:link, .hop-listTable__tbodyTdBtn.--gray:visited {
  color: #333;
}

.hop-listTable__tbodyTdBtn.--normal:link, .hop-listTable__tbodyTdBtn.--normal:visited {
  color: #1565C0;
}

.hop-listTable__type {
  display: block;
  font-size: 10px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
  padding: 4px 0;
  line-height: 1em;
}

.hop-listTable__type.--local {
  width: 32px;
  background-color: #1565C0;
}

.hop-listTable__type.--app {
  width: 32px;
  background-color: #333;
}

.hop-listTable__type.--takeout {
  width: 72px;
  background-color: #333;
}

.hop-listTable__type.--oseti {
  width: 72px;
  background-color: #333;
}

.hop-listTable__type.--yoyaku {
  width: 72px;
  background-color: #333;
}

.hop-listTable__tbodyTdIconImage {
  position: relative;
  display: table;
}

.hop-listTable__tbodyTdIconImage.--wait:after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background-image: url(../image/icon_late_contact.png);
  background-size: contain;
  top: -12px;
  right: -12px;
}

.hop-listTable__tbodyText.--gray {
  font-weight: bold;
  color: #999;
}

.hop-listTable__tbodyText.--red {
  font-weight: bold;
  color: #C42632;
}

.hop-listTable__tbodyText.--big {
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
}

.hop-listTable__itemList {
  min-width: 300px;
  max-width: 400px;
}

.hop-listTable__itemName {
  float: left;
  clear: both;
  width: calc( 100% - 50px);
  padding: 8px 0;
  border-top: 1px solid #ccc;
  font-weight: normal;
}

.hop-listTable__itemName:nth-child(1) {
  border-top: none;
}

.hop-listTable__itemNum {
  float: right;
  width: 50px;
  padding: 8px 0;
  text-align: right;
  position: relative;
  border-top: 1px solid #ccc;
}

.hop-listTable__itemNum:before {
  content: '✕';
  font-weight: bold;
  color: #999;
  position: absolute;
  left: 0;
  top: 8px;
}

.hop-listTable__itemNum:nth-child(2) {
  border-top: none;
}

.hop-listTable__fukidashiArea {
  position: absolute;
  top: calc(50% - 37px);
  right: 112px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: -ms-flexbox;
  display: flex;
  height: 74px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  padding: 13px 8px;
}

.hop-listTable__fukidashiArea:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 12px;
  border-color: transparent transparent transparent #ffffff;
  position: absolute;
  top: calc(50% - 12px);
  right: -12px;
}

.hop-listTable__fukidashiArea:after {
  content: '';
  width: 18px;
  height: 18px;
  border-style: solid;
  border-width: 1px 1px 0 0;
  border-color: #ccc;
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 9px);
  right: -9px;
}

.hop-listTable__fukidashiTitle {
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  white-space: nowrap;
  line-height: 38px;
  margin-right: 16px;
}

.hop-listTable__fukidashiNo {
  white-space: nowrap;
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 38px;
  margin-right: 16px;
  display: block;
}

.hop-listTable__fukidashiNo:link, .hop-listTable__fukidashiNo:visited {
  color: #999;
}

.hop-listTable__fukidashiYes {
  white-space: nowrap;
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 38px;
  display: block;
  border: 1px solid #1565C0;
  border-radius: 4px;
  padding: 0 32px;
}

.hop-listTable__fukidashiYes:link, .hop-listTable__fukidashiYes:visited {
  color: #1565C0;
}

.hop-subHeader {
  position: fixed;
  height: 64px;
  padding-top: 24px;
  top: 50px;
  left: 16px;
  width: calc(100% - 32px);
  background-color: #fff;
  z-index: 2;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
  justify-content: start;
}

.hop-subHeader__title {
  color: #333;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
}

.hop-subHeader__sort {
  margin-left: 40px;
  display: -ms-flexbox;
  display: flex;
}

.hop-subHeader__sortTitle {
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 24px;
  margin-right: 8px;
  color: #999;
  font-weight: bold;
}

.hop-subHeader__sortSelect {
  height: 24px;
  line-height: 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.hop-subHeader__changeBefore {
  display: -ms-flexbox;
  display: flex;
  margin-left: 40px;
}

.hop-subHeader__changeBeforeTitle {
  color: #1565C0;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
}

.hop-subHeader__changeBeforeInfo {
  display: -ms-flexbox;
  display: flex;
}

.hop-subHeader__changeBeforeInfoTitle {
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  color: #999;
  margin-left: 16px;
}

.hop-subHeader__changeBeforeInfoText {
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  color: #333;
  margin-left: 8px;
}

.hop-subHeader__memberid {
  display: -ms-flexbox;
  display: flex;
  margin-left: 24px;
  margin-top: 2px;
}

.hop-subHeader__memberid dt {
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-subHeader__memberid dd {
  margin-left: 8px;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-subContent {
  padding: 48px 0 80px 0;
}

.hop-subContent.--sekiwariFull {
  padding-top: calc(48px + 40px);
}

.hop-subContent.--sekiwariSelect {
  padding-top: calc(48px + 40px + 64px);
}

.hop-subContent__clmArea {
  display: -ms-flexbox;
  display: flex;
}

.hop-subContent__clmArea.--mt {
  margin-top: 16px;
}

.hop-subContent__clmItem {
  border-left: 1px solid #ccc;
  padding: 0 24px;
}

.hop-subContent__clmItem:last-child {
  border-right: 1px solid #ccc;
}

.hop-subContent__clmItem.--three {
  width: 33.3333%;
}

.hop-subContent__clmItem.--six {
  width: 66.6666%;
}

.hop-subContent__clmItem.--two {
  width: 50%;
}

.hop-subContent__clmItem.--one {
  width: 100%;
}

.hop-sekiwari__header {
  display: -ms-flexbox;
  display: flex;
  background-color: #333;
  position: fixed;
  top: 114px;
  left: 16px;
  width: calc(100% - 32px);
  z-index: 2;
}

.hop-sekiwari__headerType, .hop-sekiwari__headerNumber, .hop-sekiwari__headerMember, .hop-sekiwari__headerIcon, .hop-sekiwari__time {
  height: 40px;
  line-height: 40px;
}

.hop-sekiwari__headerType {
  width: 50px;
}

.hop-sekiwari__headerNumber {
  width: 50px;
  color: #fff;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
}

.hop-sekiwari__headerMember {
  width: 30px;
}

.hop-sekiwari__headerIcon {
  height: auto;
  position: relative;
}

.hop-sekiwari__headerIcon.--member {
  width: 20px;
  top: 12px;
  margin: 0 auto 0 0;
}

.hop-sekiwari__time {
  border-left: 1px solid #ccc;
  width: calc((100% - 130px) / 13);
  color: #fff;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
}

.hop-sekiwari__line {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #ccc;
}

.hop-sekiwari__line.--base {
  position: fixed;
  width: calc(100% - 32px);
  left: 16px;
  top: 153px;
  background-color: #fff;
  border-bottom: 4px solid #ccc;
  z-index: 2;
}

.hop-sekiwari__type, .hop-sekiwari__number, .hop-sekiwari__member, .hop-sekiwari__yoyakuTime {
  height: 64px;
  padding-top: 20px;
}

.hop-sekiwari__type {
  width: 50px;
  padding-left: 8px;
}

.hop-sekiwari__typeImage {
  width: 24px;
  height: auto;
  margin: 0 auto 0 0;
}

.hop-sekiwari__number {
  width: 50px;
}

.hop-sekiwari__member {
  width: 30px;
}

.hop-sekiwari__date {
  width: 130px;
  font-size: 13px;
  font-size: 1.3rem;
  text-align: center;
  line-height: 64px;
}

.hop-sekiwari__yoyakuTime {
  border-left: 1px solid #ccc;
  width: calc((100% - 130px) / 13);
}

.hop-sekiwari__yoyakuTime.--none.--full {
  background-color: #dddddd;
}

.hop-sekiwari__yoyakuTime.--none.--before15 {
  background: linear-gradient(90deg, rgba(221, 221, 221, 0) 25%, #dddddd 26%, #dddddd 100%);
}

.hop-sekiwari__yoyakuTime.--none.--before30 {
  background: linear-gradient(90deg, rgba(221, 221, 221, 0) 50%, #dddddd 51%, #dddddd 100%);
}

.hop-sekiwari__yoyakuTime.--none.--before45 {
  background: linear-gradient(90deg, rgba(221, 221, 221, 0) 75%, #dddddd 76%, #dddddd 100%);
}

.hop-sekiwari__yoyakuTime.--none.--after15 {
  background: linear-gradient(90deg, #dddddd 25%, rgba(221, 221, 221, 0) 26%, rgba(221, 221, 221, 0) 100%);
}

.hop-sekiwari__yoyakuTime.--none.--after30 {
  background: linear-gradient(90deg, #dddddd 50%, rgba(221, 221, 221, 0) 51%, rgba(221, 221, 221, 0) 100%);
}

.hop-sekiwari__yoyakuTime.--none.--after45 {
  background: linear-gradient(90deg, #dddddd 75%, rgba(221, 221, 221, 0) 76%, rgba(221, 221, 221, 0) 100%);
}

.hop-sekiwari__yoyakuList {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.hop-sekiwari__yoyakuItem {
  position: absolute;
  width: calc((((100% - 130px) / 13) / 4) * 8);
  height: 48px;
  top: 8px;
  background-color: #fff;
}

.hop-sekiwari__yoyakuItem.--t1100 {
  left: 130px;
}

.hop-sekiwari__yoyakuItem.--t1115 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 1);
}

.hop-sekiwari__yoyakuItem.--t1130 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 2);
}

.hop-sekiwari__yoyakuItem.--t1145 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 3);
}

.hop-sekiwari__yoyakuItem.--t1200 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 4);
}

.hop-sekiwari__yoyakuItem.--t1215 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 5);
}

.hop-sekiwari__yoyakuItem.--t1230 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 6);
}

.hop-sekiwari__yoyakuItem.--t1245 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 7);
}

.hop-sekiwari__yoyakuItem.--t1300 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 8);
}

.hop-sekiwari__yoyakuItem.--t1315 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 9);
}

.hop-sekiwari__yoyakuItem.--t1330 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 10);
}

.hop-sekiwari__yoyakuItem.--t1345 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 11);
}

.hop-sekiwari__yoyakuItem.--t1400 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 12);
}

.hop-sekiwari__yoyakuItem.--t1415 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 13);
}

.hop-sekiwari__yoyakuItem.--t1430 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 14);
}

.hop-sekiwari__yoyakuItem.--t1445 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 15);
}

.hop-sekiwari__yoyakuItem.--t1500 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 16);
}

.hop-sekiwari__yoyakuItem.--t1515 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 17);
}

.hop-sekiwari__yoyakuItem.--t1530 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 18);
}

.hop-sekiwari__yoyakuItem.--t1545 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 19);
}

.hop-sekiwari__yoyakuItem.--t1600 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 20);
}

.hop-sekiwari__yoyakuItem.--t1615 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 21);
}

.hop-sekiwari__yoyakuItem.--t1630 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 22);
}

.hop-sekiwari__yoyakuItem.--t1645 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 23);
}

.hop-sekiwari__yoyakuItem.--t1700 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 24);
}

.hop-sekiwari__yoyakuItem.--t1715 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 25);
}

.hop-sekiwari__yoyakuItem.--t1730 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 26);
}

.hop-sekiwari__yoyakuItem.--t1745 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 27);
}

.hop-sekiwari__yoyakuItem.--t1800 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 28);
}

.hop-sekiwari__yoyakuItem.--t1815 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 29);
}

.hop-sekiwari__yoyakuItem.--t1830 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 30);
}

.hop-sekiwari__yoyakuItem.--t1845 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 31);
}

.hop-sekiwari__yoyakuItem.--t1900 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 32);
}

.hop-sekiwari__yoyakuItem.--t1915 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 33);
}

.hop-sekiwari__yoyakuItem.--t1930 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 34);
}

.hop-sekiwari__yoyakuItem.--t1945 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 35);
}

.hop-sekiwari__yoyakuItem.--t2000 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 36);
}

.hop-sekiwari__yoyakuItem.--t2015 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 37);
}

.hop-sekiwari__yoyakuItem.--t2030 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 38);
}

.hop-sekiwari__yoyakuItem.--t2045 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 39);
}

.hop-sekiwari__yoyakuItem.--t2100 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 40);
}

.hop-sekiwari__yoyakuItem.--t2115 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 41);
}

.hop-sekiwari__yoyakuItem.--t2130 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 42);
}

.hop-sekiwari__yoyakuItem.--t2145 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 43);
}

.hop-sekiwari__yoyakuItem.--t2200 {
  left: calc(130px + (((100% - 130px) / 13) / 4) * 44);
}

.hop-sekiwari__yoyakuItem:after {
  content: '';
  position: absolute;
  width: calc(100% / 8);
  right: calc(-100% / 8);
  top: 4px;
  height: 40px;
  background-color: #ccc;
  border-radius: 0 4px 4px 0;
}

.hop-sekiwari__yoyakuLink {
  display: block;
  width: 100%;
  border: 1px solid #1565C0;
  border-radius: 4px;
  height: 48px;
}

.hop-sekiwari__yoyakuLink:link, .hop-sekiwari__yoyakuLink:visited {
  color: #1565C0;
}

.hop-sekiwari__yoyakuLink.--fukusu {
  border-right: 4px solid #1565C0;
}

.hop-sekiwari__yoyakuLink.--base {
  border-color: #C42632;
}

.hop-sekiwari__yoyakuLink.--done {
  background-color: #ddd;
}

.hop-sekiwari__yoyakuLink.--select input {
  display: none;
}

.hop-sekiwari__yoyakuLink.--select input + label {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #DEE8F4;
}

.hop-sekiwari__yoyakuLink.--select input + label:before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: #fff;
  left: 16px;
  top: calc(50% - 12px);
}

.hop-sekiwari__yoyakuLink.--select input:checked + label {
  background-color: #1565C0;
}

.hop-sekiwari__yoyakuLink.--select input:checked + label:after {
  content: '✔';
  position: absolute;
  width: 24px;
  height: 24px;
  color: #1565C0;
  text-align: center;
  line-height: 24px;
  left: 16px;
  top: calc(50% - 12px);
}

.hop-sekiwari__yoyakuStatus {
  position: absolute;
  width: 16px;
  height: auto;
  top: 8px;
  left: 8px;
}

.hop-sekiwari__yoyakuStatusText {
  position: absolute;
  height: auto;
  top: 8px;
  left: 8px;
  font-size: 10px;
}

.hop-sekiwari__yoyakuStatusContact {
  position: absolute;
  width: 16px;
  height: auto;
  top: 8px;
  left: 32px;
}

.hop-sekiwari__yoyakuDish {
  position: absolute;
  width: 16px;
  height: auto;
  top: 8px;
  right: 32px;
}

.hop-sekiwari__yoyakuMemo {
  position: absolute;
  width: 16px;
  height: auto;
  top: 8px;
  right: 8px;
}

.hop-sekiwari__name {
  position: absolute;
  font-size: 10px;
  bottom: 8px;
  left: 8px;
  line-height: 1em;
  font-weight: bold;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70%;
}

.hop-sekiwari__name.--base {
  top: 8px;
  bottom: auto;
  text-decoration: none;
  color: #C42632;
}

.hop-sekiwari__yoyakuNumber {
  position: absolute;
  font-size: 10px;
  bottom: 8px;
  right: 8px;
  color: #333;
  line-height: 1em;
  font-weight: bold;
}

.hop-sekiwari__yoyakuNumber.--base {
  top: 8px;
  bottom: auto;
}

.hop-sekiwari__yoyakuNumberSub {
  color: #999;
  margin-left: 4px;
}

.hop-sekiwari__zaseki {
  position: absolute;
  font-size: 10px;
  bottom: 8px;
  left: 8px;
  color: #999;
  line-height: 1em;
  font-weight: bold;
}

.hop-sekiwari__zaseki span {
  color: #333;
}

.hop-subNav {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: 2;
  width: 100%;
  height: 80px;
  padding: 16px 16px;
  overflow: hidden;
}

.hop-subNav__leftBtns {
  float: left;
  display: -ms-flexbox;
  display: flex;
}

.hop-subNav__rightBtns {
  float: right;
  display: -ms-flexbox;
  display: flex;
}

.hop-subNav__btnItem {
  margin: 0 8px;
}

.hop-subNav__btnItem:first-child {
  margin-left: 0;
}

.hop-subNav__btnItem:last-child {
  margin-right: 0;
}

.hop-subNav__btnLink {
  display: block;
  height: 48px;
  line-height: 48px;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: underline;
  border-radius: 4px;
}

.hop-subNav__btnLink.--blueBack {
  padding: 0 24px;
  color: #fff;
  background-color: #1565C0;
  border: 1px solid #1565C0;
}

.hop-subNav__btnLink.--disabled {
  padding: 0 24px;
  color: #999;
  background-color: #ccc;
  border: 1px solid #999;
  pointer-events: none;
}

.hop-subNav__btnLink.--redBack {
  padding: 0 24px;
  color: #fff;
  background-color: #C42632;
  border: 1px solid #C42632;
}

.hop-subNav__btnLink.--grayLine {
  padding: 0 24px;
  color: #1565C0;
  border: 1px solid #ccc;
  background-color: #fff;
}

.hop-subNav__btnLink.--textOnly {
  color: #1565C0;
  border: none;
  padding: 0;
}

.hop-subNav__btnLink.--icon {
  position: relative;
  color: #1565C0;
  border: none;
  padding: 0;
  padding-left: 32px;
}

.hop-subNav__btnLink.--icon.--late:after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background-image: url(../image/icon_late_contact.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  left: 0;
  top: calc(50% - 12px);
}

.hop-subNav__btnLink.--iconLate:after {
  background-image: url();
}

.hop-c-title__black {
  font-weight: bold;
  color: #fff;
  background-color: #333;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 1em;
  padding: 8px;
  margin-top: 24px;
}

.hop-c-title__black:first-child {
  margin-top: 0;
}

.hop-c-title__bold {
  font-weight: bold;
  color: #333;
  font-size: 13px;
  font-size: 1.3rem;
  margin-top: 24px;
}

.hop-c-title__bold:first-child {
  margin-top: 0;
}

.hop-c-text {
  margin-top: 24px;
}

.hop-c-text.--small {
  font-size: 11px;
  font-size: 1.1rem;
}

.hop-c-formItem {
  margin-top: 16px;
}

.hop-c-formItem__calLink {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  color: #1565C0;
  font-weight: bold;
  text-decoration: underline;
  font-size: 13px;
  font-size: 1.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-left: 40px;
  position: relative;
}

.hop-c-formItem__calLink:link, .hop-c-formItem__calLink:visited {
  color: #1565C0;
}

.hop-c-formItem__calLink:before {
  content: '';
  background-image: url(../image/icon_cal.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 8px;
  top: 8px;
}

.hop-c-formItem__inputItem {
  margin-top: 8px;
}

.hop-c-formItem__inputItem:first-child {
  margin-top: 0;
}

.hop-c-formItem__inputItem input[type="radio"] {
  display: none;
}

.hop-c-formItem__inputItem input[type="radio"] + label {
  position: relative;
  padding-left: 28px;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-c-formItem__inputItem input[type="radio"] + label:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid #ccc;
  position: absolute;
  left: 0;
  top: 2px;
}

.hop-c-formItem__inputItem input[type="radio"]:checked + label {
  font-weight: bold;
  color: #1565C0;
}

.hop-c-formItem__inputItem input[type="radio"]:checked + label:before {
  border: 2px solid #1565C0;
}

.hop-c-formItem__inputItem input[type="radio"]:checked + label:after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #1565C0;
  position: absolute;
  left: 4px;
  top: 6px;
}

.hop-c-formItem__inputItem input[type="checkbox"] {
  display: none;
}

.hop-c-formItem__inputItem input[type="checkbox"] + label {
  position: relative;
  padding-left: 28px;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-c-formItem__inputItem input[type="checkbox"] + label:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #ccc;
  position: absolute;
  left: 0;
  top: 2px;
}

.hop-c-formItem__inputItem input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: #1565C0;
}

.hop-c-formItem__inputItem input[type="checkbox"]:checked + label:before {
  border: 2px solid #1565C0;
  background-color: #1565C0;
}

.hop-c-formItem__inputItem input[type="checkbox"]:checked + label:after {
  content: '✔';
  width: 20px;
  height: 20px;
  position: absolute;
  font-size: 11px;
  font-size: 1.1rem;
  left: 0;
  top: 0;
  text-align: center;
  line-height: 20px;
  color: #fff;
}

.hop-c-formItem__inner.--h400 {
  height: 400px;
}

.hop-c-formItem__inner.--flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hop-c-formItem__multiple {
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  overflow-y: scroll;
  height: 100%;
}

.hop-c-formItem__multipleItem input[type="radio"] {
  display: none;
}

.hop-c-formItem__multipleItem input[type="radio"] + label {
  display: block;
  width: 100%;
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1em;
  padding: 16px;
  border-radius: 4px;
}

.hop-c-formItem__multipleItem input[type="radio"]:checked + label {
  background-color: #1565C0;
  color: #fff;
}

.hop-c-formItem__memberLabel {
  width: 50px;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 48px;
}

.hop-c-formItem__memberInput {
  width: calc(100% - 50px);
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 48px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.hop-c-formItem__numberLabel {
  width: 80px;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 48px;
}

.hop-c-formItem__numberSet {
  display: -ms-flexbox;
  display: flex;
}

.hop-c-formItem__numberSet input[type="text"] {
  width: 40px;
  height: 48px;
  line-height: 48px;
  font-size: 13px;
  font-size: 1.3rem;
  text-align: center;
  font-weight: bold;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.hop-c-formItem__numberSet button {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid #1565C0;
  margin-top: 6px;
  background-color: #fff;
}

.hop-c-formItem__numberSet button.--plus {
  margin-right: 8px;
  background-image: url(../image/icon_plus.png);
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: center;
}

.hop-c-formItem__numberSet button.--minus {
  margin-left: 8px;
  background-image: url(../image/icon_minus.png);
  background-size: 15px 2px;
  background-repeat: no-repeat;
  background-position: center;
}

.hop-c-formItem__title {
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  margin-bottom: 8px;
}

.hop-c-formItem__textForm {
  width: 100%;
  height: 48px;
  line-height: 48px;
  font-size: 13px;
  font-size: 1.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 8px;
}

.hop-c-formItem__btmBtn {
  display: block;
  text-decoration: underline;
  border: none;
  padding: 0;
  margin: 8px 0 0 auto;
  font-size: 11px;
  font-size: 1.1rem;
  color: #1565C0;
  font-weight: bold;
}

.hop-c-formItem__name {
  display: -ms-flexbox;
  display: flex;
}

.hop-c-formItem__nameInput {
  width: 90%;
}

.hop-c-formItem__nameLabel {
  width: calc(10% - 8px);
  margin-left: 8px;
  line-height: 48px;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-c-formItem__textFormarea {
  width: 100%;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.6em;
  padding: 8px 8px;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.hop-c-formItem__textFormarea.--courseMemo {
  height: 140px;
}

.hop-c-formItem__textFormarea.--comment {
  height: 120px;
}

.hop-c-formItem__textFormarea.--commentMemo {
  height: 120px;
}

.hop-c-formItem__textFormarea:disabled {
  background-color: #F1F1F1;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  -webkit-text-fill-color: black;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.hop-c-formItem__checkResult {
  margin-bottom: 8px;
}

.hop-c-formItem__checkResultItem {
  font-size: 13px;
  font-size: 1.3rem;
  display: inline;
}

.hop-c-formItem__checkResultItem:after {
  content: '、';
}

.hop-c-formItem__checkResultItem:last-child:after {
  content: '';
}

.hop-c-formItem__clmBox {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hop-c-formItem__clm.--two {
  width: calc(50% - 4px);
}

.hop-c-formItem__clm.--three {
  width: calc(33.3333% - 4px);
}

.hop-c-formItem__clm.--six {
  width: calc(66.6666% - 4px);
}

.hop-c-formItem__select {
  width: 100%;
  height: 48px;
  line-height: 48px;
  font-size: 13px;
  font-size: 1.3rem;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.hop-c-formItem__point {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hop-c-formItem__pointInput {
  width: calc(100% - 136px);
}

.hop-c-formItem__pointBtn {
  width: 120px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: #1565C0;
  border: none;
  border-radius: 4px;
}

.hop-c-formItem__btmText {
  font-size: 13px;
  font-size: 1.3rem;
  margin: 8px 0;
}

.hop-c-courseSelect {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-flex-pack: justify;
  justify-content: space-between;
  overflow-y: scroll;
  height: 300px;
  padding-right: 16px;
  margin-top: 16px;
}

.hop-c-courseSelect__plus {
  width: calc(48px);
  height: 48px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-image: url(../image/icon_plus.png);
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
}

.hop-c-courseSelect__list {
  width: calc(100% - 56px);
}

.hop-c-courseSelect__itemSelect {
  width: 100%;
  height: 48px;
  line-height: 48px;
  font-size: 13px;
  font-size: 1.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 0 8px;
}

.hop-c-courseSelect__item {
  margin-top: 12px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 12px;
}

.hop-c-courseSelect__item:first-child {
  margin-top: 0;
}

.hop-c-courseSelect__delete {
  padding: 0;
  font-size: 11px;
  font-size: 1.1rem;
  color: #1565C0;
  text-decoration: underline;
  line-height: 48px;
  border: none;
  font-weight: bold;
}

.hop-c-timeSelect {
  display: -ms-flexbox;
  display: flex;
  width: calc(100%);
}

.hop-c-timeSelect__left {
  width: calc(50% - 12px);
  margin-right: 24px;
  position: relative;
}

.hop-c-timeSelect__left:after {
  content: '：';
  position: absolute;
  right: -24px;
  width: 24px;
  line-height: 48px;
  text-align: center;
  top: 16px;
}

.hop-c-timeSelect__right {
  width: calc(50% - 12px);
}

.hop-c-timeSelect input[type="text"] {
  width: 100%;
  height: 48px;
  line-height: 48px;
  font-size: 13px;
  font-size: 1.3rem;
  text-align: center;
  font-weight: bold;
}

.hop-c-memberSelect {
  display: -ms-flexbox;
  display: flex;
}

.hop-c-memberSelect__left {
  width: calc(50% - 12px);
  margin-right: 24px;
}

.hop-c-memberSelect__right {
  width: calc(50% - 12px);
}

.hop-c-tab {
  margin-top: 16px;
  border-bottom: 4px solid #ccc;
}

.hop-c-tab__item {
  float: left;
  margin: 0 8px 0 8px;
  line-height: 1em;
}

.hop-c-tab__item + .--last {
  float: right;
}

.hop-c-tab__link {
  font-size: 13px;
  font-size: 1.3rem;
  color: #1565C0;
  background-color: #F1F1F1;
  border-radius: 4px 4px 0 0;
  font-weight: bold;
  text-decoration: underline;
  display: block;
  padding: 16px 24px;
  position: relative;
}

.hop-c-tab__link:link, .hop-c-tab__link:visited {
  color: #1565C0;
}

.hop-c-tab__link.--active {
  color: #fff;
  background-color: #1565C0;
  text-decoration: none;
  pointer-events: none;
}

.hop-c-tab__link.--active:after {
  content: '';
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: -4px;
  background-color: #1565C0;
}

.hop-c-tab__content {
  display: none;
  padding-bottom: 16px;
  border-bottom: 1px solid #ccc;
}

.hop-c-tab__content.--active {
  display: block;
}

.hop-c-tenkey {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: calc(100% + 16px);
}

.hop-c-tenkey__item {
  margin-top: 16px;
  width: calc(33.3333% - 16px);
  margin-right: 16px;
}

.hop-c-tenkey__btn {
  font-size: 13px;
  font-size: 1.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 48px;
  line-height: 48px;
  width: 100%;
  text-align: center;
  color: #1565C0;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.hop-c-comfirm {
  margin-top: 16px;
}

.hop-c-comfirm.--course {
  height: 300px;
  overflow-y: scroll;
}

.hop-c-comfirm.--course.--change {
  height: 200px;
}

.hop-c-comfirm__text {
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-c-comfirm__table {
  width: 100%;
}

.hop-c-comfirm__table th {
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  padding-bottom: 16px;
}

.hop-c-comfirm__table td {
  font-size: 13px;
  font-size: 1.3rem;
  text-align: right;
  padding-bottom: 16px;
}

.hop-c-comfirm__table td li {
  display: inline-block;
}

.hop-c-comfirm__table td li:after {
  content: '、';
}

.hop-c-comfirm__table td li:last-child:after {
  content: '';
}

.hop-c-comfirm__table td.--red {
  color: #C42632;
  font-weight: bold;
}

.hop-c-comfirm__table.--course {
  width: calc(100% - 16px);
}

.hop-modal {
  width: 100%;
  height: 100%;
  z-index: 1001;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}

.hop-modal__msgBox {
  width: 640px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  padding: 40px;
}

.hop-modal__message {
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-modal__list {
  margin-top: 24px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.hop-modal__link {
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 48px;
  border-radius: 4px;
  padding: 0 24px;
  margin-left: 16px;
  border: none;
}

.hop-modal__link.--gray {
  color: #999;
  text-decoration: none;
}

.hop-modal__link.--blue {
  color: #fff;
  background-color: #1565C0;
}

.hop-owatashi__top {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hop-owatashi__input {
  font-size: 13px;
  font-size: 1.3rem;
  width: calc(100% - 136px);
  line-height: 48px;
  height: 48px;
  font-size: 13px;
  font-size: 1.3rem;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.hop-owatashi__nextBtn {
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  background-color: #1565C0;
  line-height: 48px;
  border: none;
  border-radius: 4px;
  padding: 0 24px;
  text-align: center;
  width: 120px;
}

.hop-owatashi__bottom {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 56px;
  position: relative;
}

.hop-owatashi__bottom:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 32px 40px;
  border-color: transparent transparent #ccc transparent;
  position: absolute;
  top: -40px;
  left: calc(50% - 40px);
}

.hop-owatashi__type {
  width: calc(100% - 432px);
}

.hop-owatashi__number {
  width: 400px;
}

.hop-owatashi__typeList {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.hop-owatashi__typeItem {
  width: calc(50% - 8px);
  margin-top: 16px;
}

.hop-owatashi__typeItem input[type="radio"] {
  display: none;
}

.hop-owatashi__typeItem input[type="radio"] + label {
  position: relative;
  padding: 24px 16px 24px 48px;
  font-size: 13px;
  font-size: 1.3rem;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.hop-owatashi__typeItem input[type="radio"] + label:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 2px solid #ccc;
  position: absolute;
  left: 16px;
  top: calc(50% - 10px);
}

.hop-owatashi__typeItem input[type="radio"] + label span {
  font-weight: normal;
  position: absolute;
  right: 16px;
  top: calc(50% - 12px);
  color: #333;
}

.hop-owatashi__typeItem input[type="radio"]:checked + label {
  font-weight: bold;
  color: #1565C0;
  border: 1px solid #1565C0;
}

.hop-owatashi__typeItem input[type="radio"]:checked + label:before {
  border: 2px solid #1565C0;
}

.hop-owatashi__typeItem input[type="radio"]:checked + label:after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #1565C0;
  position: absolute;
  left: 20px;
  top: calc(50% - 6px);
}

.hop-owatashi__jyoken {
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 16px;
}

.hop-owatashi__jyoken span {
  font-weight: normal;
  margin-left: 16px;
}

.hop-owatashi__listOuter {
  height: calc(100vh - 300px);
  overflow-y: scroll;
}

.hop-owatashi__list thead {
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  background-color: #333;
  z-index: 1;
  color: #fff;
  font-weight: bold;
}

.hop-owatashi__list thead th {
  padding: 8px;
}

.hop-owatashi__list thead th:nth-child(1) {
  width: 8%;
}

.hop-owatashi__list thead th:nth-child(2) {
  width: 8%;
}

.hop-owatashi__list thead th:nth-child(3) {
  width: 8%;
}

.hop-owatashi__list thead th:nth-child(4) {
  width: 8%;
}

.hop-owatashi__list thead th:nth-child(5) {
  width: 8%;
}

.hop-owatashi__list thead th:nth-child(6) {
  width: 8%;
}

.hop-owatashi__list thead th:nth-child(7) {
  width: 15%;
}

.hop-owatashi__list thead th:nth-child(8) {
  width: 15%;
}

.hop-owatashi__list thead th:nth-child(9) {
  width: 15%;
}

.hop-owatashi__list thead th:nth-child(10) {
  width: 7%;
}

.hop-owatashi__list tbody td {
  padding: 16px 8px;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  vertical-align: top;
}

.hop-owatashi__list tbody td dl {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.hop-owatashi__list tbody td dl dt {
  width: calc(100% - 48px);
}

.hop-owatashi__list tbody td dl dd {
  width: 40px;
  text-align: right;
  position: relative;
}

.hop-owatashi__list tbody td dl dd:before {
  content: '';
  background-image: url(../image/icon_cancel.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 13px;
  height: 13px;
  position: absolute;
  left: 8px;
  top: 4px;
}

.hop-owatashi__list tbody td input[type="checkbox"] {
  display: none;
}

.hop-owatashi__list tbody td input[type="checkbox"] + label {
  position: relative;
  padding-left: 28px;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-owatashi__list tbody td input[type="checkbox"] + label:before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid #ccc;
  position: absolute;
  left: 0;
  top: 2px;
}

.hop-owatashi__list tbody td input[type="checkbox"]:checked + label {
  font-weight: bold;
  color: #1565C0;
}

.hop-owatashi__list tbody td input[type="checkbox"]:checked + label:before {
  border: 2px solid #1565C0;
  background-color: #1565C0;
}

.hop-owatashi__list tbody td input[type="checkbox"]:checked + label:after {
  content: '✔';
  width: 20px;
  height: 20px;
  position: absolute;
  font-size: 11px;
  font-size: 1.1rem;
  left: 0;
  top: 0;
  text-align: center;
  line-height: 20px;
  color: #fff;
}

.hop-takeout {
  margin-top: 16px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hop-takeout__left {
  width: 30%;
  padding-right: 16px;
  border-right: 1px solid #ccc;
}

.hop-takeout__center {
  width: 35%;
  padding-left: 16px;
  padding-right: 16px;
  border-right: 1px solid #ccc;
}

.hop-takeout__right {
  width: 35%;
  padding-left: 16px;
}

.hop-takeout__menu {
  overflow-y: scroll;
  height: 400px;
}

.hop-takeout__menuItem {
  border-bottom: 1px solid #ccc;
}

.hop-takeout__menuLink {
  display: block;
  padding: 16px 16px;
}

.hop-takeout__menuLink:link, .hop-takeout__menuLink:visited {
  color: #333;
}

.hop-takeout__menuLink.--active {
  background-color: #1565C0;
}

.hop-takeout__menuLink.--active:link, .hop-takeout__menuLink.--active:visited {
  color: #fff;
}

.hop-takeout__menuItemName {
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-takeout__menuItemPrice {
  margin-top: 8px;
  font-size: 13px;
  font-size: 1.3rem;
  text-align: right;
}

.hop-takeout__detailNumber {
  display: table;
  margin: 40px auto 0;
}

.hop-takeout__detailMenu {
  margin-top: 40px;
}

.hop-takeout__subPrice {
  display: inline-block;
  color: #999;
  margin-left: 8px;
}

.hop-takeout__cart {
  margin-top: 16px;
  overflow-y: scroll;
  height: 400px;
}

.hop-takeout__cart.--set {
  height: 350px;
}

.hop-takeout__cart.--short {
  height: 250px;
}

.hop-takeout__cartItem {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid #ccc;
}

.hop-takeout__cartItemTitle {
  position: relative;
  padding-right: 48px;
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-takeout__cartItemNumber {
  position: absolute;
  text-align: right;
  right: 0;
  top: 0;
  width: 40px;
  display: block;
}

.hop-takeout__cartItemNumber:before {
  content: '';
  background-image: url(../image/icon_cancel.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  left: 0;
  top: 5px;
  display: block;
  position: absolute;
}

.hop-takeout__cartItemInfo {
  margin-top: 8px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hop-takeout__cartItemDelete {
  color: #1565C0;
  border: none;
  padding: 0;
  text-decoration: underline;
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: bold;
}

.hop-takeout__cartItemPrice {
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-takeout__cartItemPrice.--red {
  color: #C42632;
}

.hop-takeout__cartItemSub {
  position: relative;
  padding-right: 48px;
  margin-top: 8px;
  font-size: 11px;
  font-size: 1.1rem;
}

.hop-takeout__cartItemSubNumber {
  position: absolute;
  text-align: right;
  right: 0;
  top: 0;
  width: 40px;
  display: block;
}

.hop-takeout__cartItemSubNumber:before {
  content: '';
  background-image: url(../image/icon_cancel.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  left: 0;
  top: 3px;
  display: block;
  position: absolute;
}

.hop-takeout__total {
  width: 100%;
  margin-top: 16px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hop-takeout__couponLabel {
  width: 50%;
  font-weight: bold;
  font-size: 11px;
  font-size: 1.1rem;
}

.hop-takeout__couponPrice {
  width: 50%;
  font-weight: bold;
  font-size: 11px;
  font-size: 1.1rem;
  text-align: right;
}

.hop-takeout__totalLabel {
  width: 50%;
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-takeout__totalPrice {
  width: 50%;
  font-weight: bold;
  font-size: 13px;
  font-size: 1.3rem;
  text-align: right;
}

.hop-takeout__totalPrice.--red {
  color: #C42632;
}

.hop-takeout__totalPrice.--gray {
  color: #999;
}

.hop-takeout__yoyakuNumber {
  margin-top: 16px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
}

.hop-point {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hop-point__left {
  width: calc(50% - 60px - 40px);
}

.hop-point__center {
  width: 120px;
}

.hop-point__right {
  width: calc(50% - 60px - 40px);
}

.hop-point__countBtn {
  background-color: #1565C0;
  font-size: 13px;
  font-size: 1.3rem;
  color: #fff;
  text-align: center;
  height: 48px;
  line-height: 48px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  width: 100%;
}

.hop-oshirase__list {
  border-top: 1px solid #ccc;
}

.hop-oshirase__item {
  border-bottom: 1px solid #ccc;
}

.hop-oshirase__link {
  display: block;
  overflow: hidden;
  padding: 24px 16px;
}

.hop-oshirase__link:link, .hop-oshirase__link:visited {
  color: #1565C0;
}

.hop-oshirase__link.--sold {
  background-color: #C42632;
}

.hop-oshirase__link.--sold:link, .hop-oshirase__link.--sold:visited {
  color: #fff;
}

.hop-oshirase__link.--hide {
  background-color: #ccc;
}

.hop-oshirase__date {
  float: left;
  display: block;
  width: 120px;
  font-size: 13px;
  font-size: 1.3rem;
  color: #999;
  font-weight: bold;
}

.hop-oshirase__title {
  float: left;
  width: calc(100% - 136px);
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
  position: relative;
}

.hop-oshirase__title.--new:before {
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  background-color: #C42632;
  border-radius: 6px;
  left: -20px;
  top: calc(50% - 6px);
}

.hop-oshirase__menu {
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: bold;
}

.hop-oshirase__detailDate {
  font-size: 13px;
  font-size: 1.3rem;
  color: #999;
  font-weight: bold;
}

.hop-oshirase__detailText p, .hop-oshirase__detailText ul, .hop-oshirase__detailText ol {
  margin-top: 24px;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-oshirase__detailText ul, .hop-oshirase__detailText ol {
  padding-left: 1.5em;
}

.hop-oshirase__detailText ul li {
  list-style-type: disc;
}

.hop-oshirase__detailText ol li {
  list-style-type: decimal;
}

.hop-oshirase__detailText a:link, .hop-oshirase__detailText a:visited {
  color: #1565C0;
  text-decoration: underline;
}

.hop-oshirase__detailText strong, .hop-oshirase__detailText b {
  font-weight: bold;
}

.hop-sekiset__list {
  width: 100%;
}

.hop-sekiset__list thead {
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  background-color: #333;
  z-index: 1;
  color: #fff;
  font-weight: bold;
}

.hop-sekiset__list thead th {
  padding: 8px;
  font-size: 13px;
  font-size: 1.3rem;
}

.hop-sekiset__list thead th:nth-child(3) {
  width: 120px;
}

.hop-sekiset__list thead th:nth-child(4) {
  width: 120px;
}

.hop-sekiset__list tbody td {
  padding: 16px 8px;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  font-size: 1.3rem;
  vertical-align: middle;
}

.hop-sekiset__btn {
  float: right;
  height: 48px;
  height: 48px;
  font-size: 13px;
  font-size: 1.3rem;
  padding: 0 24px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #1565C0;
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 8px;
}

.hop-sekiset__listBtn {
  height: 48px;
  height: 48px;
  font-size: 13px;
  font-size: 1.3rem;
  padding: 0 24px;
  border: 1px solid #1565C0;
  border-radius: 4px;
  color: #1565C0;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .mtXS, .mtXSSp {
    margin-top: 4px !important;
  }
  .mtS, .mtSSp {
    margin-top: 8px !important;
  }
  .mtM, .mtMSp {
    margin-top: 16px !important;
  }
  .mtL, .mtLSp {
    margin-top: 32px !important;
  }
  .mtXL, .mtXLSp {
    margin-top: 64px !important;
  }
  .mbXS, .mbXSSp {
    margin-bottom: 4px !important;
  }
  .mbS, .mbSSp {
    margin-bottom: 8px !important;
  }
  .mbM, .mbMSp {
    margin-bottom: 16px !important;
  }
  .mbL, .mbLSp {
    margin-bottom: 32px !important;
  }
  .mbXL, .mbXLSp {
    margin-bottom: 64px !important;
  }
  .mlXS, .mlXSSp {
    margin-left: 4px !important;
  }
  .mlS, .mlSSp {
    margin-left: 8px !important;
  }
  .mlM, .mlMSp {
    margin-left: 16px !important;
  }
  .mlL, .mlLSp {
    margin-left: 32px !important;
  }
  .mlXL, .mlXLSp {
    margin-left: 64px !important;
  }
  .mrXS, .mrXSSp {
    margin-right: 4px !important;
  }
  .mrS, .mrSSp {
    margin-right: 8px !important;
  }
  .mrM, .mrMSp {
    margin-right: 16px !important;
  }
  .mrL, .mrLSp {
    margin-right: 32px !important;
  }
  .mrXL, .mrXLSp {
    margin-right: 64px !important;
  }
  .ptXS, .ptXSSp {
    padding-top: 4px !important;
  }
  .ptS, .ptSSp {
    padding-top: 8px !important;
  }
  .ptM, .ptMSp {
    padding-top: 16px !important;
  }
  .ptL, .ptLSp {
    padding-top: 32px !important;
  }
  .ptXL, .ptXLSp {
    padding-top: 64px !important;
  }
  .pbXS, .pbXSSp {
    padding-bottom: 4px !important;
  }
  .pbS, .pbSSp {
    padding-bottom: 8px !important;
  }
  .pbM, .pbMSp {
    padding-bottom: 16px !important;
  }
  .pbL, .pbLSp {
    padding-bottom: 32px !important;
  }
  .pbXL, .pbXLSp {
    padding-bottom: 64px !important;
  }
  .hideSp {
    display: none !important;
  }
  .textXS, .textXSSp {
    font-size: 1rem;
  }
  .textS, .textSSp {
    font-size: 1.2rem;
  }
  .textM, .textMSp {
    font-size: 1.4rem;
  }
  .textL, .textLSp {
    font-size: 1.6rem;
  }
  .textXL, .textXLSp {
    font-size: 1.8rem;
  }
  .textXXL, .textXXLSp {
    font-size: 2rem;
  }
  .textXXXL, .textXXXLSp {
    font-size: 2.4rem;
  }
  .taLSp {
    text-align: left !important;
  }
  .taCSp {
    text-align: center !important;
  }
  .taRSp {
    text-align: right !important;
  }
}

@media screen and (min-width: 768px) {
  .mtXS, .mtXSPc {
    margin-top: 8px !important;
  }
  .mtS, .mtSPc {
    margin-top: 16px !important;
  }
  .mtM, .mtMPc {
    margin-top: 32px !important;
  }
  .mtL, .mtLPc {
    margin-top: 64px !important;
  }
  .mtXL, .mtXLPc {
    margin-top: 96px !important;
  }
  .mbXS, .mbXSPc {
    margin-bottom: 8px !important;
  }
  .mbS, .mbSPc {
    margin-bottom: 16px !important;
  }
  .mbM, .mbMPc {
    margin-bottom: 32px !important;
  }
  .mbL, .mbLPc {
    margin-bottom: 64px !important;
  }
  .mbXL, .mbXLPc {
    margin-bottom: 96px !important;
  }
  .mlXS, .mlXSPc {
    margin-left: 8px !important;
  }
  .mlS, .mlSPc {
    margin-left: 16px !important;
  }
  .mlM, .mlMPc {
    margin-left: 32px !important;
  }
  .mlL, .mtlPc {
    margin-left: 64px !important;
  }
  .mlXL, .mlXLPc {
    margin-left: 96px !important;
  }
  .mrXS, .mrXSSPc {
    margin-right: 8px !important;
  }
  .mrS, .mrSPc {
    margin-right: 16px !important;
  }
  .mrM, .mrMPc {
    margin-right: 32px !important;
  }
  .mrL, .mrLPc {
    margin-right: 64px !important;
  }
  .mrXL, .mrXLPc {
    margin-right: 96px !important;
  }
  .ptXS, .ptXSPc {
    padding-top: 8px !important;
  }
  .ptS, .ptSPc {
    padding-top: 16px !important;
  }
  .ptM, .ptMPc {
    padding-top: 32px !important;
  }
  .ptL, .ptLPc {
    padding-top: 64px !important;
  }
  .ptXL, .ptXLPc {
    padding-top: 96px !important;
  }
  .pbXS, .pbXSPc {
    padding-bottom: 8px !important;
  }
  .pbS, .pbSPc {
    padding-bottom: 16px !important;
  }
  .pbM, .pbMPc {
    padding-bottom: 32px !important;
  }
  .pbL, .pbLPc {
    padding-bottom: 64px !important;
  }
  .pbXL, .pbXLPc {
    padding-bottom: 96px !important;
  }
  .hidePc {
    display: none !important;
  }
  .textXS, .textXSPc {
    font-size: 1rem;
  }
  .textS, .textSPc {
    font-size: 1.1rem;
  }
  .textM, .textMPc {
    font-size: 1.3rem;
  }
  .textL, .textLPc {
    font-size: 1.5rem;
  }
  .textXL, .textXLPc {
    font-size: 1.8rem;
  }
  .textXXL, .textXXLPc {
    font-size: 2.2rem;
  }
  .textXXXL, .textXXXLPc {
    font-size: 2.8rem;
  }
  .taLPc {
    text-align: left !important;
  }
  .taCPc {
    text-align: center !important;
  }
  .taRPc {
    text-align: right !important;
  }
}

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