@charset "UTF-8";
@font-face {
  font-family: 'oh-icon';
  src: url("/res/msd/fonts/oh-icon/oh-icon.eot?85c2rb");
  src: url("/res/msd/fonts/oh-icon/oh-icon.eot?85c2rb#iefix") format("embedded-opentype"), url("/res/msd/fonts/oh-icon/oh-icon.woff2?85c2rb") format("woff2"), url("/res/msd/fonts/oh-icon/oh-icon.ttf?85c2rb") format("truetype"), url("/res/msd/fonts/oh-icon/oh-icon.woff?85c2rb") format("woff"), url("/res/msd/fonts/oh-icon/oh-icon.svg?85c2rb#oh-icon") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="oh-icon-"], [class*=" oh-icon-"] {
  font-family: 'oh-icon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.oh-icon-home4:before {
  content: "\e90e"; }

.oh-icon-home2:before {
  content: "\e90f"; }

.oh-icon-home3:before {
  content: "\e910"; }

.oh-icon-newspaper:before {
  content: "\e911"; }

.oh-icon-image:before {
  content: "\e912"; }

.oh-icon-images:before {
  content: "\e913"; }

.oh-icon-camera:before {
  content: "\e914"; }

.oh-icon-film:before {
  content: "\e915"; }

.oh-icon-folder-plus:before {
  content: "\e931"; }

.oh-icon-folder-download:before {
  content: "\e933"; }

.oh-icon-coin-yen:before {
  content: "\e93e"; }

.oh-icon-map:before {
  content: "\e94b"; }

.oh-icon-alarm:before {
  content: "\e950"; }

.oh-icon-bubbles:before {
  content: "\e96c"; }

.oh-icon-user-plus:before {
  content: "\e973"; }

.oh-icon-enlarge:before {
  content: "\e989"; }

.oh-icon-facebook:before {
  content: "\ea90"; }

.oh-icon-facebook2:before {
  content: "\ea91"; }

.oh-icon-instagram:before {
  content: "\ea92"; }

.oh-icon-twitter:before {
  content: "\ea96"; }

.oh-icon-youtube:before {
  content: "\ea9d"; }

.oh-icon-user2:before {
  content: "\e971"; }

.oh-icon-user-minus:before {
  content: "\e974"; }

.oh-icon-user-tie:before {
  content: "\e976"; }

.oh-icon-search2:before {
  content: "\e986"; }

.oh-icon-attachment:before {
  content: "\e9cd"; }

.oh-icon-plus2:before {
  content: "\ea0a"; }

.oh-icon-minus2:before {
  content: "\ea0b"; }

.oh-icon-cross:before {
  content: "\ea0f"; }

.oh-icon-checkmark:before {
  content: "\ea10"; }

.oh-icon-enter:before {
  content: "\ea13"; }

.oh-icon-exit:before {
  content: "\ea14"; }

.oh-icon-circle-up:before {
  content: "\ea41"; }

.oh-icon-circle-right:before {
  content: "\ea42"; }

.oh-icon-circle-down:before {
  content: "\ea43"; }

.oh-icon-circle-left:before {
  content: "\ea44"; }

.oh-icon-checkbox-checked:before {
  content: "\ea52"; }

.oh-icon-heart2:before {
  content: "\e9da"; }

.oh-icon-pencil3:before {
  content: "\e905"; }

.oh-icon-pencil2:before {
  content: "\e906"; }

.oh-icon-book2:before {
  content: "\e91f"; }

.oh-icon-books:before {
  content: "\e920"; }

.oh-icon-mug:before {
  content: "\e9a2"; }

.oh-icon-spinner11:before {
  content: "\e984"; }

.oh-icon-key3:before {
  content: "\e98d"; }

.oh-icon-binoculars2:before {
  content: "\e985"; }

.oh-icon-stats-bars:before {
  content: "\e99c"; }

.oh-icon-stats-dots:before {
  content: "\e99b"; }

.oh-icon-pie-chart2:before {
  content: "\e99a"; }

.oh-icon-office:before {
  content: "\e903"; }

.oh-icon-download:before {
  content: "\f019"; }

.oh-icon-question-circle:before {
  content: "\f059"; }

.oh-icon-info-circle:before {
  content: "\f05a"; }

.oh-icon-arrow-left:before {
  content: "\f060"; }

.oh-icon-arrow-right:before {
  content: "\f061"; }

.oh-icon-exclamation-circle:before {
  content: "\f06a"; }

.oh-icon-exclamation-triangle:before {
  content: "\f071"; }

.oh-icon-warning:before {
  content: "\f071"; }

.oh-icon-comments:before {
  content: "\f086"; }

.oh-icon-angle-double-left:before {
  content: "\f100"; }

.oh-icon-angle-double-right:before {
  content: "\f101"; }

.oh-icon-commenting:before {
  content: "\f27a"; }

.oh-icon-user:before {
  content: "\f007"; }

.oh-icon-bicycle:before {
  content: "\e900"; }

.oh-icon-automobile:before {
  content: "\e901"; }

.oh-icon-cab:before {
  content: "\e902"; }

.oh-icon-binoculars:before {
  content: "\e904"; }

.oh-icon-code-fork:before {
  content: "\e907"; }

.oh-icon-line-chart:before {
  content: "\e908"; }

.oh-icon-lock:before {
  content: "\e909"; }

.oh-icon-tag:before {
  content: "\e90a"; }

.oh-icon-road:before {
  content: "\e90b"; }

.oh-icon-search:before {
  content: "\f002"; }

.oh-icon-star:before {
  content: "\f005"; }

.oh-icon-check:before {
  content: "\f00c"; }

.oh-icon-close:before {
  content: "\f00d"; }

.oh-icon-remove:before {
  content: "\f00d"; }

.oh-icon-times:before {
  content: "\f00d"; }

.oh-icon-cog:before {
  content: "\f013"; }

.oh-icon-gear:before {
  content: "\f013"; }

.oh-icon-home:before {
  content: "\f015"; }

.oh-icon-clock-o:before {
  content: "\f017"; }

.oh-icon-map-marker:before {
  content: "\f041"; }

.oh-icon-check-square-o:before {
  content: "\f046"; }

.oh-icon-chevron-left:before {
  content: "\f053"; }

.oh-icon-chevron-right:before {
  content: "\f054"; }

.oh-icon-plus-circle:before {
  content: "\f055"; }

.oh-icon-minus-circle:before {
  content: "\f056"; }

.oh-icon-times-circle:before {
  content: "\f057"; }

.oh-icon-check-circle:before {
  content: "\f058"; }

.oh-icon-plus:before {
  content: "\f067"; }

.oh-icon-minus:before {
  content: "\f068"; }

.oh-icon-calendar:before {
  content: "\f073"; }

.oh-icon-chevron-up:before {
  content: "\f077"; }

.oh-icon-chevron-down:before {
  content: "\f078"; }

.oh-icon-external-link:before {
  content: "\f08e"; }

.oh-icon-wrench:before {
  content: "\f0ad"; }

.oh-icon-bars:before {
  content: "\f0c9"; }

.oh-icon-navicon:before {
  content: "\f0c9"; }

.oh-icon-reorder:before {
  content: "\f0c9"; }

.oh-icon-list-ul:before {
  content: "\f0ca"; }

.oh-icon-envelope:before {
  content: "\f0e0"; }

.oh-icon-plus-square:before {
  content: "\f0fe"; }

.oh-icon-angle-left:before {
  content: "\f104"; }

.oh-icon-angle-right:before {
  content: "\f105"; }

.oh-icon-angle-up:before {
  content: "\f106"; }

.oh-icon-angle-down:before {
  content: "\f107"; }

.oh-icon-chevron-circle-left:before {
  content: "\f137"; }

.oh-icon-chevron-circle-right:before {
  content: "\f138"; }

.oh-icon-chevron-circle-up:before {
  content: "\f139"; }

.oh-icon-chevron-circle-down:before {
  content: "\f13a"; }

.oh-icon-minus-square:before {
  content: "\f146"; }

.oh-icon-check-square:before {
  content: "\f14a"; }

.oh-icon-file-text:before {
  content: "\f15c"; }

.oh-icon-youtube-play:before {
  content: "\f16a"; }

.oh-icon-calculator:before {
  content: "\f1ec"; }

.oh-icon-check-square2:before {
  content: "\f14b"; }

.oh-icon-book:before {
  content: "\f02d"; }

.oh-icon-caret-down:before {
  content: "\f0d7"; }

.oh-icon-caret-up:before {
  content: "\f0d8"; }

.oh-icon-sort:before {
  content: "\f0dc"; }

.oh-icon-unsorted:before {
  content: "\f0dc"; }

.oh-icon-history:before {
  content: "\f1da"; }

.oh-icon-pie-chart:before {
  content: "\e90c"; }

.oh-icon-area-chart:before {
  content: "\e90d"; }

@font-face {
  font-family: 'oh-icon2';
  src: url("/res/msd/fonts/oh-icon2/oh-icon2.eot?ld9jtn");
  src: url("/res/msd/fonts/oh-icon2/oh-icon2.eot?ld9jtn#iefix") format("embedded-opentype"), url("/res/msd/fonts/oh-icon2/oh-icon2.woff2?ld9jtn") format("woff2"), url("/res/msd/fonts/oh-icon2/oh-icon2.ttf?ld9jtn") format("truetype"), url("/res/msd/fonts/oh-icon2/oh-icon2.woff?ld9jtn") format("woff"), url("/res/msd/fonts/oh-icon2/oh-icon2.svg?ld9jtn#oh-icon2") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="oh-icon2-"], [class*=" oh-icon2-"] {
  font-family: 'oh-icon2';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.oh-icon2-commentdot:before {
  content: "\e918"; }

.oh-icon2-commentwo:before {
  content: "\e919"; }

.oh-icon2-companybuilding:before {
  content: "\e91a"; }

.oh-icon2-compass:before {
  content: "\e91b"; }

.oh-icon2-editpen:before {
  content: "\e91c"; }

.oh-icon2-flag:before {
  content: "\e91d"; }

.oh-icon2-graphdata:before {
  content: "\e91e"; }

.oh-icon2-heart:before {
  content: "\e91f"; }

.oh-icon2-lightbulb:before {
  content: "\e920"; }

.oh-icon2-list-alt:before {
  content: "\e921"; }

.oh-icon2-mappoint:before {
  content: "\e922"; }

.oh-icon2-landarea:before {
  content: "\e915"; }

.oh-icon2-building-age:before {
  content: "\e914"; }

.oh-icon2-coin-yen2:before {
  content: "\e916"; }

.oh-icon2-floorplan:before {
  content: "\e917"; }

.oh-icon2-change:before {
  content: "\e913"; }

.oh-icon2-alert-bell:before {
  content: "\e90e"; }

.oh-icon2-arrow-expansion:before {
  content: "\e90f"; }

.oh-icon2-commenting-s:before {
  content: "\e910"; }

.oh-icon2-filesave:before {
  content: "\e911"; }

.oh-icon2-wallet:before {
  content: "\e912"; }

.oh-icon2-beginner:before {
  content: "\e902"; }

.oh-icon2-circle-new:before {
  content: "\e903"; }

.oh-icon2-gakku:before {
  content: "\e904"; }

.oh-icon2-jh-school:before {
  content: "\e905"; }

.oh-icon2-kids:before {
  content: "\e906"; }

.oh-icon2-magazine:before {
  content: "\e907"; }

.oh-icon2-map-japan:before {
  content: "\e908"; }

.oh-icon2-p-school:before {
  content: "\e909"; }

.oh-icon2-park:before {
  content: "\e90a"; }

.oh-icon2-route-arrow:before {
  content: "\e90b"; }

.oh-icon2-route-bus:before {
  content: "\e90c"; }

.oh-icon2-route-walk:before {
  content: "\e90d"; }

.oh-icon2-menu-close:before {
  content: "\e600"; }

.oh-icon2-registration:before {
  content: "\e603"; }

.oh-icon2-company:before {
  content: "\e605"; }

.oh-icon2-recruit:before {
  content: "\e606"; }

.oh-icon2-routemap:before {
  content: "\e900"; }

.oh-icon2-train:before {
  content: "\e901"; }

.picker .picker__nav--prev:before,
.picker .picker__nav--next:before, .picker .picker__button--close:before, .picker .picker__button--clear:before, .ohs-arrow:after, .ohs-arrow--red:after, .ohs-arrow--white:after, .ohs-arrowL:after, .ohs-arrow2:before {
  font-family: 'oh-icon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.picker .picker__wrap {
  display: flex;
  justify-content: center;
  align-items: center; }

.picker .picker__header {
  margin-top: 0;
  padding: 14px 0 6px;
  background-color: #0088c3; }

.picker .picker__box {
  display: block;
  width: 100%;
  padding: 2px;
  font-size: 18px; }

.picker .picker__select--year,
.picker .picker__select--month {
  height: 44px;
  font-size: 16px;
  padding: 10px 5px; }

.picker .picker__select--year {
  min-width: 100px;
  width: 12.5%;
  -webkit-appearance: none;
          appearance: none;
  background-color: #fff; }

.picker .picker__select--month {
  min-width: 70px;
  width: 12.5%;
  -webkit-appearance: none;
          appearance: none;
  background-color: #fff; }

.picker .picker__nav--prev,
.picker .picker__nav--next {
  top: 0;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  padding: 0;
  color: #fff; }
  .picker .picker__nav--prev:hover,
  .picker .picker__nav--next:hover {
    background-color: transparent;
    opacity: 0.8; }
  .picker .picker__nav--prev:before,
  .picker .picker__nav--next:before {
    font-size: 50px;
    width: auto;
    height: auto;
    border: 0;
    color: #fff; }

.picker .picker__nav--prev {
  left: 0;
  padding-left: 10px; }
  .picker .picker__nav--prev:before {
    content: ""; }

.picker .picker__nav--next {
  right: 0;
  padding-right: 10px; }
  .picker .picker__nav--next:before {
    content: ""; }

.picker .picker__table {
  width: calc(100% - 20px);
  margin: 10px auto;
  border-style: solid;
  border-width: 1px 0 0 1px;
  border-color: #ccc; }
  .picker .picker__table td, .picker .picker__table th {
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-color: #ccc;
    text-align: center; }
  .picker .picker__table th {
    color: #000;
    border-bottom-width: 2px; }
  .picker .picker__table .picker__weekday {
    padding: 7px 0;
    font-size: 18px;
    font-weight: bold;
    background-color: #eff6fd; }
  .picker .picker__table .picker__weekday:nth-last-child(2),
  .picker .picker__table .picker__weekday:nth-last-child(1) {
    background-color: #ffefeb; }
  .picker .picker__table td:nth-last-child(2),
  .picker .picker__table td:nth-last-child(1) {
    background-color: #fff9f7; }
    .picker .picker__table td:nth-last-child(2) .picker__day--highlighted,
    .picker .picker__table td:nth-last-child(1) .picker__day--highlighted {
      background-color: #fff9f7; }
    .picker .picker__table td:nth-last-child(2) .picker__day--selected,
    .picker .picker__table td:nth-last-child(1) .picker__day--selected {
      background-color: #ffff66; }
  .picker .picker__table .picker__day {
    padding: 12px 0 10px; }
    .picker .picker__table .picker__day:hover {
      background-color: #ffffd6; }
    .picker .picker__table .picker__day.picker__day--infocus {
      color: #000; }
    .picker .picker__table .picker__day.picker__day--outfocus {
      color: #ccc; }
      .picker .picker__table .picker__day.picker__day--outfocus:hover {
        color: #000; }
    .picker .picker__table .picker__day.picker__day--today:hover {
      color: #000;
      background-color: #ffffd6; }
    .picker .picker__table .picker__day.picker__day--today:before {
      border-top-color: #0088c3;
      border-top-width: 12px;
      border-left-width: 12px; }
    .picker .picker__table .picker__day.picker__day--highlighted {
      color: #000;
      background-color: #fff; }
    .picker .picker__table .picker__day.picker__day--selected {
      font-weight: bold;
      color: #000;
      background-color: #ffff66; }
      .picker .picker__table .picker__day.picker__day--selected:hover {
        color: #000;
        background-color: #ffff66; }
    .picker .picker__table .picker__day.picker__day--disabled {
      background-color: #f5f5f5; }

.picker .picker__footer {
  display: flex;
  padding: 0 10px;
  margin-bottom: 10px; }

.picker .picker__button--today {
  max-width: 210px;
  width: 42%;
  min-width: 100px;
  min-height: 50px;
  color: #0088c3;
  background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 7%, #f8f8f8 7%, #f8f8f8 88%, #dddddd 100%);
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 12px; }
  .picker .picker__button--today:hover {
    opacity: 0.8;
    color: #0088c3;
    background-color: transparent;
    background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 7%, #f8f8f8 7%, #f8f8f8 88%, #dddddd 100%);
    border-bottom-color: #ccc; }
  .picker .picker__button--today:before {
    top: 0;
    border-top-color: #0088c3;
    border-top-width: 10px;
    border-left-width: 10px; }

.picker .picker__button--close {
  width: auto;
  margin-left: 10px;
  color: #0088c3;
  font-weight: normal;
  font-size: 0;
  text-indent: -9999px; }
  .picker .picker__button--close:hover {
    color: #0088c3;
    text-decoration: none;
    background-color: transparent;
    border-bottom-color: transparent; }
  .picker .picker__button--close:before {
    top: 2px;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 0;
    text-indent: 0;
    font-size: 16px;
    text-decoration: none; }

.picker .picker__button--clear {
  max-width: 210px;
  width: 45%;
  min-width: 100px;
  min-height: 50px;
  margin-left: 10px;
  color: #0088c3;
  border-radius: 4px;
  vertical-align: middle;
  font-size: 12px;
  text-align: center;
  background: #fff;
  border: 2px solid #0088c3;
  box-shadow: 0 2px 0 0 #0088c3; }
  .picker .picker__button--clear:hover {
    opacity: 0.8;
    color: #0088c3;
    background-color: transparent;
    border-bottom-color: #ccc;
    background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 7%, #f8f8f8 7%, #f8f8f8 88%, #dddddd 100%); }
  .picker .picker__button--clear:before {
    position: static;
    display: inline-block;
    vertical-align: middle;
    border: 0;
    content: "";
    top: 2px;
    margin-right: 8px;
    height: auto; }

.picker .picker__holder,
.picker .picker__frame {
  -webkit-backface-visibility: visible; }

.picker .picker__holder {
  display: none;
  -webkit-overflow-scrolling: auto; }

.picker.picker--opened .picker__holder,
.picker.picker--opened .picker__frame {
  -webkit-transform: none;
          transform: none; }

.picker.picker--opened .picker__holder {
  display: block; }

.picker.picker--opened .picker__frame {
  top: 1%; }
  @media (min-height: 33.875em) {
    .picker.picker--opened .picker__frame {
      top: 1%;
      bottom: auto; } }

.picker__day--disabled {
  color: #ccc !important; }

.picker__day--outfocus {
  color: #000 !important; }

.picker__day--outfocus.picker__day--disabled {
  color: #ccc !important; }

.msds-modal-1tap .picker .picker__holder {
  display: block;
  margin: 0 -5.2vw;
  top: -8vw;
  width: 100vw;
  height: 100vh; }

/*
---
name: 矢印
category:
  - Arrow
---

```html
<div class="ohs-linkList">
  <div class="ohs-linkList__heading">タイトル</div>
  <div class="ohs-linkList__body">
    <div class="ohs-linkList__item">
      <a class="ohs-linkList__link  ohs-arrow" href="#">リンク</a>
    </div>
    <div class="ohs-linkList__item">
      <a class="ohs-linkList__link  ohs-arrow" href="#">リンク</a>
    </div>
  </div>
<!-- /.ohs-linkList --></div>
```
*/
.ohs-arrow {
  position: relative;
  z-index: 0; }
  .ohs-arrow:after {
    content: "";
    position: absolute;
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    line-height: 0;
    color: #d0080f;
    font-size: 25px; }

.ohs-arrow--red {
  position: relative;
  z-index: 0; }
  .ohs-arrow--red:after {
    content: "";
    position: absolute;
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    line-height: 0;
    color: #d0080f;
    font-size: 25px; }

.ohs-arrow--white {
  position: relative;
  z-index: 0; }
  .ohs-arrow--white:after {
    content: "";
    position: absolute;
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    line-height: 0;
    color: #fff;
    font-size: 25px; }

/*
---
name: 矢印 左
category:
  - Arrow
---

```html
<div class="ohs-linkList">
  <div class="ohs-linkList__heading">タイトル</div>
  <div class="ohs-linkList__body">
    <div class="ohs-linkList__item">
      <a class="ohs-linkList__link  ohs-arrowL" href="#">リンク</a>
    </div>
    <div class="ohs-linkList__item">
      <a class="ohs-linkList__link  ohs-arrowL" href="#">リンク</a>
    </div>
  </div>
<!-- /.ohs-linkList --></div>
```
*/
.ohs-arrowL {
  position: relative;
  z-index: 0; }
  .ohs-arrowL:after {
    content: "";
    position: absolute;
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    line-height: 0;
    color: #d0080f;
    font-size: 25px; }

/*
---
name: 矢印2
category:
  - Arrow
---

```html
<div class="ohs-arrow2"></div>
```
*/
.ohs-arrow2 {
  margin: 0 0 15px;
  text-align: center; }
  .ohs-arrow2:before {
    display: block;
    width: 57px;
    height: 35px;
    margin: 0 auto;
    content: "";
    color: #FFCCCC;
    font-size: 90px;
    line-height: 33px; }

/*
---
name: テキストボックス
category:
  - Form
---

```html
<div class="ohs-inputText">
  <label for="" class="ohs-inputText__label">勤務先</label>
  <input type="text" name="" id="" placeholder="住所、駅名、キーワードを入力" class="ohs-inputText__textbox">
<!-- /.ohs-inputText --></div>

<div class="ohs-inputText  is-error">
  <label for="" class="ohs-inputText__label">勤務先</label>
  <span class="ohs-inputText__error  is-error">勤務先が入力されていません</span>
  <input type="text" name="" id="" placeholder="住所、駅名、キーワードを入力" class="ohs-inputText__textbox">
<!-- /.ohs-inputText --></div>
```

```html
<div class="ohs-inputText">
  <input type="text" name="" id="" placeholder="" class="ohs-inputText__textbox">
<!-- /.ohs-inputText --></div>
```

### ssmall

```html
<div class="ohs-inputText">
  <input type="text" name="" id="" placeholder="" class="ohs-inputText__textbox ohs-inputText__textbox--ssmall">
<!-- /.ohs-inputText --></div>
```

### small

```html
<div class="ohs-inputText">
  <input type="text" name="" id="" placeholder="" class="ohs-inputText__textbox ohs-inputText__textbox--small">
<!-- /.ohs-inputText --></div>
```

### middle

```html
<div class="ohs-inputText">
  <input type="text" name="" id="" placeholder="" class="ohs-inputText__textbox ohs-inputText__textbox--middle">
<!-- /.ohs-inputText --></div>
```

### wide

```html
<div class="ohs-inputText">
  <input type="text" name="" id="" placeholder="" class="ohs-inputText__textbox ohs-inputText__textbox--wide">
<!-- /.ohs-inputText --></div>
```

### 横並び

```html
<div class="ohs-inputText ohs-inputText--horizontal">
  <div class="ohs-inputText__inner">
    <input type="text" name="" id="" placeholder="例）渋谷" class="ohs-inputText__textbox">
    <input type="text" name="" id="" placeholder="例）花子" class="ohs-inputText__textbox">
  </div>
<!-- /.ohs-inputText --></div>

<div class="ohs-inputText  ohs-inputText--horizontal  is-error">
  <span class="ohs-inputText__error  is-error">苗字が入力されていません</span>
  <span class="ohs-inputText__error  is-error">名前が入力されていません</span>
  <div class="ohs-inputText__inner">
    <input type="text" name="" id="" placeholder="例）渋谷" class="ohs-inputText__textbox">
    <input type="text" name="" id="" placeholder="例）花子" class="ohs-inputText__textbox">
  </div>
<!-- /.ohs-inputText --></div>
```

### カレンダー呼び出し

```html
<div class="ohs-inputText  ohs-inputText--datepicker  js-datepickerGroup">
  <div class="ohs-inputText__input">
    <input
      type="text"
      name="entry_date_apl2"
      id="entry_date_apl2"
      placeholder="例）2015/09/01"
      class="ohs-inputText__textbox  js-datepicker">
  </div>
  <div class="ohs-inputText__button">
    <button type="button" class="ohs-inputText__pickerButton  js-datepicker__open">
      <span class="oh-icon-calendar"></span>
    </button>
  </div>
<!-- /.ohs-inputText --></div>
```
*/
.ohs-inputText {
  margin: 0 0 10px; }
  .ohs-inputText__label {
    display: block;
    margin: 0 0 3px;
    font-size: 13px; }
    .ohs-inputText__label--bold {
      font-weight: bold; }
  .ohs-inputText__text {
    display: inline-block;
    font-size: 11px; }
  .ohs-inputText__notes {
    font-size: 10px; }
  .ohs-inputText__textbox {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    height: 44px;
    border-radius: 4px;
    padding: 10px 13px;
    border: 0.5px solid #A7A7A7;
    -webkit-appearance: none; }
    .ohs-inputText__textbox--ssmall {
      width: 70px; }
    .ohs-inputText__textbox--small {
      width: 90px; }
    .ohs-inputText__textbox--middle {
      width: 145px; }
    .ohs-inputText__textbox--wide {
      width: 240px; }
    .ohs-inputText__textbox--hsmall {
      height: 40px;
      font-size: 4vw; }
    .ohs-inputText__textbox--typeGray {
      border-color: #e2e2e2; }
    .ohs-inputText__textbox:focus {
      border: 2px solid #7dbcfe;
      outline: none; }
    .ohs-inputText__textbox::-webkit-input-placeholder {
      color: #CECECE;
      font-size: 15px; }
    .ohs-inputText__textbox:-ms-input-placeholder {
      color: #CECECE;
      font-size: 15px; }
    .ohs-inputText__textbox::placeholder {
      color: #CECECE;
      font-size: 15px; }
    .ohs-inputText__textbox.is-error {
      border: 1px solid #D7092F; }
    .ohs-contactForm .ohs-inputText__textbox {
      height: 44px;
      background-image: none; }
    .ohs-contactForm .ohs-inputText__textbox[data-validation*="required"] {
      background-color: #fff;
      border: 0.5px solid #A7A7A7; }
      .ohs-contactForm .ohs-inputText__textbox[data-validation*="required"]:focus {
        border: 2px solid #7dbcfe;
        outline: none; }
    .ohs-contactForm .ohs-inputText__textbox[data-validation*="required"].valid {
      background-color: #fff;
      border: 1px solid #777; }
    .ohs-contactForm .ohs-inputText__textbox.is-error {
      border-width: 1px;
      border-color: #D7092F; }
    .ohs-search4__form .ohs-inputText__textbox[data-validation*="required"] {
      background-color: #fffddd;
      background-image: none;
      border: 1px solid #777; }
      .ohs-search4__form .ohs-inputText__textbox[data-validation*="required"]:focus {
        border: 2px solid #7dbcfe;
        outline: none; }
    .ohs-search4__form .ohs-inputText__textbox[data-validation*="required"].valid {
      background-color: #fff;
      background-image: none;
      border: 1px solid #777; }
    .ohs-search4__form .ohs-inputText__textbox.is-error {
      background-image: none;
      border-width: 1px;
      border-color: #D7092F; }
    .ohs-inputText__textbox.is-copying {
      border-bottom: 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0; }
  .ohs-inputText__copiedTextbox {
    border: 1px solid #cccccc;
    border-top: 0;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 10px;
    background-color: #ffffff;
    font-weight: normal; }
    .ohs-inputText__copiedTextbox.is-hidden {
      display: none; }
  .ohs-inputText__error {
    display: none;
    margin: 5px 0 0;
    line-height: 1;
    font-size: 12px;
    color: #D7092F;
    font-weight: 500; }
    .ohs-inputText__error.is-error {
      display: block; }
    .ohs-inputText__error--datepicker {
      margin-bottom: 10px; }
    .ohs-inputText__error--2column {
      width: 100%;
      display: block; }
  .ohs-inputText--horizontal .ohs-inputText__inner {
    display: flex; }
    .ohs-inputText--horizontal .ohs-inputText__inner .ohs-inputText__textbox {
      margin-left: 5px; }
      .ohs-inputText--horizontal .ohs-inputText__inner .ohs-inputText__textbox:first-child {
        margin-left: 0; }
  .ohs-inputText--horizontal2 .ohs-inputText__inner {
    display: flex;
    justify-content: space-between; }
    .ohs-inputText--horizontal2 .ohs-inputText__inner .ohs-inputText__item {
      width: calc(50% - 5px); }
      .ohs-inputText--horizontal2 .ohs-inputText__inner .ohs-inputText__item .ohs-inputText__textbox {
        max-width: 100%; }
  .ohs-inputText--datepicker {
    display: flex; }
    .ohs-inputText--datepicker.ohs-inputText--datepicker--1tap {
      width: 82%;
      margin: 0 0 15px; }
      .ohs-inputText--datepicker.ohs-inputText--datepicker--1tap .ohs-inputText__input {
        width: 82%; }
      .ohs-inputText--datepicker.ohs-inputText--datepicker--1tap .ohs-inputText__button {
        flex: 0 0 auto;
        margin-left: 5px;
        margin-right: 0; }
    .ohs-inputText--datepicker .ohs-inputText__input {
      flex: 1 1 auto; }
    .ohs-inputText--datepicker .ohs-inputText__button {
      flex: 0 0 auto;
      margin-left: 5px; }
    .ohs-inputText--datepicker .ohs-inputText__pickerButton {
      box-sizing: border-box;
      width: 42px;
      height: 42px;
      line-height: 42px;
      padding: 0;
      border-radius: 4px;
      text-decoration: none;
      color: #0088c3;
      font-weight: 700;
      font-size: 24px;
      vertical-align: middle;
      line-height: 1;
      text-align: center;
      background: #fff;
      border: 2px solid #0088c3;
      box-shadow: 0 2px 0 0 #0088c3; }
      .ohs-inputText--datepicker .ohs-inputText__pickerButton--hsmall {
        width: 40px;
        height: 40px;
        font-size: 22px; }

/*
---
name: セレクト
category:
  - Form
---

```html
<div class="ohs-select">
  <label for="" class="ohs-select__label">一戸建て</label>
  <div class="ohs-select__data">
    <select id="" name="" class="ohs-select__data--select">
      <option value="1">下限なし</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
  <span class="ohs-select__text">〜</span>
  <div class="ohs-select__data">
    <select id="" name="" class="ohs-select__data--select">
      <option value="1">上限なし</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
<!-- /.ohs-select --></div>
```

### 横並び 幅に合わせて伸びる

```html
<div class="ohs-select ohs-select--horizontal">
  <div class="ohs-select__data">
    <select name="sc_house_price_l" id="sc_house_price_l" class="ohs-select__data--select">
      <option value="" selected="selected">下限なし</option>
      <option value="20000000">2000万円以上</option>
      <option value="30000000">3000万円以上</option>
      <option value="35000000">3500万円以上</option>
      <option value="40000000">4000万円以上</option>
      <option value="45000000">4500万円以上</option>
      <option value="50000000">5000万円以上</option>
      <option value="55000000">5500万円以上</option>
      <option value="60000000">6000万円以上</option>
      <option value="65000000">6500万円以上</option>
      <option value="70000000">7000万円以上</option>
      <option value="75000000">7500万円以上</option>
      <option value="80000000">8000万円以上</option>
      <option value="85000000">8500万円以上</option>
      <option value="90000000">9000万円以上</option>
      <option value="95000000">9500万円以上</option>
      <option value="100000000">1億円以上</option>
      <option value="120000000">1.2億円以上</option>
      <option value="150000000">1.5億円以上</option>
      <option value="200000000">2億円以上</option>
    </select>
  </div>
  <span class="ohs-select__text">〜</span>
  <div class="ohs-select__data">
    <select name="sc_house_price_u" id="sc_house_price_u" class="ohs-select__data--select">
      <option value="20000000">2000万円以下</option>
      <option value="30000000">3000万円以下</option>
      <option value="35000000">3500万円以下</option>
      <option value="40000000">4000万円以下</option>
      <option value="45000000">4500万円以下</option>
      <option value="50000000">5000万円以下</option>
      <option value="55000000">5500万円以下</option>
      <option value="60000000">6000万円以下</option>
      <option value="65000000">6500万円以下</option>
      <option value="70000000">7000万円以下</option>
      <option value="75000000">7500万円以下</option>
      <option value="80000000">8000万円以下</option>
      <option value="85000000">8500万円以下</option>
      <option value="90000000">9000万円以下</option>
      <option value="95000000">9500万円以下</option>
      <option value="100000000">1億円以下</option>
      <option value="120000000">1.2億円以下</option>
      <option value="150000000">1.5億円以下</option>
      <option value="200000000">2億円以下</option>
      <option value="" selected="selected">上限なし</option>
    </select>
  </div>
<!-- /.ohs-select --></div>
```
*/
.ohs-select {
  margin: 0 0 10px; }
  .ohs-select__text {
    display: inline-block;
    margin: 0 5px; }
  .ohs-select__data {
    display: inline-block; }
    .ohs-select__data--select {
      display: block;
      height: 30px;
      box-sizing: border-box;
      background-color: #fff;
      border: 0.5px solid #a7a7a7;
      width: 100%;
      border-radius: 4px;
      padding: 2px 9px;
      font-size: 13px; }
      .ohs-select__data--select:focus {
        border: 2px solid #7dbcfe;
        outline: none; }
  .ohs-select__label {
    display: block;
    font-size: 13px; }
  .ohs-select--center {
    text-align: center; }
  .ohs-select--middle {
    width: calc(100% - 47px); }
    .ohs-select--middle .ohs-select__data {
      width: 100%; }
  .ohs-select--horizontal {
    display: flex;
    justify-content: center;
    align-items: center; }
    .ohs-select--horizontal .ohs-select__data {
      width: 100%; }
      .ohs-select--horizontal .ohs-select__data--select {
        width: 100%;
        box-sizing: border-box; }
    .ohs-select--horizontal .ohs-select__text {
      display: block;
      width: 15%;
      margin: 0;
      padding: 0;
      text-align: center;
      white-space: nowrap; }

/*
---
name: エリア選択
category:
  - Form
---

```html
<div class="ohs-select2">
  <select class="ohs-select2__datalist">
    <option value="/" selected>東京・神奈川版</option>
    <option value="/nagoya">名古屋版</option>
  </select>
<!-- .ohs-select2 --></div>
```
*/
.ohs-select2 {
  position: relative;
  z-index: 0;
  min-width: 64px;
  height: 26px;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  background-color: white;
  background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 88%, #ededed 100%); }
  .ohs-select2::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3px;
    display: block;
    pointer-events: none;
    content: "\f0d7";
    font-family: 'oh-icon';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 10px;
    line-height: 0;
    width: 5px;
    height: 0;
    margin: auto;
    color: #d3d3d3; }
  .ohs-select2__datalist {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    height: inherit;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0 9px 0 3px;
    background: none transparent;
    vertical-align: middle;
    color: inherit;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: -0.05em; }

/*
---
name: エリア選択
category:
  - Form
---

```html
<div class="ohs-select3">
  <select class="ohs-select3__datalist">
    <option value="/" selected>東京・神奈川版</option>
    <option value="/nagoya">名古屋版</option>
  </select>
<!-- .ohs-select3 --></div>
```
*/
.ohs-select3 {
  position: relative;
  z-index: 0;
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #d3d3d3;
  background-color: white;
  background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 88%, #ededed 100%); }
  @media only screen and (max-width: 374px) {
    .ohs-select3 {
      min-width: 54px;
      height: 38px; } }
  @media only screen and (min-width: 375px) {
    .ohs-select3 {
      min-width: 80px;
      height: 38px; } }
  .ohs-select3::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 3px;
    display: block;
    pointer-events: none;
    content: "\f0d7";
    font-family: 'oh-icon';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 10px;
    line-height: 0;
    width: 5px;
    height: 0;
    margin: auto;
    color: #d3d3d3; }
  .ohs-select3__datalist {
    -webkit-appearance: none;
    appearance: none;
    width: auto;
    height: inherit;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0 9px 0 3px;
    background: none transparent;
    vertical-align: middle;
    color: inherit;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: -0.05em; }

/*
---
name: ご予算、ご希望の広さ、ご希望の間取り、年収
category:
  - Form
---
``` html
<div class="ohs-section4" id="ohs_sc_price_u" data-formfield="">
  <div class="ohs-heading4">
    <h4 class="ohs-heading4__title">ご予算 <b class="icon-required">[必須]</b></h4>
  <!-- /.ohs-heading2 --></div>
  <div class="ohs-select4">
    <div class="ohs-select4__data">
      <select class="ohs-select4__data--select" name="sc_price_u" data-validation="required" data-validation-error-msg="ご予算が入力されていません:Empty" data-validation-error-msg-container="#js-validation-error-sc_price_u" data-validation-current-error="ご予算が入力されていません:Empty">
        <option value="">選択してください</option>
                <option value="2000万円以下" id="sc_price_u1" class="ohs-radio3__box">1000万円台</option>
                <option value="3000万円以下" id="sc_price_u2" class="ohs-radio3__box">2000万円台</option>
                <option value="4000万円以下" id="sc_price_u3" class="ohs-radio3__box">3000万円台</option>
                <option value="5000万円以下" id="sc_price_u4" class="ohs-radio3__box">4000万円台</option>
                <option value="6000万円以下" id="sc_price_u5" class="ohs-radio3__box">5000万円台</option>
                <option value="7000万円以下" id="sc_price_u6" class="ohs-radio3__box">6000万円台</option>
                <option value="8000万円以下" id="sc_price_u7" class="ohs-radio3__box">7000万円台</option>
                <option value="9000万円以下" id="sc_price_u8" class="ohs-radio3__box">8000万円台</option>
                <option value="1億円以下" id="sc_price_u9" class="ohs-radio3__box">9000万円台</option>
                <option value="1.2億円以下" id="sc_price_u10" class="ohs-radio3__box">1億円以上</option>
                <option value="" id="sc_price_u11" class="ohs-radio3__box">決まっていない</option>
      <!-- /.ohs-select__data--select --></select>
      <input type="hidden" name="sc_price_u_status" id="sc_price_u_status" value="1" data-validation-skipped="1">
    <!-- /.ohs-select --></div>
    <span id="js-validation-error-sc_price_u" class="ohs-inputText__error"></span>
  </div>
<!-- /.ohs-section --></div>
```
*/
.ohs-select4--gray {
  background-color: #f5f5f5; }

.ohs-select4 .ohs-select4__data {
  position: relative;
  width: 100%; }
  .ohs-select4 .ohs-select4__data::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-top: 2px solid #a34132;
    border-right: 2px solid #a34132;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute;
    top: 15px;
    right: 17px;
    pointer-events: none; }

.ohs-select4 .ohs-select4__data--select {
  display: block;
  font-size: 16px;
  background: #fff no-repeat 6px center/20px auto;
  color: #000;
  border: 1px solid #7a8091;
  border-radius: 5px;
  box-sizing: border-box;
  height: 44px;
  width: 100%;
  padding: 0 10px 0 35px;
  -webkit-appearance: none;
          appearance: none; }
  .ohs-select4 .ohs-select4__data--select.icon-calculator {
    background-image: url(/res/msd/img/icon-calculator.png); }
  .ohs-select4 .ohs-select4__data--select.icon-apartment-size {
    background-image: url(/res/msd/img/icon-apartment-size.png); }
  .ohs-select4 .ohs-select4__data--select.icon-floorplan {
    background-image: url(/res/msd/img/icon-floorplan.png); }
  .ohs-select4 .ohs-select4__data--select.icon-income {
    background-image: url(/res/msd/img/icon-income.png); }
  .ohs-select4 .ohs-select4__data--select.icon-fund {
    background-image: url(/res/msd/img/icon-fund.png); }
  .ohs-select4 .ohs-select4__data--select[data-validation*=required].valid {
    background-color: #fff; }
  .ohs-select4 .ohs-select4__data--select.is-error {
    border-width: 2px;
    border-color: #f99; }

/*
---
name: ご予算、ご希望の広さ、ご希望の間取り、年収
category:
  - Form
---
``` html
<div class="ohs-section" id="ohs_sc_price_u" data-formfield="">
  <div class="ohs-heading4">
    <h4 class="ohs-heading4__title">ご予算 <b class="icon-required">[必須]</b></h4>
  <!-- /.ohs-heading2 --></div>
  <div class="ohs-select4">
    <div class="ohs-select4__data">
      <select class="ohs-select4__data--select" name="sc_price_u" data-validation="required" data-validation-error-msg="ご予算が入力されていません:Empty" data-validation-error-msg-container="#js-validation-error-sc_price_u" data-validation-current-error="ご予算が入力されていません:Empty">
        <option value="">選択してください</option>
                <option value="2000万円以下" id="sc_price_u1" class="ohs-radio3__box">1000万円台</option>
                <option value="3000万円以下" id="sc_price_u2" class="ohs-radio3__box">2000万円台</option>
                <option value="4000万円以下" id="sc_price_u3" class="ohs-radio3__box">3000万円台</option>
                <option value="5000万円以下" id="sc_price_u4" class="ohs-radio3__box">4000万円台</option>
                <option value="6000万円以下" id="sc_price_u5" class="ohs-radio3__box">5000万円台</option>
                <option value="7000万円以下" id="sc_price_u6" class="ohs-radio3__box">6000万円台</option>
                <option value="8000万円以下" id="sc_price_u7" class="ohs-radio3__box">7000万円台</option>
                <option value="9000万円以下" id="sc_price_u8" class="ohs-radio3__box">8000万円台</option>
                <option value="1億円以下" id="sc_price_u9" class="ohs-radio3__box">9000万円台</option>
                <option value="1.2億円以下" id="sc_price_u10" class="ohs-radio3__box">1億円以上</option>
                <option value="" id="sc_price_u11" class="ohs-radio3__box">決まっていない</option>
      <!-- /.ohs-select__data--select --></select>
      <input type="hidden" name="sc_price_u_status" id="sc_price_u_status" value="1" data-validation-skipped="1">
    <!-- /.ohs-select --></div>
    <span id="js-validation-error-sc_price_u" class="ohs-inputText__error"></span>
  </div>
<!-- /.ohs-section --></div>
```
*/
.ohs-select5 {
  width: 82%; }
  .ohs-select5--gray {
    background-color: #f5f5f5; }
  .ohs-select5 .ohs-select5__data {
    position: relative;
    width: 100%; }
    .ohs-select5 .ohs-select5__data::after {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 8.5px solid #000;
      content: "";
      position: absolute;
      right: 9px;
      top: 16px;
      width: 0; }
  .ohs-select5 .ohs-select5__data--select {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding: 10px;
    height: 40px;
    background-image: linear-gradient(to top, #fff 0, #fff 87%, #eee 91%, #e2e2e2 95%, #c5c5c7 100%);
    border: 1px solid #7a8091;
    border-radius: 6px;
    font-size: 4vw;
    color: #757575;
    -webkit-appearance: none;
            appearance: none; }
    .ohs-select5 .ohs-select5__data--select::-ms-expand {
      display: none; }

.ohs-select6 {
  margin: 0 0 10px; }
  .ohs-select6__data {
    position: relative;
    display: block; }
    .ohs-select6__data::before {
      content: '';
      display: block;
      width: 43px;
      height: 100%;
      border-radius: 0 4px 4px 0;
      position: absolute;
      top: 0;
      right: 0;
      pointer-events: none; }
    .ohs-select6__data::after {
      content: '';
      display: block;
      width: 7px;
      height: 7px;
      border-top: 2px solid #383838;
      border-right: 2px solid #383838;
      -webkit-transform: rotate(135deg);
              transform: rotate(135deg);
      position: absolute;
      top: 15px;
      right: 17px;
      pointer-events: none; }
    .ohs-select6__data--select {
      height: 43px;
      width: 100%;
      border-radius: 4px;
      color: #383838;
      padding-left: 10px;
      border: 0.5px solid #A7A7A7;
      -webkit-appearance: none;
              appearance: none; }
      .ohs-select6__data--select:focus {
        border: 2px solid #7dbcfe;
        outline: none; }

@font-face {
  font-family: 'lg';
  src: url("/res/msd/fonts/lib/lightgallery/lg.woff2?io9a6k") format("woff2"), url("/res/msd/fonts/lib/lightgallery/lg.ttf?io9a6k") format("truetype"), url("/res/msd/fonts/lib/lightgallery/lg.woff?io9a6k") format("woff"), url("/res/msd/fonts/lib/lightgallery/lg.svg?io9a6k#lg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

.lg-icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'lg' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.lg-container {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
 Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji',
 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; }

.lg-next,
.lg-prev {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  color: #999;
  cursor: pointer;
  display: block;
  font-size: 22px;
  margin-top: -10px;
  padding: 8px 10px 9px;
  position: absolute;
  top: 50%;
  z-index: 1084;
  outline: none;
  border: none; }
  .lg-next.disabled,
  .lg-prev.disabled {
    opacity: 0 !important;
    cursor: default; }
  .lg-next:hover:not(.disabled),
  .lg-prev:hover:not(.disabled) {
    color: #fff; }
  .lg-single-item .lg-next, .lg-single-item
  .lg-prev {
    display: none; }

.lg-next {
  right: 20px; }
  .lg-next:before {
    content: '\e095'; }

.lg-prev {
  left: 20px; }
  .lg-prev:after {
    content: '\e094'; }

@-webkit-keyframes lg-right-end {
  0% {
    left: 0; }
  50% {
    left: -30px; }
  100% {
    left: 0; } }

@keyframes lg-right-end {
  0% {
    left: 0; }
  50% {
    left: -30px; }
  100% {
    left: 0; } }

@-webkit-keyframes lg-left-end {
  0% {
    left: 0; }
  50% {
    left: 30px; }
  100% {
    left: 0; } }

@keyframes lg-left-end {
  0% {
    left: 0; }
  50% {
    left: 30px; }
  100% {
    left: 0; } }

.lg-outer.lg-right-end .lg-object {
  -webkit-animation: lg-right-end 0.3s;
  animation: lg-right-end 0.3s;
  position: relative; }

.lg-outer.lg-left-end .lg-object {
  -webkit-animation: lg-left-end 0.3s;
  animation: lg-left-end 0.3s;
  position: relative; }

.lg-toolbar {
  z-index: 1082;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }
  .lg-media-overlap .lg-toolbar {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); }
  .lg-toolbar .lg-icon {
    color: #999;
    cursor: pointer;
    float: right;
    font-size: 24px;
    height: 47px;
    line-height: 27px;
    padding: 10px 0;
    text-align: center;
    width: 50px;
    text-decoration: none !important;
    outline: medium none;
    will-change: color;
    transition: color 0.2s linear;
    background: none;
    border: none;
    box-shadow: none; }
    .lg-toolbar .lg-icon.lg-icon-18 {
      font-size: 18px; }
    .lg-toolbar .lg-icon:hover {
      color: #fff; }
  .lg-toolbar .lg-close {
    position: absolute;
    top: 0;
    right: 0; }
    .lg-toolbar .lg-close:after {
      content: '\e070'; }
  .lg-toolbar .lg-maximize {
    font-size: 22px; }
    .lg-toolbar .lg-maximize:after {
      content: '\e90a'; }
  .lg-toolbar .lg-download:after {
    content: '\e0f2'; }

.lg-sub-html {
  color: #eee;
  font-size: 16px;
  padding: 10px 40px;
  text-align: center;
  z-index: 1080;
  opacity: 0;
  transition: opacity 0.2s ease-out 0s; }
  .lg-sub-html h4 {
    margin: 0;
    font-size: 13px;
    font-weight: bold; }
  .lg-sub-html p {
    font-size: 12px;
    margin: 5px 0 0; }
  .lg-sub-html a {
    color: inherit; }
    .lg-sub-html a:hover {
      text-decoration: underline; }
  .lg-media-overlap .lg-sub-html {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); }
  .lg-item .lg-sub-html {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0; }

.lg-error-msg {
  font-size: 14px;
  color: #999; }

.lg-counter {
  color: #999;
  display: inline-block;
  font-size: 16px;
  padding-left: 20px;
  padding-top: 12px;
  height: 47px;
  vertical-align: middle; }

.lg-closing .lg-toolbar,
.lg-closing .lg-prev,
.lg-closing .lg-next,
.lg-closing .lg-sub-html {
  opacity: 0;
  transition: opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear, -webkit-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear;
  transition: transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.08 cubic-bezier(0, 0, 0.25, 1) 0s, color 0.08 linear, -webkit-transform 0.08 cubic-bezier(0, 0, 0.25, 1) 0s; }

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-img-wrap,
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-video-cont,
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable) .lg-media-cont {
  opacity: 0;
  -webkit-transform: scale3d(0.5, 0.5, 0.5);
  transform: scale3d(0.5, 0.5, 0.5);
  will-change: transform, opacity;
  transition: opacity 250ms cubic-bezier(0, 0, 0.25, 1), -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s !important;
  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1), -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s !important; }

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-img-wrap,
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-video-cont,
body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item:not(.lg-zoomable).lg-complete .lg-media-cont {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1); }

.lg-icon:focus-visible {
  color: #fff;
  border-radius: 3px;
  outline: 1px dashed rgba(255, 255, 255, 0.6); }

.lg-toolbar .lg-icon:focus-visible {
  border-radius: 8px;
  outline-offset: -5px; }

.lg-outer .lg-video-cont {
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  position: relative; }
  .lg-outer .lg-video-cont .lg-object {
    width: 100% !important;
    height: 100% !important; }

.lg-outer .lg-has-iframe .lg-video-cont {
  -webkit-overflow-scrolling: touch;
  overflow: auto; }

.lg-outer .lg-video-object {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  z-index: 3; }

.lg-outer .lg-video-poster {
  z-index: 1; }

.lg-outer .lg-has-video .lg-video-object {
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.3s ease-in; }

.lg-outer .lg-has-video.lg-video-loaded .lg-video-poster,
.lg-outer .lg-has-video.lg-video-loaded .lg-video-play-button {
  opacity: 0 !important; }

.lg-outer .lg-has-video.lg-video-loaded .lg-video-object {
  opacity: 1; }

@-webkit-keyframes lg-play-stroke {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

@keyframes lg-play-stroke {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0; }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px; }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px; } }

@-webkit-keyframes lg-play-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes lg-play-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.lg-video-play-button {
  width: 18%;
  max-width: 140px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  cursor: pointer;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  will-change: opacity, transform;
  transition: opacity 0.1s, -webkit-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28);
  transition: transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s;
  transition: transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 0.1s, -webkit-transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28); }
  .lg-video-play-button:hover .lg-video-play-icon-bg,
  .lg-video-play-button:hover .lg-video-play-icon {
    opacity: 1; }

.lg-video-play-icon-bg {
  fill: none;
  stroke-width: 3%;
  stroke: #fcfcfc;
  opacity: 0.6;
  will-change: opacity;
  transition: opacity 0.12s ease-in; }

.lg-video-play-icon-circle {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  fill: none;
  stroke-width: 3%;
  stroke: rgba(30, 30, 30, 0.9);
  stroke-opacity: 1;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200; }

.lg-video-play-icon {
  position: absolute;
  width: 25%;
  max-width: 120px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  opacity: 0.6;
  will-change: opacity;
  transition: opacity 0.12s ease-in; }
  .lg-video-play-icon .lg-video-play-icon-inner {
    fill: #fcfcfc; }

.lg-video-loading .lg-video-play-icon-circle {
  -webkit-animation: lg-play-rotate 2s linear 0.25s infinite,
 lg-play-stroke 1.5s ease-in-out 0.25s infinite;
          animation: lg-play-rotate 2s linear 0.25s infinite,
 lg-play-stroke 1.5s ease-in-out 0.25s infinite; }

.lg-video-loaded .lg-video-play-button {
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(0.7);
          transform: translate(-50%, -50%) scale(0.7); }

.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap,
.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
  transition-duration: 0ms !important; }

.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  will-change: transform;
  transition: -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
  transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s;
  transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s; }

.lg-outer.lg-use-transition-for-zoom.lg-zoom-drag-transition .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  will-change: transform;
  transition: -webkit-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s, -webkit-transform 0.8s cubic-bezier(0, 0, 0.25, 1) 0s; }

.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image,
.lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  transition: opacity 0.15s, -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s !important;
  transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s !important;
  transition: transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s, opacity 0.15s, -webkit-transform 0.5s cubic-bezier(0.12, 0.415, 0.01, 1.19) 0s !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.no-transition,
  .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.no-transition {
    transition: none !important; }
  .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition,
  .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition {
    -webkit-transform: scale3d(1, 1, 1) translate3d(-50%, -50%, 0px) !important;
            transform: scale3d(1, 1, 1) translate3d(-50%, -50%, 0px) !important;
    max-width: none !important;
    max-height: none !important;
    top: 50% !important;
    left: 50% !important; }
  .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-x,
  .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-x {
    -webkit-transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0px) !important;
            transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0px) !important;
    top: 0 !important;
    left: 50% !important;
    max-width: none !important;
    max-height: none !important; }
  .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image.reset-transition-y,
  .lg-outer .lg-item.lg-complete.lg-zoomable .lg-dummy-img.reset-transition-y {
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, -50%, 0px) !important;
            transform: scale3d(1, 1, 1) translate3d(0, -50%, 0px) !important;
    top: 50% !important;
    left: 0% !important;
    max-width: none !important;
    max-height: none !important; }

.lg-icon.lg-zoom-in:after {
  content: '\e311'; }

.lg-actual-size .lg-icon.lg-zoom-in {
  opacity: 1;
  pointer-events: auto; }

.lg-icon.lg-actual-size {
  font-size: 20px; }
  .lg-icon.lg-actual-size:after {
    content: '\e033'; }

.lg-icon.lg-zoom-out {
  opacity: 0.5;
  pointer-events: none; }
  .lg-icon.lg-zoom-out:after {
    content: '\e312'; }
  .lg-zoomed .lg-icon.lg-zoom-out {
    opacity: 1;
    pointer-events: auto; }

.lg-outer[data-lg-slide-type='video'] .lg-zoom-in,
.lg-outer[data-lg-slide-type='video'] .lg-actual-size,
.lg-outer[data-lg-slide-type='video'] .lg-zoom-out, .lg-outer[data-lg-slide-type='iframe'] .lg-zoom-in,
.lg-outer[data-lg-slide-type='iframe'] .lg-actual-size,
.lg-outer[data-lg-slide-type='iframe'] .lg-zoom-out, .lg-outer.lg-first-slide-loading .lg-zoom-in,
.lg-outer.lg-first-slide-loading .lg-actual-size,
.lg-outer.lg-first-slide-loading .lg-zoom-out {
  opacity: 0.75;
  pointer-events: none; }

.lg-outer .lg-thumb-outer {
  background-color: #0d0a0a;
  width: 100%;
  max-height: 350px;
  overflow: hidden;
  float: left; }
  .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab; }
  .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
    cursor: move;
    cursor: -o-grabbing;
    cursor: -ms-grabbing;
    cursor: grabbing; }
  .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
    transition-duration: 0s !important; }
  .lg-outer .lg-thumb-outer.lg-rebuilding-thumbnails .lg-thumb {
    transition-duration: 0s !important; }
  .lg-outer .lg-thumb-outer.lg-thumb-align-middle {
    text-align: center; }
  .lg-outer .lg-thumb-outer.lg-thumb-align-left {
    text-align: left; }
  .lg-outer .lg-thumb-outer.lg-thumb-align-right {
    text-align: right; }

.lg-outer.lg-single-item .lg-thumb-outer {
  display: none; }

.lg-outer .lg-thumb {
  padding: 5px 0;
  height: 100%;
  margin-bottom: -5px;
  display: inline-block;
  vertical-align: middle; }
  @media (min-width: 768px) {
    .lg-outer .lg-thumb {
      padding: 10px 0; } }

.lg-outer .lg-thumb-item {
  cursor: pointer;
  float: left;
  overflow: hidden;
  height: 100%;
  border-radius: 2px;
  margin-bottom: 5px;
  will-change: border-color; }
  @media (min-width: 768px) {
    .lg-outer .lg-thumb-item {
      border-radius: 4px;
      border: 2px solid #fff;
      transition: border-color 0.25s ease; } }
  .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
    border-color: #a90707; }
  .lg-outer .lg-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

.lg-outer.lg-can-toggle .lg-item {
  padding-bottom: 0; }

.lg-outer .lg-toggle-thumb:after {
  content: '\e1ff'; }

.lg-outer.lg-animate-thumb .lg-thumb {
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

.lg-group:after {
  content: '';
  display: table;
  clear: both; }

.lg-container {
  display: none;
  outline: none; }
  .lg-container.lg-show {
    display: block; }

.lg-on {
  scroll-behavior: unset; }

.lg-overlay-open {
  overflow: hidden; }

.lg-toolbar,
.lg-prev,
.lg-next,
.lg-pager-outer,
.lg-hide-sub-html .lg-sub-html {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; }

.lg-show-in .lg-toolbar,
.lg-show-in .lg-prev,
.lg-show-in .lg-next,
.lg-show-in .lg-pager-outer {
  opacity: 1; }

.lg-show-in.lg-hide-sub-html .lg-sub-html {
  opacity: 1; }

.lg-show-in .lg-hide-items .lg-prev {
  opacity: 0;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0); }

.lg-show-in .lg-hide-items .lg-next {
  opacity: 0;
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0); }

.lg-show-in .lg-hide-items .lg-toolbar {
  opacity: 0;
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0); }

.lg-show-in .lg-hide-items.lg-hide-sub-html .lg-sub-html {
  opacity: 0;
  -webkit-transform: translate3d(0, 20px, 0);
  transform: translate3d(0, 20px, 0); }

.lg-outer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  text-align: left;
  opacity: 0.001;
  outline: none;
  will-change: auto;
  overflow: hidden;
  transition: opacity 0.15s ease 0s; }
  .lg-outer * {
    box-sizing: border-box; }
  .lg-outer.lg-zoom-from-image {
    opacity: 1; }
  .lg-outer.lg-visible {
    opacity: 1; }
  .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-prev-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-next-slide, .lg-outer.lg-css3 .lg-item:not(.lg-start-end-progress).lg-current {
    transition-duration: inherit !important;
    transition-timing-function: inherit !important; }
  .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
    transition-duration: 0s !important;
    opacity: 1; }
  .lg-outer.lg-grab img.lg-object {
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab; }
  .lg-outer.lg-grabbing img.lg-object {
    cursor: move;
    cursor: -o-grabbing;
    cursor: -ms-grabbing;
    cursor: grabbing; }
  .lg-outer .lg-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
  .lg-outer .lg-inner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    transition: opacity 0s;
    white-space: nowrap; }
  .lg-outer .lg-item {
    display: none !important; }
    .lg-outer .lg-item:not(.lg-start-end-progress) {
      background: url("/res/msd/img/lib/lightgallery/loading.gif") no-repeat scroll center center transparent; }
  .lg-outer.lg-css3 .lg-prev-slide,
  .lg-outer.lg-css3 .lg-current,
  .lg-outer.lg-css3 .lg-next-slide {
    display: inline-block !important; }
  .lg-outer.lg-css .lg-current {
    display: inline-block !important; }
  .lg-outer .lg-item,
  .lg-outer .lg-img-wrap {
    display: inline-block;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%; }
    .lg-outer .lg-item:before,
    .lg-outer .lg-img-wrap:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle; }
  .lg-outer .lg-img-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    white-space: nowrap;
    font-size: 0; }
  .lg-outer .lg-item.lg-complete {
    background-image: none; }
  .lg-outer .lg-item.lg-current {
    z-index: 1060; }
  .lg-outer .lg-object {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: relative; }
  .lg-outer .lg-empty-html.lg-sub-html,
  .lg-outer .lg-empty-html .lg-sub-html {
    display: none; }
  .lg-outer.lg-hide-download .lg-download {
    opacity: 0.75;
    pointer-events: none; }
  .lg-outer .lg-first-slide .lg-dummy-img {
    position: absolute;
    top: 50%;
    left: 50%; }
  .lg-outer.lg-components-open:not(.lg-zoomed) .lg-components {
    -webkit-transform: translate3d(0, 0%, 0);
    transform: translate3d(0, 0%, 0);
    opacity: 1; }
  .lg-outer.lg-components-open:not(.lg-zoomed) .lg-sub-html {
    opacity: 1;
    transition: opacity 0.2s ease-out 0.15s; }
  .lg-outer .lg-media-cont {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    position: relative; }
    .lg-outer .lg-media-cont .lg-object {
      width: 100% !important;
      height: 100% !important; }
  .lg-outer .lg-has-iframe .lg-media-cont {
    -webkit-overflow-scrolling: touch;
    overflow: auto; }

.lg-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background-color: #000;
  opacity: 0;
  will-change: auto;
  transition: opacity 333ms ease-in 0s; }
  .lg-backdrop.in {
    opacity: 1; }

.lg-css3.lg-no-trans .lg-prev-slide,
.lg-css3.lg-no-trans .lg-next-slide,
.lg-css3.lg-no-trans .lg-current {
  transition: none 0s ease 0s !important; }

.lg-css3.lg-use-css3 .lg-item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.lg-css3.lg-fade .lg-item {
  opacity: 0; }
  .lg-css3.lg-fade .lg-item.lg-current {
    opacity: 1; }
  .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
    transition: opacity 0.1s ease 0s; }

.lg-css3.lg-use-css3 .lg-item.lg-start-progress {
  transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s; }

.lg-css3.lg-use-css3 .lg-item.lg-start-end-progress {
  transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s; }

.lg-css3.lg-slide.lg-use-css3 .lg-item {
  opacity: 0; }
  .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0); }
  .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; }
  .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
    transition: opacity 0.1s ease 0s, -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s;
    transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
    transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s, -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s; }

.lg-container {
  display: none; }
  .lg-container.lg-show {
    display: block; }
  .lg-container.lg-dragging-vertical .lg-backdrop {
    transition-duration: 0s !important; }
  .lg-container.lg-dragging-vertical .lg-css3 .lg-item.lg-current {
    transition-duration: 0s !important;
    opacity: 1; }

.lg-inline .lg-backdrop,
.lg-inline .lg-outer {
  position: absolute; }

.lg-inline .lg-backdrop {
  z-index: 1; }

.lg-inline .lg-outer {
  z-index: 2; }

.lg-inline .lg-maximize:after {
  content: '\e909'; }

.lg-components {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  will-change: transform;
  transition: -webkit-transform 0.35s ease-out 0s;
  transition: transform 0.35s ease-out 0s;
  transition: transform 0.35s ease-out 0s, -webkit-transform 0.35s ease-out 0s;
  z-index: 1080;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0; }

.msds-contentsnav {
  padding-top: 60px; }
  @media screen and (max-width: 767px) {
    .msds-contentsnav {
      display: block;
      width: 100%;
      padding-top: 0; } }
  .msds-contentsnav--bottom {
    margin-bottom: 60px; }
    @media screen and (max-width: 767px) {
      .msds-contentsnav--bottom {
        margin-bottom: 0; } }
  .msds-contentsnav__inner {
    display: flex;
    width: 100%;
    max-width: 990px;
    background-color: #f2f2f2;
    margin: 0 auto; }
    @media screen and (max-width: 767px) {
      .msds-contentsnav__inner {
        display: block;
        width: 100%;
        max-width: 100%; } }
  .msds-contentsnav__head {
    flex-basis: 20%;
    max-width: 200px;
    background-color: #e3e3e3;
    padding: 20px; }
    @media screen and (max-width: 767px) {
      .msds-contentsnav__head {
        display: block;
        width: 100%;
        max-width: 100%;
        background-color: #f2f2f2;
        padding-bottom: 0; } }
  .msds-contentsnav__heading {
    font-size: 16px;
    font-weight: bold; }
    @media screen and (max-width: 767px) {
      .msds-contentsnav__heading {
        font-size: 14px; } }
  .msds-contentsnav__body {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px 20px 0; }
    @media screen and (max-width: 767px) {
      .msds-contentsnav__body {
        display: flex; } }
  .msds-contentsnav__item {
    flex-basis: 25%;
    max-width: 25%;
    padding-right: 20px;
    margin-bottom: 20px; }
    @media screen and (max-width: 767px) {
      .msds-contentsnav__item {
        flex-basis: 50%;
        max-width: 50%; } }
    .msds-contentsnav__item:last-child {
      padding-right: 0; }
    @media screen and (max-width: 767px) {
      .msds-contentsnav__item:nth-child(odd) {
        padding-right: 10px; } }
    @media screen and (max-width: 767px) {
      .msds-contentsnav__item:nth-child(even) {
        padding-left: 10px;
        padding-right: 0; } }
    .msds-contentsnav__item.is-active .ohd-contentsnav__link {
      font-weight: bold;
      color: #999; }
    .msds-contentsnav__item.is-active .ohd-contentsnav__text {
      text-decoration: none; }
  .msds-contentsnav__link {
    width: 100%;
    display: table;
    color: #000; }
  .msds-contentsnav__img {
    width: 70px;
    height: auto;
    display: table-cell; }
    .msds-contentsnav__img:hover {
      opacity: 0.8; }
    .msds-contentsnav__img img {
      background-color: #fff; }
  .msds-contentsnav__text {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    text-decoration: underline;
    word-wrap: break-word;
    padding-left: 10px; }
    .msds-contentsnav__text:hover {
      text-decoration: none; }
  @media (min-width: 768px), print {
    .msds-contentsnav--type2 .msds-contentsnav__item {
      flex-basis: 33.33%;
      max-width: 33.33%; } }
  .msds-contentsnav--type2 .msds-contentsnav__more {
    flex-basis: 100%;
    text-align: right;
    margin-bottom: 20px; }
  .msds-contentsnav--type2 .msds-contentsnav__moreLink {
    flex-basis: 100%;
    font-size: 14px;
    text-align: right; }

/*
---
name: 3カラムパーツ
category:
  - Colums
---

```html
    <div class="msds-columns">
      <div class="msds-columns__item">
        <div class="msds-columnItem">
          <h3 class="msds-columnItem__heading">
            <a class="msds-columnItem__headinglink"href="">
              <span class="msds-columnItem__subheading">オープンレジデンシア</span>神楽坂ウエストテラス
            </a>
          </h3>
          <div class="msds-columnItem__image">
            <a class="msds-columnItem__imageExpand" href="#">
              <img src="https://dummyimage.com/960x640/999/ccc" alt="">
            </a>
          </div>
          <div class="msds-columnItem__body">
            <ul class="msds-list">
              <li class="msds-list__item">
                <dt class="msds-list__head">所在地：</dt>
                <dd class="msds-list__data">東京都新宿区神楽坂</dd>
              </li>
              <li class="msds-list__item">
                <dt class="msds-list__head">交通機関：</dt>
                <dd class="msds-list__data">大江戸線「牛込神楽坂」駅徒歩6分、有楽町線・南北線「市ヶ谷」駅徒歩8分</dd>
              </li>
            </ul>
            <div class="msds-box">
              <p class="msds-box__date">2018/08/24</p>
              <p class="msds-box__text">第2期事前ご案内会開催！ご来場予約、好評受付中！</p>
            </div>
            <ul class="msds-linklist2">
              <li class="msds-linklist2__item">
                <a class="msds-linklist2__link" href="">PDFカタログ（21MB）</a>
              </li>
              <li class="msds-linklist2__item">
                <a class="msds-linklist2__link" href="">プラン一覧表（3.21MB）</a>
              </li>
              <li class="msds-linklist2__item">
                <a class="msds-linklist2__link" href="">購入者インタビュー</a>
              </li>
            </ul>
          <!-- msds-columnItem__body --></div>
          <div class="msds-columnItem__footer">
            <div class="msds-buttonlist">
              <div class="msds-button">
                <a class="msds-button__link" href="">来場予約</a>
             </div>
              <div class="msds-button">
                <a class="msds-button__link" href="">30分見学</a>
              </div>
            </div>
          <!-- msds-columnItem__footer --></div>
        <!-- msds-columnItem --></div>
      <!-- msds-columns__item --></div>
    <!-- msds-columns --></div>

```
*/
@media screen and (max-width: 767px) {
  .msds-columns {
    margin-bottom: 2rem; } }

@media (min-width: 768px), print {
  .msds-columns {
    margin-bottom: 2.5rem; } }

@media (min-width: 768px), print {
  .msds-columns {
    display: flex;
    flex-wrap: nowrap;
    margin-right: auto;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: space-between; }
    .msds-columns__item {
      display: block;
      box-sizing: border-box;
      min-width: 0;
      word-wrap: break-word;
      overflow-wrap: break-word;
      flex-basis: 100%;
      flex-shrink: 0;
      max-width: 100%;
      flex-basis: calc(33.33333% - 2.2%); }
      .msds-columns__item > *:last-child {
        margin-bottom: 0; }
      .msds-columns__item:not(:last-child) {
        margin-right: 0; }
      .msds-columns__item:nth-child(n + 4) {
        margin-top: 3.3%; }
      .msds-columns__item:nth-child(3n + 2):last-child {
        margin-right: calc(33.33333% - 2.2% + 3.3%); } }

@media screen and (max-width: 767px) {
  .msds-columns__item {
    margin-bottom: 10px; }
    .msds-columns__item:last-child {
      margin-bottom: 0; }
  .msds-columns__item--mgb {
    margin-bottom: 30px; }
    .msds-columns__item--mgb:last-child {
      margin-bottom: 0; } }

@media screen and (max-width: 767px) {
  .msds-columns .msds-columns2 {
    margin-bottom: 2rem; } }

@media (min-width: 768px), print {
  .msds-columns .msds-columns2 {
    margin-bottom: 2.5rem; } }

@media (min-width: 768px), print {
  .msds-columns .msds-columns2 {
    display: flex;
    flex-wrap: nowrap;
    margin-right: auto;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: space-between; }
    .msds-columns .msds-columns2__item {
      box-sizing: border-box;
      min-width: 0;
      word-wrap: break-word;
      overflow-wrap: break-word;
      flex-basis: 100%;
      flex-shrink: 0;
      max-width: 100%;
      flex-basis: calc(50% - 1.65%); }
      .msds-columns .msds-columns2__item:not(:last-child) {
        margin-right: 0; }
      .msds-columns .msds-columns2__item:nth-child(n + 3) {
        margin-top: 3.3%; } }

@media screen and (max-width: 767px) {
  .msds-columns .msds-columns2__item {
    margin-bottom: 15px; } }

.msds-columns .msds-columns2__columnItem > *:last-child {
  margin-bottom: 0; }

@media (min-width: 768px), print {
  .msds-columns .msds-columns2--pickup {
    margin-bottom: 20px; }
    .msds-columns .msds-columns2--pickup__item {
      box-sizing: border-box;
      min-width: 0;
      word-wrap: break-word;
      overflow-wrap: break-word;
      flex-basis: 100%;
      flex-shrink: 0;
      max-width: 100%;
      flex-basis: calc(50% - 10px); }
      .msds-columns .msds-columns2--pickup__item:not(:last-child) {
        margin-right: 0; } }

@media screen and (max-width: 767px) {
  .msds-columns .msds-columns2--pickup {
    margin-bottom: 15px; } }

/*
---
name: 1カラムパーツ
category:
  - Colums
---

```html


```
*/
@media screen and (max-width: 767px) {
  .msds-columns3 {
    margin-bottom: 2rem; } }

@media (min-width: 768px), print {
  .msds-columns3 {
    margin-bottom: 2.5rem; } }

.msds-columns3--gray {
  background-color: #EDEDED;
  padding: 10px; }
  @media screen and (max-width: 767px) {
    .msds-headerArea2 + .msds-columns3--gray {
      padding-top: 0; } }
  @media (min-width: 768px), print {
    .msds-columns3--gray {
      padding: 10px 10px 40px; } }

@media (min-width: 768px), print {
  .msds-columns3 {
    display: flex;
    flex-wrap: nowrap;
    margin-right: auto;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: space-between; }
    .msds-columns3__item {
      box-sizing: border-box;
      min-width: 0;
      word-wrap: break-word;
      overflow-wrap: break-word;
      flex-basis: 100%;
      flex-shrink: 0;
      max-width: 100%;
      flex-basis: calc(100% - 0%); }
      .msds-columns3__item:not(:last-child) {
        margin-right: 0; }
      .msds-columns3__item:nth-child(n + 2) {
        margin-top: 3.3%; } }

@media screen and (max-width: 767px) {
  .msds-columns3__item {
    margin-bottom: 15px; } }

.msds-columns3__columnItem > *:last-child {
  margin-bottom: 0; }

.msds-columns3--list {
  font-family: "Hiragino Kaku Gothic ProN", Roboto, Meiryo, sans-serif; }
  @media screen and (max-width: 767px) {
    .msds-columns3--list {
      margin-left: -15px;
      margin-right: -15px; } }
  @media (min-width: 768px), print {
    .msds-columns3--list {
      display: block; }
      .msds-columns3--list .msds-columns3__item + .msds-columns3__item {
        margin-top: 10px; } }

/*
---
name: カラムアイテム
category:
  - Colums
---

```html


```
*/
.msds-columnItem {
  position: relative; }
  @media screen and (max-width: 767px) {
    .msds-columnItem {
      border: 1px solid #ccc; } }
  @media (min-width: 768px), print {
    .msds-columnItem {
      display: flex;
      flex-direction: column;
      height: 100%; }
      .msds-columnItem--link:hover {
        opacity: 0.8; }
      .msds-columnItem--link .msds-linklist2 {
        position: relative;
        z-index: 2; } }
  .msds-columnItem__heading {
    position: relative;
    background-color: #262626;
    color: #fff;
    line-height: 1.5;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 10px;
    box-sizing: border-box; }
    @media screen and (max-width: 767px) {
      .msds-columnItem__heading {
        background-color: transparent;
        padding-top: 36px;
        font-size: 20px; } }
  .msds-columnItem__subheading {
    display: block;
    font-size: 11px; }
    @media screen and (max-width: 767px) {
      .msds-columnItem__subheading {
        font-size: 15px;
        border-bottom: 1px solid #000;
        width: -webkit-fit-content;
        width: fit-content;
        line-height: 1.5; } }
  .msds-columnItem__headinglink {
    color: #fff;
    display: block;
    text-decoration: underline; }
    .msds-columnItem__headinglink:hover {
      text-decoration: none; }
  .msds-columnItem__headinglabel {
    text-decoration: none;
    line-height: 1.8; }
    @media screen and (max-width: 767px) {
      .msds-columnItem__headinglabel {
        color: #000;
        border-bottom: 1px solid #000; } }
  .msds-columnItem__image {
    display: block;
    min-height: 1%; }
    .msds-columnItem__image:hover {
      opacity: 0.8; }
  .msds-columnItem__pricelistGroup {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px 0; }
    @media (min-width: 768px), print {
      .msds-columnItem__pricelistGroup {
        min-height: 66px; } }
  .msds-columnItem__pricelistItem {
    color: #cc0000;
    font-weight: bold;
    font-size: 16px; }
  .msds-columnItem__pricelistNote {
    font-weight: normal;
    font-size: 12px; }
  .msds-columnItem__number {
    font-family: Helvetica;
    font-size: 18px; }
  .msds-columnItem__label {
    text-align: center;
    width: 60px;
    height: 18px;
    line-height: 18px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 11px; }
    .msds-columnItem__label--red {
      background-color: #d0050d; }
    .msds-columnItem__label--black {
      background-color: #000; }
    .msds-columnItem__label--blue {
      background-color: #b0daf4;
      color: #000; }
    @media screen and (max-width: 767px) {
      .msds-columnItem__label {
        width: auto;
        padding: 0 5px;
        min-width: 50px; } }
  .msds-columnItem__note {
    color: #666;
    font-size: 14px;
    line-height: 1.4; }
  .msds-columnItem__em {
    font-weight: bold; }
  .msds-columnItem__body {
    padding: 0 15px; }
    .msds-columnItem__body > *:last-child {
      margin-bottom: 0; }
  .msds-columnItem__footer {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 15px 0;
    z-index: 2; }
    @media (min-width: 768px), print {
      .msds-columnItem__footer {
        margin-top: auto; } }
    @media screen and (max-width: 767px) {
      .msds-columnItem__footer {
        padding: 15px; } }
  .msds-columnItem__bodyLink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1; }

/*
---
name: カラムアイテム2
category:
  - Colums
---

```html


```
*/
.msds-columnItem2 {
  position: relative; }
  @media (min-width: 768px), print {
    .msds-columnItem2 {
      display: flex;
      flex-wrap: wrap; }
      .msds-columnItem2__header {
        flex-basis: 100%; }
      .msds-columnItem2__container {
        width: 100%;
        display: flex; }
      .msds-columnItem2__image {
        flex-basis: 300px;
        flex-shrink: 1;
        display: block; }
        .msds-columnItem2__image:hover {
          opacity: 0.8; }
      .msds-columnItem2__body {
        margin-left: 30px;
        flex-basis: 630px;
        flex-shrink: 1; }
      .msds-columnItem2--link:hover {
        opacity: 0.8; } }
  @media screen and (max-width: 767px) {
    .msds-columnItem2 {
      border: 1px solid #ccc; } }
  .msds-columnItem2__heading {
    position: relative;
    background-color: #262626;
    color: #fff;
    line-height: 1.5;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 10px;
    box-sizing: border-box;
    margin-bottom: 20px; }
    @media screen and (max-width: 767px) {
      .msds-columnItem2__heading {
        font-size: 13px;
        margin-bottom: 0; } }
  .msds-columnItem2__subheading {
    display: block;
    font-size: 11px; }
    @media screen and (max-width: 767px) {
      .msds-columnItem2__subheading {
        font-size: 9px; } }
  .msds-columnItem2__headinglink {
    color: #fff;
    text-decoration: underline; }
    .msds-columnItem2__headinglink:hover {
      text-decoration: none; }
  .msds-columnItem2__pricelistGroup {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px 0; }
    @media (min-width: 768px), print {
      .msds-columnItem2__pricelistGroup {
        min-height: 66px; } }
  .msds-columnItem2__pricelistItem {
    color: #cc0000;
    font-weight: bold;
    font-size: 16px; }
  .msds-columnItem2__pricelistNote {
    font-weight: normal;
    font-size: 12px; }
  .msds-columnItem2__number {
    font-family: Helvetica;
    font-size: 18px; }
  .msds-columnItem2__label {
    text-align: center;
    width: 60px;
    height: 18px;
    line-height: 18px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 11px; }
    .msds-columnItem2__label--red {
      background-color: #d0050d; }
    .msds-columnItem2__label--black {
      background-color: #000; }
    .msds-columnItem2__label--blue {
      background-color: #b0daf4;
      color: #000; }
    @media screen and (max-width: 767px) {
      .msds-columnItem2__label {
        width: auto;
        padding: 0 5px;
        min-width: 50px; } }
  .msds-columnItem2__note {
    color: #666;
    font-size: 14px;
    line-height: 1.4; }
  .msds-columnItem2__em {
    font-weight: bold; }
  .msds-columnItem2__body {
    padding: 0 15px; }
    .msds-columnItem2__body > *:last-child {
      margin-bottom: 0; }
  .msds-columnItem2__footer {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 15px 0;
    width: 100%;
    z-index: 2; }
    @media screen and (max-width: 767px) {
      .msds-columnItem2__footer {
        justify-content: center;
        padding: 15px; } }
  .msds-columnItem2__bodyLink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1; }

/*
---
name: カラムアイテム3
category:
  - Colums
---

```html


```
*/
.msds-columnItem3 {
  position: relative; }
  @media screen and (max-width: 767px) {
    .msds-columnItem3 {
      border: 1px solid #ccc; } }
  @media (min-width: 768px), print {
    .msds-columnItem3 {
      display: flex;
      flex-direction: column;
      height: 100%; }
      .msds-columnItem3--link:hover {
        opacity: 0.8; } }
  .msds-columnItem3__link {
    color: #000;
    min-height: 1%; }
  .msds-columnItem3__heading {
    position: relative;
    background-color: #262626;
    color: #fff;
    line-height: 1.5;
    font-weight: bold;
    font-size: 16px;
    padding: 5px 10px;
    box-sizing: border-box; }
    @media screen and (max-width: 767px) {
      .msds-columnItem3__heading {
        font-size: 13px; } }
  .msds-columnItem3__subheading {
    display: block;
    font-size: 11px; }
    @media screen and (max-width: 767px) {
      .msds-columnItem3__subheading {
        font-size: 9px; } }
  .msds-columnItem3__image {
    display: block; }
    .msds-columnItem3__image:hover {
      opacity: 0.8; }
  .msds-columnItem3__pricelistGroup {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px 0; }
    @media (min-width: 768px), print {
      .msds-columnItem3__pricelistGroup {
        min-height: 66px; } }
    @media screen and (max-width: 767px) {
      .msds-columnItem3__pricelistGroup {
        margin: 10px 0;
        padding: 0; } }
  .msds-columnItem3__pricelistItem {
    color: #cc0000;
    font-weight: bold;
    font-size: 16px; }
    .msds-columnItem3__pricelistItem [class^="oh-icon"] {
      font-size: 17px;
      margin-right: 3px; }
  .msds-columnItem3__pricelistNote {
    font-weight: normal;
    font-size: 12px; }
    @media screen and (max-width: 767px) {
      .msds-columnItem3__pricelistNote {
        color: #C3C3C3; } }
  .msds-columnItem3__number {
    font-family: Helvetica;
    font-size: 18px; }
  .msds-columnItem3__label {
    text-align: center;
    width: 60px;
    height: 18px;
    line-height: 18px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 11px; }
    .msds-columnItem3__label--red {
      background-color: #d0050d; }
    .msds-columnItem3__label--black {
      background-color: #000; }
    .msds-columnItem3__label--blue {
      background-color: #1150a5;
      color: #fff; }
    @media screen and (max-width: 767px) {
      .msds-columnItem3__label {
        left: 10px;
        right: auto;
        top: 10px;
        width: auto;
        padding: 0 5px;
        border-radius: 3px;
        min-width: 50px; } }
  .msds-columnItem3__note {
    color: #666;
    font-size: 14px;
    flex-basis: 100%;
    line-height: 1.4; }
    @media screen and (max-width: 767px) {
      .msds-columnItem3__note {
        font-size: 13px;
        margin-top: 10px;
        padding: 12px;
        border-top: 1px solid #eee; } }
  .msds-columnItem3__em {
    font-weight: bold; }
  .msds-columnItem3__body {
    padding: 0 15px;
    margin-bottom: 15px; }
    @media screen and (max-width: 767px) {
      .msds-columnItem3__body {
        margin-bottom: 0; } }
  .msds-columnItem3__footer {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 15px 0;
    z-index: 2; }
    @media (min-width: 768px), print {
      .msds-columnItem3__footer {
        margin-top: auto; } }
    @media screen and (max-width: 767px) {
      .msds-columnItem3__footer {
        padding: 0 15px 15px;
        width: 100%; } }
  .msds-columnItem3__bodyLink {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1; }
  @media screen and (max-width: 767px) {
    .msds-columnItem3__container {
      display: flex;
      flex-direction: row; }
      .msds-columnItem3__container .msds-columnItem3__image {
        flex-basis: 35%;
        padding: 10px; }
      .msds-columnItem3__container .msds-columnItem3__body {
        flex-basis: 60%;
        padding: 0; }
      .msds-columnItem3__container .msds-columnItem3__pricelistItem {
        font-size: 10px; }
      .msds-columnItem3__container .msds-columnItem3__number {
        font-size: 15px; }
      .msds-columnItem3__container .msds-columnItem3__pricelistNote {
        font-size: 10px; }
      .msds-columnItem3__container .msds-box {
        margin: 0;
        border-top: 0;
        padding: 0;
        background-color: inherit; }
        .msds-columnItem3__container .msds-box__itemBody {
          font-size: 11px; } }

/*
---
name: カラムアイテム4
category:
  - Colums
---

```html


```
*/
.msds-columnItem4 {
  display: block;
  border: 1px solid #dfdfdf;
  background: #fff; }
  .msds-columnItem4:hover .msds-columnItem4__image img {
    -webkit-transform: scale(1.03);
            transform: scale(1.03); }
  .msds-columnItem4__image {
    overflow: hidden; }
    .msds-columnItem4__image img {
      transition: -webkit-transform 200ms ease-in-out;
      transition: transform 200ms ease-in-out;
      transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
      width: 100%; }
  .msds-columnItem4__heading {
    position: relative;
    display: flex;
    flex-flow: column;
    font-weight: bold;
    padding: 15px 40px 0 20px;
    color: #000; }
    .msds-columnItem4__heading::after {
      content: "";
      display: block;
      width: 60px;
      height: 2px;
      background-color: #d0050d;
      margin-top: 10px; }
    @media screen and (max-width: 767px) {
      .msds-columnItem4__heading {
        font-size: 15px; } }
  .msds-columnItem4__text {
    font-size: 13px;
    line-height: 1.5;
    padding: 20px;
    color: #000; }
    @media (min-width: 768px), print {
      .msds-columnItem4__text {
        font-size: 14px;
        padding-top: 25px;
        padding-bottom: 25px; } }
  .msds-columnItem4__arrow {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    width: 30px;
    height: 30px;
    right: 0; }
    .msds-columnItem4__arrow::after {
      content: "";
      display: block;
      position: relative;
      border: 2px solid #fff;
      border-width: 2px 2px 0 0;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
      width: 8px;
      height: 8px; }
  @media screen and (max-width: 767px) {
    .msds-columnItem4 {
      margin-bottom: 15px; } }

/*
---
name: 4カラムパーツ
category:
  - Colums
---

```html


```
*/
@media screen and (max-width: 767px) {
  .msds-columns4 {
    margin-bottom: 2rem; } }

@media (min-width: 768px), print {
  .msds-columns4 {
    margin-bottom: 2.5rem; } }

.msds-columns4-columns {
  display: flex;
  flex-wrap: nowrap;
  margin-right: auto;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen and (max-width: 767px) {
    .msds-columns4-columns {
      margin-bottom: 2rem; } }
  @media (min-width: 768px), print {
    .msds-columns4-columns {
      margin-bottom: 2.5rem; } }
  .msds-columns4-columns__item {
    box-sizing: border-box;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-basis: 100%;
    flex-shrink: 0;
    max-width: 100%; }
    .msds-columns4-columns__item:not(:last-child) {
      margin-right: 0; }
  @media screen and (max-width: 767px) {
    .msds-columns4-columns__item {
      flex-basis: calc(50% - 7.5px); }
      .msds-columns4-columns__item:nth-child(n + 3) {
        margin-top: 15px; } }
  @media (min-width: 768px), print {
    .msds-columns4-columns__item {
      flex-basis: calc(25% - 2.475%); }
      .msds-columns4-columns__item:nth-child(n + 5) {
        margin-top: 3.3%; }
      .msds-columns4-columns__item:nth-child(4n + 2):last-child {
        margin-right: calc((25% - 2.475% + 3.3%) * 2); }
      .msds-columns4-columns__item:nth-child(4n + 3):last-child {
        margin-right: calc(25% - 2.475% + 3.3%); }
    .msds-columns4-columns--pickup__item {
      flex-basis: calc(25% - 15px); } }

.msds-columns4-columnItem {
  position: relative;
  display: block; }
  .msds-columns4-columnItem > *:last-child {
    margin-bottom: 0; }
  @media (min-width: 768px), print {
    .msds-columns4-columnItem:hover .msds-columns4-columnItem__image img {
      transition: -webkit-transform 200ms ease-in-out;
      transition: transform 200ms ease-in-out;
      transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
      -webkit-transform: scale(1.03);
              transform: scale(1.03); } }
  .msds-columns4-columnItem__image {
    margin-bottom: 0.625rem;
    overflow: hidden; }
  .msds-columns4-columnItem__heading {
    position: absolute;
    bottom: 23px;
    color: #fff;
    line-height: 1.4;
    font-weight: bold;
    width: 100%;
    padding: 0 20px;
    z-index: 2; }
    @media screen and (max-width: 767px) {
      .msds-columns4-columnItem__heading {
        font-size: 15px; } }
    .msds-columns4-columnItem__heading::after {
      content: "";
      display: block;
      width: 60px;
      height: 2px;
      background-color: #d0050d;
      margin-top: 10px; }
  .msds-columns4-columnItem__imageExpand {
    cursor: pointer;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: block;
    position: relative; }
    .msds-columns4-columnItem__imageExpand[disabled] {
      pointer-events: none; }
    .msds-columns4-columnItem__imageExpand::after {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      width: 32px;
      height: 32px;
      background: rgba(0, 0, 0, 0.8) url(/res/common/img/components/icon_expand_white.svg) no-repeat 0 0;
      background-size: contain; }
  .msds-columns4-columnItem__headingLink {
    color: inherit;
    text-decoration: underline;
    display: inline; }
    .msds-columns4-columnItem__headingLink:hover {
      text-decoration: none; }
  .msds-columns4-columnItem__body {
    font-size: 14px; }
    .msds-columns4-columnItem__body > *:last-child {
      margin-bottom: 0; }
  @media (min-width: 768px), print {
    .msds-columns4-columnItem__body {
      font-size: 14px; } }

.msds-columns4--pickup {
  margin-bottom: 20px; }
  @media screen and (max-width: 767px) {
    .msds-columns4--pickup {
      margin-bottom: 15px; } }

/*
---
name: カラムアイテム5
category:
  - Colums
---

```html


```
*/
.msds-columnItem5 {
  background: #fff;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);
  position: relative;
  overflow: hidden;
  display: block;
  color: #000; }
  .msds-columnItem5:before {
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0; }
  .msds-columnItem5--red:before,
  .msds-columnItem5--red .msds-columnItem5__label {
    background-color: #D0050D; }
  .msds-columnItem5--red .msds-columnItem5__label {
    color: #fff; }
  .msds-columnItem5--yellow:before,
  .msds-columnItem5--yellow .msds-columnItem5__label {
    background-color: #FEE04B; }
  .msds-columnItem5--blue:before,
  .msds-columnItem5--blue .msds-columnItem5__label {
    background-color: #B0DAF4; }
  .msds-columnItem5--gray:before,
  .msds-columnItem5--gray .msds-columnItem5__label {
    background-color: #ccc; }
  .msds-columnItem5--gray .msds-columnItem5__image {
    position: relative; }
    .msds-columnItem5--gray .msds-columnItem5__image:after {
      content: '';
      background-image: url(/res/msd/img/search/fig_kanbai.png);
      background-repeat: no-repeat;
      background-size: 246px auto;
      width: 246px;
      height: 144px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: 1; }
      @media (min-width: 768px), print {
        .msds-columnItem5--gray .msds-columnItem5__image:after {
          background-size: contain;
          background-position: center;
          width: 91%;
          height: 0;
          padding-top: 57.8125%; } }
    .msds-columnItem5--gray .msds-columnItem5__image:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(255, 255, 255, 0.7);
      z-index: 1; }
    @media (min-width: 768px), print {
      .msds-columnItem5--gray .msds-columnItem5__image:hover {
        opacity: 1; }
        .msds-columnItem5--gray .msds-columnItem5__image:hover img {
          opacity: .8; } }
  .msds-columnItem5--gray .msds-columnItem5__body .msds-columnItem5__link {
    position: relative; }
    .msds-columnItem5--gray .msds-columnItem5__body .msds-columnItem5__link:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(255, 255, 255, 0.7);
      z-index: 1; }
  .msds-columnItem5--gray .msds-columnItem5__footer {
    position: relative;
    z-index: 1; }
    @media (min-width: 768px), print {
      .msds-columnItem5--gray .msds-columnItem5__footer {
        width: 270px;
        margin-left: auto;
        margin-right: auto; } }
  .msds-columnItem5__inner, .msds-columnItem5__link {
    display: block;
    color: #000; }
  .msds-columnItem5__header {
    display: flex;
    background-color: #262626; }
  .msds-columnItem5__label {
    width: 46px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: bold;
    color: #333; }
  .msds-columnItem5__heading {
    width: 100%;
    font-size: 15px;
    padding: 5px 10px;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    box-sizing: border-box; }
  .msds-columnItem5__subHeading {
    width: 100%;
    font-size: 11px;
    font-weight: normal; }
  .msds-columnItem5__mainHeading {
    font-weight: bold;
    margin: 3px 0 0; }
    .msds-columnItem5__mainHeading .mansion__name__small {
      font-size: 74%;
      font-weight: 400; }
  .msds-columnItem5__voice {
    margin: 10px;
    padding: 5px;
    background-color: #F5F5F5;
    display: flex;
    align-items: center; }
  .msds-columnItem5__voiceImg {
    width: 60px;
    flex-shrink: 0; }
  .msds-columnItem5__voiceText {
    width: 100%;
    min-height: 60px;
    padding: 5px 10px 4px;
    background-color: #fff;
    -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.15));
            filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.15));
    font-size: 12px;
    line-height: 1.41667;
    border-radius: 4px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative; }
    .msds-columnItem5__voiceText:before {
      content: '';
      width: 0;
      height: 0;
      border: 7px solid transparent;
      border-right: 10px solid #fff;
      position: absolute;
      left: -17px;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%); }
  .msds-columnItem5__container {
    margin: 10px; }
    @media (min-width: 768px), print {
      .msds-columnItem5__container {
        display: flex;
        align-items: flex-start; } }
  @media (min-width: 768px), print {
    .msds-columnItem5__visual {
      width: calc(360/920*100%);
      margin: 0 10px 0 0; } }
  .msds-columnItem5__image {
    display: block; }
    @media (min-width: 768px), print {
      .msds-columnItem5__image {
        position: relative;
        height: 0;
        padding-top: 77.77778%;
        border: 1px solid #D9D9D9; }
        .msds-columnItem5__image:hover {
          opacity: 0.8; }
        .msds-columnItem5__image img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
          font-family: 'object-fit: contain;'; } }
  .msds-columnItem5__body {
    padding: 10px 0 0; }
    @media (min-width: 768px), print {
      .msds-columnItem5__body {
        width: calc(563/920*100%);
        padding: 0; } }
  .msds-columnItem5__priceGroup {
    margin: 0 0 10px; }
  .msds-columnItem5__priceItem {
    color: #D0050D;
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0; }
  .msds-columnItem5__number {
    font-size: 20px; }
  .msds-columnItem5__pricelistNote {
    font-weight: normal;
    font-size: 11px; }
  .msds-columnItem5__loanItem {
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0; }
  .msds-columnItem5__loanNumber1 {
    font-size: 16px;
    color: #D0050D; }
  .msds-columnItem5__loanNumber2 {
    font-size: 18px;
    color: #D0050D; }
  .msds-columnItem5__loanNote {
    display: none;
    font-weight: normal; }
  .msds-columnItem5__modal {
    cursor: pointer;
    margin-left: 5px; }
    .msds-columnItem5__modal img {
      width: 15px; }
  .msds-columnItem5__floorPlan {
    font-size: 14px;
    font-weight: bold; }
  .msds-columnItem5__footer {
    margin: 16px 10px 20px; }
    @media (min-width: 768px), print {
      .msds-columnItem5__footer {
        margin: 10px 0 0; }
        .msds-columnItem5__footer .msds-button__link {
          padding-left: 20px;
          padding-right: 20px; } }

@-webkit-keyframes buttonhovering {
  0% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px); }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px); }
  100% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px); } }

@keyframes buttonhovering {
  0% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px); }
  50% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px); }
  100% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px); } }

@-webkit-keyframes mask-bg {
  0% {
    opacity: .2; }
  65% {
    opacity: 1; } }

@keyframes mask-bg {
  0% {
    opacity: .2; }
  65% {
    opacity: 1; } }
  .msds-columnItem5--mask .msds-columnItem5__inner {
    height: 400px;
    position: relative;
    border: 4px solid #FFB9A3; }
    @media (min-width: 768px), print {
      .msds-columnItem5--mask .msds-columnItem5__inner:hover .msds-columnItem5__maskButton {
        opacity: .6; } }
  @media screen and (max-width: 767px) {
    .msds-columnItem5--mask1 .msds-columnItem5__mask {
      background-image: url(/res/msd/img/search/mask01.png); } }
  @media (min-width: 768px), print {
    .msds-columnItem5--mask1 .msds-columnItem5__mask {
      background-image: url(/res/msd/img/search/mask01_pc.png); } }
  @media screen and (max-width: 767px) {
    .msds-columnItem5--mask2 .msds-columnItem5__mask {
      background-image: url(/res/msd/img/search/mask02.png); } }
  @media (min-width: 768px), print {
    .msds-columnItem5--mask2 .msds-columnItem5__mask {
      background-image: url(/res/msd/img/search/mask02_pc.png); } }
  @media screen and (max-width: 767px) {
    .msds-columnItem5--mask3 .msds-columnItem5__mask {
      background-image: url(/res/msd/img/search/mask03.png); } }
  @media (min-width: 768px), print {
    .msds-columnItem5--mask3 .msds-columnItem5__mask {
      background-image: url(/res/msd/img/search/mask03_pc.png); } }
  .msds-columnItem5__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-animation-name: mask-bg;
            animation-name: mask-bg;
    -webkit-animation-duration: 7s;
            animation-duration: 7s;
    -webkit-animation-timing-function: steps(5, end);
            animation-timing-function: steps(5, end);
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    z-index: 0; }
    @media screen and (max-width: 767px) {
      .msds-columnItem5__mask {
        background-size: 347px auto; } }
    @media (min-width: 768px), print {
      .msds-columnItem5__mask {
        background-size: 932px auto;
        background-position: left top; } }
  .msds-columnItem5__maskInner {
    width: 290px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
    @media (min-width: 768px), print {
      .msds-columnItem5__maskInner {
        width: 320px; } }
  .msds-columnItem5__maskLead {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center; }
  .msds-columnItem5__maskIcon {
    margin: 0 10px 0 0;
    flex-shrink: 0; }
  .msds-columnItem5__maskDescription {
    font-size: 18px;
    font-weight: bold;
    color: #F00;
    margin: 20px 0; }
  .msds-columnItem5__maskButton {
    width: 260px;
    height: 48px;
    margin: 20px auto 0;
    border-radius: 4px;
    position: relative;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    background: linear-gradient(#d0050d 0%, #ac0007 100%);
    -webkit-animation-name: buttonhovering;
            animation-name: buttonhovering;
    -webkit-animation-duration: 1.33s;
            animation-duration: 1.33s;
    -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
            animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }
    @media (min-width: 768px), print {
      .msds-columnItem5__maskButton {
        width: 100%; } }
    .msds-columnItem5__maskButton span {
      width: 100%;
      font-size: 12px; }
    .msds-columnItem5__maskButton:after {
      content: '';
      width: 10px;
      height: 10px;
      border: 1px solid #fff;
      border-width: 2px 2px 0 0;
      position: absolute;
      top: 50%;
      right: 10px;
      -webkit-transform: translateY(-50%) rotate(45deg);
              transform: translateY(-50%) rotate(45deg); }

/*
---
name: テキストボックス
category:
  - Form
---

```html

<div class="msds-inputText">
  <input name="" value="" class="msds-inputText__textbox" type="text" placeholder="テキスト">
<!-- /.msds-inputText --></div>

```

```html

<div class="msds-inputText">
  <input name="" value="" class="msds-inputText__textbox msds-inputText__textbox--ssmall" type="text" placeholder="テキスト">
<!-- /.msds-inputText --></div>

```

```html

<div class="msds-inputText">
  <input name="" value="" class="msds-inputText__textbox msds-inputText__textbox--small" type="text" placeholder="テキスト">
<!-- /.msds-inputText --></div>

```

```html

<div class="msds-inputText">
  <input name="" value="" class="msds-inputText__textbox msds-inputText__textbox--middle" type="text" placeholder="テキスト">
<!-- /.msds-inputText --></div>

```

```html

<div class="msds-inputText">
  <input name="" value="" class="msds-inputText__textbox msds-inputText__textbox--middle2" type="text" placeholder="テキスト">
<!-- /.msds-inputText --></div>

```

```html

<div class="msds-inputText">
  <input name="" value="" class="msds-inputText__textbox msds-inputText__textbox--name" type="text" placeholder="テキスト">
<!-- /.msds-inputText --></div>


```


### 横並び

```html

<div class="msds-inputText msds-inputText--horizontal">
  <label class="msds-inputText__title">内訳：</label>
  ご主人様 <input type="text" name="income1" id="income1" onblur="add_income(1,this.value)" class="msds-inputText__textbox msds-inputText__textbox--ssmall"> 万円／
  奥様 <input type="text" name="income2" id="income2" onblur="add_income(2,this.value)" class="msds-inputText__textbox msds-inputText__textbox--ssmall"> 万円
<!-- /.msds-inputText --></div>

```


### 横並び2

```html

<div class="msds-inputTextLabel">
  <div class="msds-inputTextLabel__text">氏 <span class="icon-required">必須</span></div>
  <div class="msds-inputTextLabel__text">名</div>
</div>
<div class="msds-inputText msds-inputText--horizontal2">
  <input type="text" name="" id="" class="msds-inputText__textbox msds-inputText__textbox--small" placeholder="例）山田">
  <input type="text" name="" id="" class="msds-inputText__textbox msds-inputText__textbox--small" placeholder="例）太郎">
<!-- /.msds-inputText --></div>

```


### 横並び3

```html

<div class="msds-inputText msds-inputText--horizontal3">
  <input type="text" name="" id="" class="msds-inputText__textbox msds-inputText__textbox--small" placeholder="例）山田さん">
  <span class="msds-inputText__text2">※以前弊社にお問い合せをされたことがある場合</span>
<!-- /.msds-inputText --></div>

```

### 横並び4

```html
<div class="msds-inputText ohs-inputText--horizontal4">
  <div class="msds-inputText__inner">
    <input type="text" name="" id="" placeholder="例）渋谷" class="msds-inputText__textbox">
    <input type="text" name="" id="" placeholder="例）花子" class="msds-inputText__textbox">
  </div>
<!-- /.msds-inputText --></div>
```

*/
.msds-table__row--isValidation .msds-inputText {
  position: relative; }

.msds-inputText--type2 {
  margin-bottom: 10px; }

.msds-inputText--horizontal {
  display: inline-block;
  margin-bottom: 5px; }
  @media screen and (max-width: 767px) {
    .msds-inputText--horizontal {
      width: 100%; } }

.msds-inputText--horizontal2 {
  margin-bottom: 5px; }

.msds-inputText--horizontal3 {
  display: flex;
  align-items: center; }

.msds-inputText--horizontal4 .msds-inputText__inner {
  display: flex; }
  .msds-inputText--horizontal4 .msds-inputText__inner .msds-inputText__textbox {
    margin-left: 5px; }
    .msds-inputText--horizontal4 .msds-inputText__inner .msds-inputText__textbox:first-child {
      margin-left: 0; }
  .msds-inputText--horizontal4 .msds-inputText__inner > .msds-inputText {
    width: 100%; }
  .msds-inputText--horizontal4 .msds-inputText__inner > .msds-inputText__error {
    display: block; }

.msds-inputText__item {
  display: inline-block; }
  @media screen and (max-width: 767px) {
    .msds-inputText__item {
      display: block; } }

.msds-inputText__title {
  display: block;
  font-size: 14px; }
  .msds-inputText--horizontal .msds-inputText__title,
  .msds-inputText--horizontal2 .msds-inputText__title {
    font-weight: bold;
    display: inline-block; }
  .msds-inputText__title--bold {
    font-weight: bold; }

.msds-inputText__textbox {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  background: #FFF;
  border-radius: 4px;
  box-sizing: border-box; }
  .msds-inputText__textbox.is-error {
    background-color: #ffefeb;
    border: 2px solid #ff9999; }
  .msds-inputText__textbox--ssmall {
    width: 120px; }
  .msds-inputText__textbox--small {
    width: 240px; }
  .msds-inputText__textbox--small2 {
    width: 297px; }
  .msds-inputText__textbox--middle {
    width: 460px; }
  .msds-inputText__textbox--middle2 {
    width: 300px; }
  .msds-inputText__textbox--wide {
    width: 800px; }
  .msds-inputText__textbox--name {
    width: 225px; }
  @media screen and (max-width: 767px) {
    .msds-inputText__textbox {
      margin-bottom: 10px; }
      .msds-inputText__textbox--ssmall, .msds-inputText__textbox--small, .msds-inputText__textbox--small2, .msds-inputText__textbox--middle, .msds-inputText__textbox--middle2, .msds-inputText__textbox--wide, .msds-inputText__textbox--name {
        width: 60%; } }
  .msds-inputText--horizontal3 .msds-inputText__textbox {
    display: block;
    flex: 1 1 100%;
    margin-left: 5px; }
    .msds-inputText--horizontal3 .msds-inputText__textbox:first-child {
      margin-left: 0; }
  .msds-table--contactform .msds-inputText__textbox[data-validation*="required"] {
    background-color: #fffdaa; }
    .msds-table--contactform .msds-inputText__textbox[data-validation*="required"].is-error {
      background-color: #ffefeb; }
  .msds-table--contactform .msds-inputText__textbox[data-validation*="required"].valid {
    background-color: #fff; }
  .msds-inputText__textbox.is-copying {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }

.msds-inputText__notes {
  margin-bottom: 5px;
  display: block;
  font-size: 14px;
  text-indent: -1em;
  padding-left: 1em; }
  .msds-inputText--horizontal3 .msds-inputText__notes {
    margin-left: 5px;
    flex: 1 1 auto; }

.msds-inputText__notes2 {
  margin-top: 5px;
  display: block;
  color: #999999;
  font-size: 14px; }

.msds-inputText__error {
  display: none;
  font-weight: bold;
  color: #ff0000; }
  .msds-inputText__error.is-error {
    display: block; }

.msds-inputText__text {
  display: block;
  margin: 0 0 5px;
  flex: 0 0 auto; }

.msds-inputText__text2 {
  margin-left: 5px;
  white-space: nowrap;
  font-size: 12px; }

.msds-inputText__copiedTextbox {
  border: 1px solid #cccccc;
  border-top: 0;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 10px;
  background-color: #ffffff;
  font-weight: normal; }
  .msds-inputText__copiedTextbox.is-hidden {
    display: none; }

.msds-inputText__balloonErrors {
  position: absolute;
  z-index: 2;
  display: none;
  bottom: -2.5em;
  left: 20px;
  background-color: #dc0810;
  padding: 1px 10px 10px;
  border-radius: 3px; }
  .msds-inputText__balloonErrors::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 10px;
    width: 0;
    height: 0;
    border-width: 0px 3px 6px 3px;
    border-color: transparent transparent #dc0810 transparent;
    border-style: solid; }

.msds-inputText__balloonError {
  display: none;
  font-weight: bold;
  font-size: 12px;
  color: #fff;
  margin-top: 10px; }

/*
---
name: テキストエリア
category:
  - Form
---

```html
<form name="form1" action="">
  <div class="msds-textarea msds-textarea--typeCenter">
      <textarea name="" id="" cols="30" rows="10" placeholder="例）３年目以上の知識豊富な方を希望／女性の方を希望／渋谷店の佐藤様" class="msds-textarea__box"></textarea>
    </div>
  <div class="ohd-F1">
    <button type="submit" class="ohd-F1-button">担当者を変更する</button>
  <!-- /ohd-F1 --></div>
</form>
```
*/
.msds-textarea {
  margin: 0 0 8px; }
  .msds-textarea__title {
    display: block;
    font-size: 14px;
    margin-bottom: 5px; }
  .msds-textarea__box {
    width: 100%;
    height: 147px;
    padding: 10px 10px;
    border: 1px solid #ccc;
    background: #FFF;
    border-radius: 4px;
    box-sizing: border-box; }
    .msds-textarea__box--short {
      height: 70px; }
  .msds-textarea__text {
    margin: 0 0 7px;
    line-height: 1.286; }
  .msds-textarea--typeCenter {
    max-width: 880px;
    margin: 0 auto 10px; }

/*
---
name: 合計
category:
  - Total
---

```html
<div class="msds-total">
  <span class="msds-total__text">合計</span><b class="msds-total__number"><span id="total_income_text">---,---</span></b>万円<br>
  <input type="hidden" name="total_income" id="total_income">
<!-- /.msds-total --></div>

```
*/
.msds-total {
  margin: 5px 0;
  padding: 10px;
  background-color: #F5F5F5;
  border-right: 4px; }
  @media screen and (max-width: 767px) {
    .msds-total {
      width: 100%; } }
  .msds-total__text {
    margin-right: 40px;
    font-weight: bold;
    font-size: 14px; }
  .msds-total__number {
    margin-right: 5px;
    color: #666666;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5; }

/*
---
name: 合計2
category:
  - Total
---

```html
<div class="msds-total2">
  <span id="total_price"><span class="none"><b class="msds-total2__number">---,---</b>万円</span></span>
<!-- /.msds-total2 --></div>

```
*/
.msds-total2__number {
  margin-right: 5px;
  color: #ff0000;
  font-weight: bold;
  font-size: 24px; }

.msds-total2 > span > span {
  margin-right: 5px;
  color: #ff0000;
  font-weight: bold;
  font-size: 24px; }

.msds-total2 .none {
  color: #000;
  font-weight: normal;
  font-size: 14px; }

/*
---
name: 合計3
category:
  - Total
---

```html
<div class="msds-total3">
  <table class="msds-table">
    <tbody class="msds-table__body">
      <tr class="msds-table__row">
        <th class="msds-table__head">試算結果</th>
        <td class="msds-table__data"><div class="msds-total3__total"><b class="msds-total3__number"><span id="total_income_text">00,000</span></b>万円</div></td>
      </tr>
    </tbody>
  </table>
  <p class="msds-total3__text">※今回お示しした試算結果は参考値です。詳細に関しては営業にお問い合わせください。</p>
<!-- /.msds-total3 --></div>
```
*/
.msds-total3 {
  margin: 20px 0 0; }
  .msds-total3__number {
    margin-right: 20px;
    color: #cccccc;
    font-weight: bold;
    font-size: 24px; }
    .msds-total3__number.is-calculated {
      color: #000; }
  .msds-total3__text {
    margin: 0; }
  .msds-total3 .msds-table {
    margin: 0 0 5px;
    border: 2px solid #ccc; }
  .msds-total3 .msds-table__head {
    padding: 10px 20px;
    font-weight: bold;
    vertical-align: middle; }
  .msds-total3 .msds-table__data {
    padding: 10px 20px;
    text-align: left; }

/*
---
name: セレクト
category:
  - Form
---

```html
<div class="msds-select">
  <div class="msds-select__data">
    <select class="msds-select__data--select" name="" id="">
      <option value="01">選択してください</option>
    </select>
  </div>
<!-- /.msds-select --></div>

```

### タイプ違い2

```html
<div class="msds-select msds-select--type2">
  <div class="msds-select__data">
    <select class="msds-select__data--select" name="" id="">
      <option value="00">選択してください</option>
      <option value="01">10</option>
      <option value="02">15</option>
    </select>
  </div>
<!-- /.msds-select --></div>
```

### タイプ違い3

```html
<div class="msds-select msds-select--type3">
  <div class="msds-select__data">
    <select class="msds-select__data--select" name="" id="">
      <option value="01">下限なし</option>
    </select>
  </div>
  <span class="msds-select__text">〜</span>
  <div class="msds-select__data">
    <select class="msds-select__data--select" name="" id="">
      <option value="01">下限なし</option>
    </select>
  </div>
<!-- /.msds-select --></div>

```

### タイプ違い4

```html
<div class="msds-select msds-select--type4">
  <label for="" class="msds-select__title">一戸建て：</label>
  <div class="msds-select__data">
    <select name="sc_house_price_l" id="sc_house_price_l" class="msds-select__data--select">
      <option value="" selected="selected">下限なし</option>
      <option value="20000000">2000万円以上</option>
      <option value="30000000">3000万円以上</option>
      <option value="35000000">3500万円以上</option>
      <option value="40000000">4000万円以上</option>
      <option value="45000000">4500万円以上</option>
      <option value="50000000">5000万円以上</option>
      <option value="55000000">5500万円以上</option>
      <option value="60000000">6000万円以上</option>
      <option value="65000000">6500万円以上</option>
      <option value="70000000">7000万円以上</option>
      <option value="75000000">7500万円以上</option>
      <option value="80000000">8000万円以上</option>
      <option value="85000000">8500万円以上</option>
      <option value="90000000">9000万円以上</option>
      <option value="95000000">9500万円以上</option>
      <option value="100000000">1億円以上</option>
      <option value="120000000">1.2億円以上</option>
      <option value="150000000">1.5億円以上</option>
      <option value="200000000">2億円以上</option>
    </select>
  </div>
  <span class="msds-select__text">〜</span>
  <div class="msds-select__data">
    <select name="sc_house_price_u" id="sc_house_price_u" class="msds-select__data--select">
      <option value="20000000">2000万円以下</option>
      <option value="30000000">3000万円以下</option>
      <option value="35000000">3500万円以下</option>
      <option value="40000000">4000万円以下</option>
      <option value="45000000">4500万円以下</option>
      <option value="50000000">5000万円以下</option>
      <option value="55000000">5500万円以下</option>
      <option value="60000000">6000万円以下</option>
      <option value="65000000">6500万円以下</option>
      <option value="70000000">7000万円以下</option>
      <option value="75000000">7500万円以下</option>
      <option value="80000000">8000万円以下</option>
      <option value="85000000">8500万円以下</option>
      <option value="90000000">9000万円以下</option>
      <option value="95000000">9500万円以下</option>
      <option value="100000000">1億円以下</option>
      <option value="120000000">1.2億円以下</option>
      <option value="150000000">1.5億円以下</option>
      <option value="200000000">2億円以下</option>
      <option value="" selected="selected">上限なし</option>
    </select>
  </div>
  <button class="msds-select__button msds-button" type="button" name="btn" onClick='set_value("house")'><span class="msds-select__buttonInner msds-button__inner">
    <span class="msds-button__text">検索</span>
  </span></button>
<!-- /.msds-select --></div>

```

### タイプ違い5

```html
<div class="msds-select msds-select--type5">
  <div class="msds-select__data">
    <select class="msds-select__data--select" name="" id="">
      <option value="01">下限</option>
    </select>
  </div>
  <span class="msds-select__text">〜</span>
  <div class="msds-select__data">
    <select class="msds-select__data--select" name="" id="">
      <option value="01">上限</option>
    </select>
  </div>
<!-- /.msds-select --></div>

```

### タイプ違い6

```html
<div class="msds-select msds-select--type6">
  <label for="" class="msds-select__title">戸建：</label>
  <div class="msds-select__data">
    <select name="" id="" class="msds-select__data--select">
      <option value="" selected="selected">下限なし</option>
      <option value="20000000">2000万円以上</option>
      <option value="30000000">3000万円以上</option>
      <option value="35000000">3500万円以上</option>
      <option value="40000000">4000万円以上</option>
      <option value="45000000">4500万円以上</option>
      <option value="50000000">5000万円以上</option>
      <option value="55000000">5500万円以上</option>
      <option value="60000000">6000万円以上</option>
      <option value="65000000">6500万円以上</option>
      <option value="70000000">7000万円以上</option>
      <option value="75000000">7500万円以上</option>
      <option value="80000000">8000万円以上</option>
      <option value="85000000">8500万円以上</option>
      <option value="90000000">9000万円以上</option>
      <option value="95000000">9500万円以上</option>
      <option value="100000000">1億円以上</option>
      <option value="120000000">1.2億円以上</option>
      <option value="150000000">1.5億円以上</option>
      <option value="200000000">2億円以上</option>
    </select>
  </div>
  <span class="msds-select__text">〜</span>
  <div class="msds-select__data">
    <select name="" id="" class="msds-select__data--select">
      <option value="20000000">2000万円以下</option>
      <option value="30000000">3000万円以下</option>
      <option value="35000000">3500万円以下</option>
      <option value="40000000">4000万円以下</option>
      <option value="45000000">4500万円以下</option>
      <option value="50000000">5000万円以下</option>
      <option value="55000000">5500万円以下</option>
      <option value="60000000">6000万円以下</option>
      <option value="65000000">6500万円以下</option>
      <option value="70000000">7000万円以下</option>
      <option value="75000000">7500万円以下</option>
      <option value="80000000">8000万円以下</option>
      <option value="85000000">8500万円以下</option>
      <option value="90000000">9000万円以下</option>
      <option value="95000000">9500万円以下</option>
      <option value="100000000">1億円以下</option>
      <option value="120000000">1.2億円以下</option>
      <option value="150000000">1.5億円以下</option>
      <option value="200000000">2億円以下</option>
      <option value="" selected="selected">上限なし</option>
    </select>
  </div>
<!-- /.msds-select --></div>

```

### タイプ違い7

```html
<div class="msds-select msds-select--type7">
  <label class="msds-select__title" for="period">返済年数</label>
  <div class="msds-select__data">
    <select id="period" name="period" class="msds-select__data--select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
      <option value="24">24</option>
      <option value="25">25</option>
      <option value="26">26</option>
      <option value="27">27</option>
      <option value="28">28</option>
      <option value="29">29</option>
      <option value="30">30</option>
      <option value="31">31</option>
      <option value="32">32</option>
      <option value="33">33</option>
      <option value="34">34</option>
      <option value="35" selected>35</option>
    </select>
  </div>
  <span class="msds-select__text">年</span>
<!-- /.msds-select --></div>
```


*/
.msds-select__title {
  display: block;
  font-size: 12px;
  margin-bottom: 5px; }

.msds-select__data {
  position: relative; }
  .msds-select__data--select {
    position: relative;
    border: 1px solid #ccc;
    background-color: #FFF;
    border-radius: 4px;
    margin: 0;
    width: 100%;
    height: 32px;
    outline: none;
    vertical-align: middle;
    box-sizing: border-box;
    z-index: 5; }
  .msds-select--horizontal .msds-select__data {
    display: inline-block; }

.msds-select__button {
  display: inline-block;
  margin-left: 7px; }

.msds-select__buttonInner {
  width: 120px;
  height: 32px; }

.msds-select--type2 {
  margin: 8px 0; }
  .msds-select--type2 .msds-select__title {
    display: inline-block;
    font-size: 14px; }
  .msds-select--type2 .msds-select__data {
    display: inline-block;
    vertical-align: middle; }

.msds-select--type3 {
  margin-bottom: 10px; }
  .msds-select--type3 .msds-select__data {
    display: inline-block;
    width: 180px;
    vertical-align: middle; }

.msds-select--type4 {
  margin: 0 0 10px; }
  .msds-select--type4 .msds-select__title {
    display: inline-block;
    width: 98px;
    font-weight: bold;
    font-size: 14px; }
  .msds-select--type4 .msds-select__data {
    display: inline-block;
    width: 180px; }

.msds-select--type5 {
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  .msds-select--type5 .msds-select__title {
    display: inline-block;
    font-size: 14px; }
  .msds-select--type5 .msds-select__data {
    display: inline-block;
    width: 115px;
    vertical-align: middle; }
  .msds-select--type5 .msds-select__text {
    display: inline-block;
    margin: 0 3px; }

.msds-select--type6 {
  margin: 0 0 10px; }
  .msds-select--type6 .msds-select__title {
    display: inline-block;
    margin: 0 8px;
    font-size: 14px; }
    .msds-select--type6 .msds-select__title:first-child {
      margin-left: 0; }
  .msds-select--type6 .msds-select__data {
    display: inline-block;
    width: 180px;
    vertical-align: middle; }

.msds-select--type7 {
  margin: 0 0 10px; }
  .msds-select--type7 .msds-select__title {
    display: block;
    font-size: 14px;
    margin-bottom: 0; }
  .msds-select--type7 .msds-select__data {
    display: inline-block;
    width: auto; }
    .msds-select--type7 .msds-select__data .msds-select__data--select {
      width: auto; }
      .msds-select--type7 .msds-select__data .msds-select__data--select:focus {
        outline: initial; }

.msds-select--type8 .msds-select__data .msds-select__data--select {
  width: 128px; }

/*
---
name: エリアスイッチ
category:
  - Form
---

```html
<div class="msds-select2">
  <select class="msds-select2__datalist">
    <option value="kanto" selected>東京・神奈川版</option>
    <option value="nagoya">名古屋版</option>
  </select>
<!-- .msds-select2 --></div>
```
*/
.msds-select2 {
  position: relative;
  z-index: 0;
  min-width: 135px;
  height: 26px;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #d3d3d3;
  background-color: white;
  background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 88%, #ededed 100%); }
  .msds-select2::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    z-index: -1;
    display: block;
    pointer-events: none;
    content: "\f0d7";
    font-family: 'msds-icon';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 16px;
    line-height: 0;
    width: 10px;
    height: 0;
    margin: auto;
    color: #d5d5d5; }
  .msds-select2__datalist {
    -webkit-appearance: none;
    appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    width: 100%;
    height: 26px;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0 30px 0 7px;
    background: none transparent;
    vertical-align: middle;
    color: inherit;
    font-size: 12px; }
    .msds-select2__datalist::-ms-expand {
      display: none; }

/*
---
name: 合計
category:
  - Total
---

```html
  <div class="msds-result">
    <div class="msds-result__item">
      <h3 class="msds-result__title">月々のお支払い（※１）（※２）</h3>
      <div class="msds-total2">
        <span id="pay_month" class="msds-total2__number">---,---</span>円
      <!-- /.msds-total2 --></div>
    </div>
  <!-- .msds-result --></div>
```
*/
.msds-result {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 10px; }
  @media screen and (max-width: 767px) {
    .msds-result {
      display: block; } }
  .msds-result__item {
    width: 100%; }
    @media screen and (max-width: 767px) {
      .msds-result__item {
        width: 100%; } }
  .msds-result__title {
    background-color: #f2f2f2;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    font-weight: bold;
    padding: 10px 20px;
    box-sizing: border-box; }
  .msds-result__inner {
    padding: 10px 20px; }

/*
---
name: 表（フォーム）
category:
  - Table
---

```html

```
*/
.msds-table {
  display: block;
  margin-bottom: 40px; }
  .msds-table__body {
    font-size: 14px; }
  .msds-table__row {
    display: flex;
    flex-wrap: nowrap;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 1px solid #d9d9d9; }
    .msds-table__row:first-child {
      border-top: 1px solid #d9d9d9; }
    @media screen and (max-width: 767px) {
      .msds-table__row {
        display: block;
        width: 100%; } }
  .msds-table__heading {
    box-sizing: border-box;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-basis: 17%;
    flex-shrink: 0;
    max-width: 17%;
    padding: 10px;
    background: #f2f2f2;
    line-height: 1.7;
    font-weight: bold; }
    @media screen and (max-width: 767px) {
      .msds-table__heading {
        width: 100%;
        max-width: 100%; } }
    .msds-table__heading .icon-required {
      position: relative;
      top: -2px;
      display: inline-block;
      min-width: 36px;
      background-color: red;
      border-radius: 4px;
      color: #fff;
      padding: 0 5px;
      white-space: nowrap;
      font-weight: bold;
      font-size: 12px;
      line-height: 1.8;
      box-sizing: border-box; }
  .msds-table__data {
    box-sizing: border-box;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding: 10px;
    line-height: 1.7; }

/*
---
name: 表（フォーム）
category:
  - Table
---

```html
<table class="msds-table2">
  <tbody class="msds-table2__body">
    <tr class="msds-table2__row">
      <th class="msds-table2__heading">パスワード <span class="icon-required">必須</span></th>
      <td class="msds-table2__data">
        <div class="msds-inputText__error is-error" id="js-validation-error-password"></div>
        <div class="msds-inputText">
          <input type="password" name="password" id="password" class="msds-inputText__textbox" data-validation="required custom" data-validation-regexp="^[\u0020-\u007e]{8,20}$" data-validation-error-msg-required="パスワードを入力してください:Empty" data-validation-error-msg-custom="半角英数・記号、8〜20文字で入力してください:Invalid" data-validation-error-msg-container="#js-validation-error-password" placeholder="例）sample@openhouse-group.com" data-validation-current-error="パスワードを入力してください:Empty">
        <!-- /.msds-inputText --></div>
      </td>
    </tr>
    <tr class="msds-table2__row">
      <th class="msds-table2__heading">新しいパスワード確認 <span class="icon-required">必須</span></th>
      <td class="msds-table2__data">
        <div class="msds-inputText__error is-error" id="js-validation-error-new-password"></div>
        <div class="msds-inputText">
          <input type="password" name="" id="" class="msds-inputText__textbox" data-validation="custom  required" data-validation-regexp="^[\u0020-\u007e]{8,20}$" data-validation-error-msg="半角英数・記号、8〜20文字で入力してください" data-validation-error-msg-container="#js-validation-error-new-password" placeholder="例）sample@openhouse-group.com" data-validation-current-error="半角英数・記号、8〜20文字で入力してください">
        <!-- /.msds-inputText --></div>
      </td>
    </tr>
  </tbody>
</table>
```
*/
.msds-table2 {
  display: block;
  margin-bottom: 40px; }
  @media screen and (max-width: 767px) {
    .msds-table2 {
      margin-bottom: 0; } }
  .msds-table2__body {
    display: block;
    width: 100%;
    font-size: 14px; }
  .msds-table2__row {
    display: flex;
    flex-wrap: nowrap;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 1px solid #d9d9d9; }
    .msds-table2__row:first-child {
      border-top: 1px solid #d9d9d9; }
    @media screen and (max-width: 767px) {
      .msds-table2__row {
        display: block; } }
  .msds-table2__heading {
    box-sizing: border-box;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-basis: 25%;
    flex-shrink: 0;
    max-width: 25%;
    padding: 15px 20px;
    background: #f2f2f2;
    line-height: 1.7;
    font-weight: normal; }
    @media screen and (max-width: 767px) {
      .msds-table2__heading {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 10px; } }
    .msds-table2__heading .icon-required {
      position: relative;
      top: -2px;
      display: inline-block;
      min-width: 36px;
      background-color: red;
      border-radius: 4px;
      color: #fff;
      padding: 0 5px;
      white-space: nowrap;
      font-weight: bold;
      font-size: 12px;
      line-height: 1.8;
      box-sizing: border-box; }
  .msds-table2__data {
    box-sizing: border-box;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding: 15px 20px;
    line-height: 1.7; }
    @media screen and (max-width: 767px) {
      .msds-table2__data {
        display: block;
        width: 100%;
        padding: 10px 0; } }

/*
利用ページ：
- マイページ（SP）
*/
.msds-table3 {
  margin-bottom: 10px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; }
  .msds-table3__body {
    width: 100%;
    font-size: 14px; }
  .msds-table3__row {
    border-bottom: 1px solid #d9d9d9; }
    .msds-table3__row:first-child {
      border-top: 1px solid #d9d9d9; }
  .msds-table3__heading {
    border: 1px solid #e0dfdf;
    text-align: center;
    vertical-align: middle;
    width: 29.85%;
    background-color: #f2f2f2; }
    @media screen and (max-width: 767px) {
      .msds-table3__heading {
        height: 30px;
        font-size: 14px; } }
  .msds-table3__data {
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #e0dfdf;
    color: #0086df; }
    .msds-table3__data--time {
      width: 26.86%;
      color: #000; }
    .msds-table3__data--less {
      color: #e60000; }
    @media screen and (max-width: 767px) {
      .msds-table3__data {
        height: 30px;
        font-size: 14px; } }

/*
---
name: 合計
category:
  - Total
---

```html
<div class="msds-total">
  <span class="msds-total__text">合計</span><b class="msds-total__number"><span id="total_income_text">---,---</span></b>万円<br>
  <input type="hidden" name="total_income" id="total_income">
<!-- /.msds-total --></div>

```
*/
.msds-linklist {
  display: flex;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  margin-bottom: 40px;
  box-sizing: border-box; }
  @media screen and (max-width: 767px) {
    .msds-linklist {
      flex-wrap: wrap; } }
  .msds-linklist__item {
    width: 100%;
    justify-content: space-between;
    text-align: center;
    border-right: 1px solid #ccc;
    padding: 10px 20px;
    box-sizing: border-box; }
    .msds-linklist__item:last-child {
      border-right: none; }
    @media screen and (max-width: 767px) {
      .msds-linklist__item {
        width: 50%;
        padding: 10px; }
        .msds-linklist__item:nth-child(-n+2) {
          border-bottom: 1px solid #ccc; }
        .msds-linklist__item:nth-child(2n) {
          border-right: none; } }
  .msds-linklist__link {
    display: block;
    color: #1a1a1a;
    font-size: 14px; }
  .msds-linklist__text {
    display: inline-block;
    text-decoration: underline;
    position: relative;
    padding-left: .9em;
    line-height: 1.3; }
    .msds-linklist__text:before {
      content: "";
      display: block;
      position: absolute;
      left: 1px;
      top: .4em;
      width: .45em;
      height: .45em;
      border-top: 1px solid gray;
      border-right: 1px solid gray;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg); }
    .msds-linklist__text:hover {
      text-decoration: none; }

/*
---
name: 合計
category:
  - Total
---

```html
<ul class="msds-linklist2">
  <li class="msds-linklist2__item">
    <a class="msds-linklist2__link" href="">PDFカタログ（21MB）</a>
  </li>
  <li class="msds-linklist2__item">
    <a class="msds-linklist2__link" href="">プラン一覧表（3.21MB）</a>
  </li>
  <li class="msds-linklist2__item">
    <a class="msds-linklist2__link" href="">購入者インタビュー</a>
  </li>
</ul>

```
*/
.msds-linklist2__item {
  position: relative;
  margin-bottom: 0.5em; }

.msds-linklist2__link {
  text-decoration: underline;
  padding-left: .9em;
  line-height: 1.3;
  color: #1a1a1a;
  font-size: 14px; }
  @media screen and (max-width: 767px) {
    .msds-linklist2__link {
      font-size: 13px; } }
  .msds-linklist2__link:before {
    content: "";
    display: block;
    position: absolute;
    left: 1px;
    top: .5em;
    width: .45em;
    height: .45em;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }
  .msds-linklist2__link:hover {
    text-decoration: none; }

/*
---
name: 合計
category:
  - List
---

```html
<ul class="msds-list">
  <li class="msds-list__item">
    <span class="msds-list__head">所在地：</span>
    <span class="msds-list__data">東京都新宿区神楽坂</span>
  </li>
  <li class="msds-list__item">
    <span class="msds-list__head">交通機関：</span>
    <span class="msds-list__data">大江戸線「牛込神楽坂」駅徒歩6分、有楽町線・南北線「市ヶ谷」駅徒歩8分</span>
  </li>
</ul>
```
*/
.msds-list {
  padding-top: 15px;
  margin-bottom: 15px; }
  @media screen and (max-width: 767px) {
    .msds-list {
      padding-top: 7px; }
      .msds-list__item [class^="oh-icon"] {
        color: #D0050D;
        font-size: 19px;
        margin: 0 10px 0 3px;
        text-align: center; }
      .msds-list__data {
        margin-bottom: 10px; }
      .msds-list + .msds-box {
        margin: 10px 0 20px;
        border-radius: 3px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05), -1px -1px 5px rgba(0, 0, 0, 0.05), 1px -1px 5px rgba(0, 0, 0, 0.05), -1px 1px 5px rgba(0, 0, 0, 0.05); } }
  .msds-list__item {
    display: flex;
    margin-bottom: 0.25em; }
    .msds-list__item:last-child {
      margin-bottom: 0; }
  .msds-list__head {
    font-weight: bold;
    font-size: 13px;
    min-width: 5em; }
    @media screen and (max-width: 767px) {
      .msds-list__head {
        font-size: 11px; } }
  .msds-list__data {
    font-size: 13px; }

/*
---
name: 囲みテキスト
category:
  - Box
---

```html
<div class="msds-box">
  <p class="msds-box__date">2018/08/24</p>
  <p class="msds-box__text">第2期事前ご案内会開催！ご来場予約、好評受付中！</p>
</div>
```
*/
.msds-box {
  background-color: #eee;
  padding: 15px;
  margin-bottom: 15px;
  margin-left: -15px;
  margin-right: -15px;
  border-top: 1px solid #d9d9d9; }
  @media screen and (max-width: 767px) {
    .msds-box {
      padding: 10px; } }
  .msds-box__date {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 0.25em; }
  .msds-box__text {
    font-size: 13px;
    margin-bottom: 0; }
  .msds-box__heading {
    font-weight: bold;
    color: #666666; }
  .msds-box__em {
    font-weight: bold; }
  @media screen and (max-width: 767px) {
    .msds-box__body {
      display: flex;
      flex-wrap: wrap; } }
  .msds-box__item {
    display: flex; }
    .msds-box__item + .msds-box__item {
      margin-top: 5px; }
      @media screen and (max-width: 767px) {
        .msds-box__item + .msds-box__item {
          margin-top: 2px;
          flex-basis: 100%; }
          .msds-box__item + .msds-box__item--break-sp {
            flex-basis: auto;
            margin-right: 0.5em; } }
    @media screen and (max-width: 767px) {
      .msds-box__item--spBreak {
        display: inline-block; } }
  .msds-box__itemHeading {
    font-size: 12px;
    color: #999;
    font-weight: bold;
    width: 70px; }
  .msds-box__itemBody {
    font-size: 13px; }
  @media (min-width: 768px), print {
    .msds-box--bgWhite {
      background-color: #fff;
      border-bottom: 1px solid #d9d9d9; } }

/*
---
name: 囲みテキスト
category:
  - Box
---

```html
```
*/
.msds-box2 {
  background-color: #F5F5F5;
  color: #666;
  padding: 15px;
  font-size: 14px; }
  @media screen and (max-width: 767px) {
    .msds-box2 {
      padding: 10px;
      margin-bottom: 15px; } }
  .msds-box2__date {
    font-weight: bold;
    margin-bottom: 0.25em; }
  .msds-box2__text {
    margin-bottom: 0; }
  .msds-box2__em {
    font-weight: bold; }
  .msds-box2__item {
    display: flex; }
    .msds-box2__item + .msds-box2__item {
      margin-top: 5px; }
      @media screen and (max-width: 767px) {
        .msds-box2__item + .msds-box2__item {
          flex-basis: 100%; } }
  .msds-box2__itemHeading {
    font-weight: bold;
    width: 70px; }

.msds-buttonlist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; }
  @media (min-width: 768px), print {
    .msds-buttonlist--widthFixed {
      width: 300px; } }
  @media screen and (max-width: 767px) {
    .msds-buttonlist--sp-vertical {
      display: block; }
      .msds-buttonlist--sp-vertical .msds-button,
      .msds-buttonlist--sp-vertical .msds-button:nth-child(2n) {
        margin: 8px 0 0; } }
  @media (min-width: 768px), print {
    .msds-buttonlist--sp-vertical .msds-button:nth-child(2n) {
      margin-left: 10px; } }

/*
利用ページ：
- マイページ（SP）
*/
.msds-buttonlist2 {
  display: block;
  background-color: #fff;
  margin: 0 -15px;
  padding: 0 15px 15px; }
  .msds-buttonlist2:last-child {
    padding: 0 15px 15px; }
  .msds-buttonlist2:first-child {
    background-color: #f5f5f5;
    padding: 15px 15px; }

.msds-cta__table.is-hidden + .msds-buttonlist2 {
  margin-top: -15px; }
  @media screen and (max-width: 767px) {
    .msds-cta__table.is-hidden + .msds-buttonlist2 {
      margin-top: 15px; } }

@-webkit-keyframes bound {
  0% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px); }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px); }
  100% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px); } }

@keyframes bound {
  0% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px); }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px); }
  100% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px); } }

.msds-button {
  text-align: center;
  background-color: #d9101d;
  border-radius: 6px;
  width: 100%; }
  .msds-button:hover {
    background-color: #c10e1a; }
  .msds-button:nth-child(2n) {
    margin-left: 4px; }
    @media screen and (max-width: 767px) {
      .msds-button:nth-child(2n) {
        margin-left: 5px; } }
  .msds-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    color: #fff; }
    .msds-button__link--large {
      font-size: 16px;
      height: 44px; }
  .msds-button--02 {
    background: #333; }
    .msds-button--02:hover {
      background-color: #262626;
      border-color: #262626; }
  .msds-button--03 {
    border: 2px solid #d0050d;
    background: linear-gradient(#fff 0%, #fff 80%, #e5e5e5 100%); }
    @media (min-width: 768px), print {
      .msds-button--03:hover {
        opacity: 0.6; } }
    .msds-button--03 .msds-button__link {
      color: #d0050d;
      position: relative; }
      .msds-button--03 .msds-button__link:after {
        content: '';
        width: 9px;
        height: 9px;
        border-top: 2px solid #d0050d;
        border-left: 2px solid #d0050d;
        position: absolute;
        right: 15px;
        top: 50%;
        -webkit-transform: translateY(-50%) rotate(135deg);
                transform: translateY(-50%) rotate(135deg);
        box-sizing: border-box; }
  .msds-button--04 {
    position: relative;
    background-color: transparent !important; }
    .msds-button--04 .msds-button__link {
      flex-wrap: wrap;
      align-content: center;
      position: relative;
      background: linear-gradient(rgba(208, 5, 28, 0.97) 0%, #ac0007 100%);
      border-radius: 6px; }
      .msds-button--04 .msds-button__link:after {
        content: '';
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        border-width: 2px 2px 0 0;
        position: absolute;
        top: 50%;
        right: 10px;
        -webkit-transform: translateY(-50%) rotate(45deg);
                transform: translateY(-50%) rotate(45deg); }
      .msds-button--04 .msds-button__link span {
        font-size: 12px;
        width: 100%;
        margin: 0 0 2px; }
      @media screen and (max-width: 767px) {
        .msds-button--04 .msds-button__link--large {
          font-size: 18px; } }
      @media (min-width: 768px), print {
        .msds-button--04 .msds-button__link:hover {
          opacity: 0.6; } }
  .msds-button--05 {
    position: relative;
    border: 2px solid #d0050d;
    background: linear-gradient(rgba(208, 5, 28, 0.97) 0%, #ac0007 100%); }
    @media (min-width: 768px), print {
      .msds-button--05:hover {
        opacity: 0.6; } }
    .msds-button--05 .msds-button__link {
      flex-wrap: wrap;
      align-content: center;
      position: relative; }
      .msds-button--05 .msds-button__link:after {
        content: '';
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        border-width: 2px 2px 0 0;
        position: absolute;
        top: 50%;
        right: 15px;
        -webkit-transform: translateY(-50%) rotate(45deg);
                transform: translateY(-50%) rotate(45deg); }
      .msds-button--05 .msds-button__link span {
        font-size: 12px;
        width: 100%;
        margin: 0 0 2px; }
      .msds-button--05 .msds-button__link--large {
        font-size: 16px; }
  .msds-button--lead {
    margin-top: 40px !important; }
    .msds-button--lead .msds-button__lead {
      position: absolute;
      top: -1.7em;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      text-align: center;
      font-weight: bold;
      display: inline-block;
      white-space: nowrap; }
      .msds-button--lead .msds-button__lead:before, .msds-button--lead .msds-button__lead:after {
        content: '';
        width: 2px;
        height: 15px;
        background-color: #d0050d;
        position: absolute;
        top: 50%; }
      .msds-button--lead .msds-button__lead:before {
        left: 0;
        -webkit-transform: translate(-15px, -50%) rotate(-20deg);
                transform: translate(-15px, -50%) rotate(-20deg); }
      .msds-button--lead .msds-button__lead:after {
        right: 0;
        -webkit-transform: translate(15px, -50%) rotate(20deg);
                transform: translate(15px, -50%) rotate(20deg); }

.msds-button2 {
  display: block;
  text-align: center; }
  .msds-button2__label {
    position: relative;
    font-size: 14px;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: inline-flex;
    max-width: 100%;
    min-width: 200px;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 5px;
    background-color: #e60000;
    border-color: #e60000;
    font-weight: 700;
    color: #fff; }
    @media (min-width: 768px), print {
      .msds-button2__label:hover {
        background-color: #cd0000;
        border-color: #cd0000; } }
  .msds-button2--2 .msds-button2__label {
    background-color: #333333;
    color: #fff; }
    @media (min-width: 768px), print {
      .msds-button2--2 .msds-button2__label:hover {
        opacity: 0.8; } }

.msds-button3 {
  margin: 55px 20px 40px;
  position: relative;
  text-align: center;
  box-sizing: border-box; }
  .msds-button3__button {
    color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: inline-flex;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    border-radius: 5px;
    border: 1px solid #333;
    background: #333;
    font-weight: bold;
    box-sizing: border-box;
    text-decoration: none;
    background-color: #e60000;
    border-color: #e60000;
    position: relative;
    background-color: #d0050d;
    font-size: 16px;
    line-height: 16px; }
    .msds-button3__button:visited, .msds-button3__button:active, .msds-button3__button:hover {
      color: #fff; }
    .msds-button3__button[disabled] {
      pointer-events: none; }
    .msds-button3__button[disabled] {
      pointer-events: none; }
    @media screen and (max-width: 767px) {
      .msds-button3__button {
        width: 100%;
        height: 48px; } }
    @media (min-width: 768px), print {
      .msds-button3__button {
        min-width: 300px;
        height: 75px;
        font-size: 20px; } }
    .msds-button3__button:hover {
      background-color: #262626;
      border-color: #262626; }
    .msds-button3__button--disabled {
      opacity: 0.5;
      color: rgba(255, 255, 255, 0.7); }
      .msds-button3__button--disabled:hover {
        opacity: 0.5;
        background-color: #333;
        border-color: #333;
        color: rgba(255, 255, 255, 0.7);
        cursor: auto; }
    .msds-button3__button:hover {
      background-color: #cd0000;
      border-color: #cd0000; }
    .msds-button3__button.ohd-F1-button--disabled:hover {
      background-color: #e60000;
      border-color: #e60000; }
    .msds-button3__button::after {
      content: '';
      position: absolute;
      right: 11px;
      top: 50%;
      -webkit-transform: rotate(45deg) translateY(-50%);
              transform: rotate(45deg) translateY(-50%);
      border: 2px #fff solid;
      border-left: 0;
      border-bottom: 0;
      width: 9px;
      height: 9px; }
    @media (min-width: 768px), print {
      .msds-button3__button {
        width: 600px; } }

@-webkit-keyframes boundBalloon {
  0% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); }
  50% {
    -webkit-transform: translate(-50%, -5px);
            transform: translate(-50%, -5px); }
  100% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }

@keyframes boundBalloon {
  0% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); }
  50% {
    -webkit-transform: translate(-50%, -5px);
            transform: translate(-50%, -5px); }
  100% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }
  .msds-button3::before {
    content: "";
    width: 107px;
    height: 33px;
    background: url("/res/msd/img/fukidashi-1tap.svg") 0 0/100% 100% no-repeat;
    position: absolute;
    top: -28px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 10;
    -webkit-animation-name: boundBalloon;
            animation-name: boundBalloon;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease; }

.msds-button4 {
  margin: 20px 20px 30px;
  text-align: center; }
  .msds-button4__button {
    color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: inline-flex;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    border-radius: 5px;
    border: 1px solid #333;
    background: #333;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    box-sizing: border-box;
    text-decoration: none; }
    .msds-button4__button:visited, .msds-button4__button:active, .msds-button4__button:hover {
      color: #fff; }
    .msds-button4__button[disabled] {
      pointer-events: none; }
    .msds-button4__button[disabled] {
      pointer-events: none; }
    @media screen and (max-width: 767px) {
      .msds-button4__button {
        width: 100%; } }
    @media (min-width: 768px), print {
      .msds-button4__button {
        min-width: 300px; } }
    .msds-button4__button:hover {
      background-color: #262626;
      border-color: #262626; }

.msds-button5 {
  margin-bottom: 30px;
  text-align: center;
  width: 100%; }
  .msds-button5[class^=msds-button].is-animate-bound {
    margin-top: 0; }
  .msds-button5__button {
    color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: inline-flex;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    border-radius: 5px;
    border: 1px solid #d9101d;
    background-image: linear-gradient(to bottom, #d9101d 0, #d9101d 88%, #af0103 100%);
    font-size: 16px;
    line-height: 16px;
    box-sizing: border-box;
    text-decoration: none; }
    .msds-button5__button:visited, .msds-button5__button:active, .msds-button5__button:hover {
      color: #fff; }
    .msds-button5__button[disabled] {
      pointer-events: none; }
    .msds-button5__button[disabled] {
      pointer-events: none; }
    @media screen and (max-width: 767px) {
      .msds-button5__button {
        width: 100%; } }
    @media (min-width: 768px), print {
      .msds-button5__button {
        min-width: 300px; } }

/*
利用ページ：
- マイページ（SP）
*/
.msds-button-icon {
  margin: 10px 0 0; }
  .msds-button-icon.is-hidden {
    display: none; }
  .msds-button-icon__inner {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; }
    .msds-button-icon__inner [class^="msds-icon"] {
      width: 17px;
      height: 17px;
      margin-left: -12px; }
  .msds-button-icon__button {
    color: #1a1a1a;
    cursor: pointer;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    padding-left: 14px;
    height: 47px;
    border-radius: 5px;
    border: 1px solid #d9101d;
    background: linear-gradient(to bottom, #fff 0, #fff 60%, #f4f4f4 100%);
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    padding-left: 0;
    box-sizing: border-box;
    text-decoration: none; }
    .msds-button-icon__button:visited, .msds-button-icon__button:active, .msds-button-icon__button:hover {
      color: #1a1a1a; }
    .msds-button-icon__button[disabled] {
      pointer-events: none; }
    .msds-button-icon__button[disabled] {
      pointer-events: none; }
    @media screen and (max-width: 767px) {
      .msds-button-icon__button {
        width: 100%; } }
    @media (min-width: 768px), print {
      .msds-button-icon__button {
        min-width: 300px; } }
    .msds-button-icon__button [class^=oh-icon] {
      font-size: 19px;
      color: #d9101d;
      line-height: 0.7;
      vertical-align: middle;
      margin-left: -12px; }
  .msds-button-icon__text {
    color: #d0050d;
    min-width: 64%;
    text-align: center;
    font-size: 15px;
    padding: 0 16px; }

.msds-button-icon2 {
  margin: 15px 0 0; }
  .msds-button-icon2.is-hidden {
    display: none; }
  .msds-button-icon2__inner {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; }
    .msds-button-icon2__inner [class^="msds-icon"] {
      width: 17px;
      height: 17px;
      margin-left: -12px; }
  .msds-button-icon2__button {
    color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    padding-left: 14px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #d9101d;
    background: #d9101d;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    box-sizing: border-box;
    text-decoration: none; }
    .msds-button-icon2__button:visited, .msds-button-icon2__button:active, .msds-button-icon2__button:hover {
      color: #fff; }
    .msds-button-icon2__button[disabled] {
      pointer-events: none; }
    .msds-button-icon2__button[disabled] {
      pointer-events: none; }
    @media screen and (max-width: 767px) {
      .msds-button-icon2__button {
        height: 47px;
        width: 100%;
        padding-left: 0; } }
    @media (min-width: 768px), print {
      .msds-button-icon2__button {
        min-width: 300px; } }
    .msds-button-icon2__button [class^=oh-icon] {
      font-size: 19px;
      color: #fff;
      line-height: 0.5;
      margin-left: -12px;
      vertical-align: middle; }
  .msds-button-icon2__text {
    color: #fff;
    min-width: 64%;
    text-align: center;
    font-size: 15px;
    padding: 0 16px; }

[class^=msds-button].is-animate-bound {
  margin-top: 20px;
  -webkit-animation: bound 1.33s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
          animation: bound 1.33s cubic-bezier(0.39, 0.575, 0.565, 1) infinite; }

.msds-button-wrap {
  position: relative;
  margin-top: 10px; }

/*
---
name: 強調
category:
  - Text
---

```html
<p>
  <b class="msds-emphasis">4</b>件の条件が保存されています。
</p>

```
*/
.msds-emphasis {
  margin-right: 5px;
  color: #d9101d;
  font-size: 32px; }
  @media screen and (max-width: 767px) {
    .msds-emphasis {
      font-size: 22px; } }

/*
---
name: ログイン
category:
  - Login
---

```html

```
*/
.msds-login__item {
  border: 1px solid #ccc; }

.msds-login__heading {
  padding: 10px;
  background-color: #F5F5F5;
  box-shadow: inset 0 0 0 1px #FFF;
  text-align: center;
  font-size: 18px;
  font-weight: bold; }

.msds-login__body {
  padding: 20px 20px 0; }
  @media screen and (max-width: 767px) {
    .msds-login__body {
      padding-bottom: 20px; } }
  .msds-login__body p.is-error {
    font-size: 14px;
    font-weight: bold;
    color: #ff0000; }
    @media screen and (max-width: 767px) {
      .msds-login__body p.is-error {
        line-height: 1.4; } }

.msds-login__text {
  font-size: 14px; }
  .msds-login__text b {
    color: #FF0000; }
  .msds-login__text--strong {
    font-size: 18px;
    font-weight: bold; }

.msds-login__noteLink {
  display: inline-block;
  color: #1a1a1a;
  text-decoration: underline;
  padding-left: .9em;
  position: relative; }
  .msds-login__noteLink:before {
    content: "";
    display: block;
    position: absolute;
    left: 1px;
    top: .5em;
    width: .45em;
    height: .45em;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg); }
  .msds-login__noteLink:hover {
    text-decoration: none; }

.msds-login__inputarea {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 4px; }
  @media screen and (max-width: 767px) {
    .msds-login__inputarea {
      padding: 0;
      background-color: #fff; } }

.msds-login__inputTable {
  width: 100%; }

.msds-login__inputHead {
  padding-top: 10px;
  padding-right: 10px;
  white-space: nowrap;
  text-align: right;
  font-size: 14px; }
  @media screen and (max-width: 767px) {
    .msds-login__inputHead {
      display: block;
      width: 100%;
      text-align: left; } }

.msds-login__inputData {
  padding-top: 10px;
  width: 100%; }
  @media screen and (max-width: 767px) {
    .msds-login__inputData {
      display: block;
      padding-top: 0; } }
  .msds-login__inputData .oh-inputText__error {
    font-size: 14px;
    font-weight: bold;
    color: #ff0000;
    padding-bottom: 10px; }

.msds-login__inputRow:first-child .msds-login__inputHead {
  padding-top: 0; }

.msds-login__inputRow:first-child .msds-login__inputData {
  padding-top: 0; }

/*
---
name: ステップナビ
category:
  - Stepnavi
---

```html
<div class="msds-stepnavi">
  <div class="msds-stepnavi__item is-active"><span class="msds-stepnavi__text">1 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">2 テキスト</span></div>
<!-- /.msds-stepnavi --></div>

```

```html
<div class="msds-stepnavi">
  <div class="msds-stepnavi__item is-active"><span class="msds-stepnavi__text">1 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">2 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">3 テキスト</span></div>
<!-- /.msds-stepnavi --></div>

```

```html
<div class="msds-stepnavi">
  <div class="msds-stepnavi__item is-active"><span class="msds-stepnavi__text">1 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">2 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">3 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">4 テキスト</span></div>
<!-- /.msds-stepnavi --></div>

```

```html
<div class="msds-stepnavi">
  <div class="msds-stepnavi__item is-active"><span class="msds-stepnavi__text">1 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">2 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">3 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">4 テキスト</span></div>
  <div class="msds-stepnavi__item"><span class="msds-stepnavi__text">5 テキスト</span></div>
<!-- /.msds-stepnavi --></div>

```
*/
.msds-stepnavi {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0 0 30px; }
  .msds-stepnavi__item {
    display: table-cell; }
    .msds-stepnavi__item:first-child {
      padding-left: 0; }
  .msds-stepnavi__text {
    position: relative;
    display: block;
    margin-right: 12px;
    padding: 8px 0;
    height: 34px;
    background-color: #F5F5F5;
    border: 1px solid #ccc;
    text-align: center;
    white-space: nowrap;
    color: #848484;
    font-size: 12px;
    box-sizing: border-box; }
    .msds-stepnavi__text:after {
      position: absolute;
      top: -1px;
      right: -12px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 17px 0 17px 11px;
      border-color: transparent transparent transparent #ccc; }
    .msds-stepnavi__text:before {
      position: absolute;
      top: 0;
      right: -11px;
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 16px 0 16px 11px;
      border-color: transparent transparent transparent #F5F5F5;
      z-index: 2; }
    .msds-stepnavi__item.is-selected .msds-stepnavi__text,
    .msds-stepnavi__item.is-active .msds-stepnavi__text {
      font-weight: bold;
      color: #FFF;
      background-color: #0088c3;
      border-color: #0088c3; }
      .msds-stepnavi__item.is-selected .msds-stepnavi__text:before, .msds-stepnavi__item.is-selected .msds-stepnavi__text:after,
      .msds-stepnavi__item.is-active .msds-stepnavi__text:before,
      .msds-stepnavi__item.is-active .msds-stepnavi__text:after {
        border-left-color: #0088c3; }
    .msds-stepnavi__item:last-child .msds-stepnavi__text {
      margin-right: 0; }
      .msds-stepnavi__item:last-child .msds-stepnavi__text:before, .msds-stepnavi__item:last-child .msds-stepnavi__text:after {
        display: none; }

.oh-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 30; }
  .oh-popup__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.3); }
    @media screen and (max-width: 767px) {
      .oh-popup__overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1; } }
  .oh-popup__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 37px;
    border-radius: 4px;
    background-color: #fff;
    border: 5px solid #0088c3;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    width: 647px;
    min-height: 127px; }
    @media screen and (max-width: 767px) {
      .oh-popup__inner {
        border: none;
        flex: 0 0 auto;
        position: relative;
        display: block;
        box-sizing: border-box;
        width: 276px;
        padding: 30px 0 0;
        background: #fff;
        border-radius: 5px;
        z-index: 2; } }
  .oh-popup__text, .oh-popup__text2 {
    margin: 0;
    color: #0088c3;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.8;
    text-align: center; }
    .oh-popup__text + [class^="oh-popup__"], .oh-popup__text2 + [class^="oh-popup__"] {
      margin-top: 20px; }
      @media screen and (max-width: 767px) {
        .oh-popup__text + [class^="oh-popup__"], .oh-popup__text2 + [class^="oh-popup__"] {
          margin-top: 30px; } }
    .oh-popup__text--normal, .oh-popup__text2--normal {
      font-weight: normal; }
    .oh-popup__text--left, .oh-popup__text2--left {
      text-align: left; }
    @media screen and (max-width: 767px) {
      .oh-popup__text, .oh-popup__text2 {
        margin: 0;
        font-weight: 700;
        font-size: 15px;
        color: #000; } }
  .oh-popup__text2 {
    color: #000;
    font-size: 14px; }
  .oh-popup__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 27px;
    color: #0088c3;
    font-size: 30px;
    line-height: 1;
    text-decoration: none; }
    @media screen and (max-width: 767px) {
      .oh-popup__close {
        display: none; } }
  .oh-popup__buttonGroup {
    display: flex;
    justify-content: center; }
    @media screen and (max-width: 767px) {
      .oh-popup__buttonGroup {
        margin: 30px 0 0;
        border-top: 1px solid #ccc;
        display: flex;
        justify-content: center;
        border-radius: 0 0 5px 5px;
        background-color: #f7f7f7; } }
  .oh-popup__button {
    background-color: #0088c3;
    display: block;
    min-width: 140px;
    margin: 0 0 0 40px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    font-weight: bold; }
    .oh-popup__button--normal {
      font-weight: normal; }
    .oh-popup__button:first-child {
      margin-left: 0; }
    @media screen and (max-width: 767px) {
      .oh-popup__button {
        background-color: transparent;
        border-radius: 0;
        display: inline-block;
        min-width: 0;
        width: 100%;
        padding: 10px;
        margin: 0;
        text-align: center;
        text-decoration: none;
        color: #0088c3;
        font-weight: 700; }
        .oh-popup__button + .oh-popup__button {
          border-left: 1px solid #ccc; } }
  .oh-popup--error .oh-popup__inner {
    background-color: #5f5f5f;
    border-color: #5f5f5f; }
  .oh-popup--error .oh-popup__text {
    color: #FFF; }

/*
---
name: ポップアップ
category:
  - module
---

```html

<div class="oh-popup2"><div class="oh-popup2__main"><div class="oh-popup2__inner">
  <div class="oh-popup2__head">
    <a href="#" class="oh-popup2__close oh-icon-times-circle"></a>
    <h2 class="oh-popup2__title">便利な機能ボタン</h2>
  </div>
  <div class="oh-popup2__body">
    <div class="oh-popup2__section">
      <p class="oh-popup2__text">便利な機能で家選びをサポート！</p>
      <ul class="oh-popup2__list">
        <li class="oh-popup2__listItem"><i class="oh-popup2__icon oh-icon-star"></i>お気に入り物件</li>
        <li class="oh-popup2__listItem"><i class="oh-popup2__icon oh-icon-file-text"></i>保存した条件</li>
        <li class="oh-popup2__listItem"><i class="oh-popup2__icon oh-icon-clock-o"></i>最近見た物件</li>
      </ul>
    </div>
    <div class="oh-popup2__section">
      <p class="oh-popup2__text2">ログインすると他のパソコンやスマートフォンでも、登録した内容を利用できます。</p>
      <div class="oh-popup2__button">
          <a class="oh-button" href="#"><span class="oh-button__inner">
            <span class="oh-button__text">ログイン</span>
          </span></a>
      </div>
      <div class="oh-popup2__checkbox oh-checkbox">
        <input type="checkbox" name="" id="popup" class="oh-checkbox__box">
        <label class="oh-checkbox__label" for="popup">
          <span class="oh-checkbox__icon"></span>
          <span class="oh-checkbox__text">今後このメッセージを表示しない</span>
        </label>
      <!-- /.oh-checkbox --></div>
    </div>
  </div>
<!-- /.oh-popup2 --></div></div></div>

```
*/
.oh-popup2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  width: 990px;
  padding: 0 20px;
  margin: 0 auto; }
  .oh-popup2__main {
    position: absolute;
    top: 68px;
    right: 144px;
    box-sizing: border-box;
    width: 240px;
    background: url("../img/bg-check.png") repeat 0 0;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }
  .oh-popup2__inner {
    background-color: #fff; }
  .oh-popup2__head {
    position: relative;
    padding: 10px;
    background-color: #333333; }
    .oh-popup2__head:before {
      position: absolute;
      top: -10px;
      left: 20px;
      display: block;
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 9px 10px 9px;
      border-color: transparent transparent #333333 transparent; }
  .oh-popup2__title {
    margin: 0;
    color: #ffe148;
    font-size: 14px; }
  .oh-popup2__text {
    margin: 0 0 10px;
    font-size: 13px; }
  .oh-popup2__text2 {
    margin: 0 0 10px;
    font-size: 10px; }
  .oh-popup2__list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0; }
  .oh-popup2__listItem {
    font-weight: bold;
    font-size: 13px; }
  .oh-popup2__icon {
    color: #666;
    margin-right: 3px; }
  .oh-popup2__section {
    margin: 0 0 10px;
    padding: 10px 0 0;
    border-top: 1px solid #CCCCCC; }
    .oh-popup2__section:nth-of-type(1) {
      border: none;
      padding: 0; }
  .oh-popup2__button {
    margin: 0 0 10px; }
  .oh-popup2__checkbox {
    font-size: 10px; }
    .oh-popup2__checkbox .oh-checkbox__label {
      min-height: 22px; }
    .oh-popup2__checkbox .oh-checkbox__text {
      height: auto; }
    .oh-popup2__checkbox .oh-checkbox__icon:before {
      width: 22px;
      font-size: 20px;
      line-height: 1; }
    .oh-popup2__checkbox .oh-checkbox__icon:after {
      width: 22px;
      height: 22px; }
  .oh-popup2__close {
    position: absolute;
    top: 50%;
    right: 5px;
    color: #cccccc;
    font-size: 20px;
    line-height: 20px;
    margin-top: -10px;
    text-decoration: none; }
  .oh-popup2__body {
    padding: 10px 10px 0;
    overflow: hidden; }

.msds-tab {
  width: 100%;
  background-color: #262626;
  margin-bottom: 20px; }
  @media screen and (max-width: 767px) {
    .msds-tab {
      width: auto;
      margin-right: -15px;
      margin-left: -15px; } }
  .msds-tab__inner {
    padding: 10px 15px 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; }
    @media (min-width: 768px), print {
      .msds-tab__inner {
        max-width: 550px;
        margin: 0 auto; } }
  .msds-tab__item {
    display: block;
    font-size: 16px;
    width: 180px;
    height: 50px;
    background-color: #414141;
    color: #ccc;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    @media screen and (max-width: 767px) {
      .msds-tab__item {
        flex: 1;
        font-size: 16px;
        height: 35px; } }
    .msds-tab__item + .msds-tab__item {
      margin-left: 4px; }
    .msds-tab__item.is-active, .msds-tab__item.is-active:hover {
      background-color: #fff;
      color: #000; }
    .msds-tab__item:hover {
      background-color: #666; }

.msds-msnSearch {
  background-color: #eee;
  margin: 20px 0 50px;
  padding: 30px; }
  @media screen and (max-width: 767px) {
    .msds-msnSearch {
      padding: 0;
      margin-bottom: 30px; } }
  @media (min-width: 768px), print {
    .msds-msnSearch__group {
      display: flex;
      align-items: flex-start;
      width: 100%; }
      .msds-msnSearch__group + .msds-msnSearch__group {
        margin-top: 14px; } }
  @media (min-width: 768px), print {
    .msds-msnSearch__heading {
      text-align: right;
      width: 130px;
      font-weight: bold;
      flex: none;
      line-height: 40px; } }
  @media screen and (max-width: 767px) {
    .msds-msnSearch__heading {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 14px 12px;
      border-bottom: 1px solid #fff;
      z-index: 2;
      font-size: 15px;
      background-color: #dadada;
      font-weight: bold;
      color: #666; } }
  @media (min-width: 768px), print {
    .msds-msnSearch__itemGroup {
      width: 100%;
      margin-left: 20px; } }
  .msds-msnSearch__itemGroupInner {
    display: flex;
    flex-wrap: wrap; }
    @media screen and (max-width: 767px) {
      .msds-msnSearch__itemGroupInner {
        width: 100%;
        padding: 15px; } }
  .msds-msnSearch__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    font-size: 14px;
    color: #000;
    margin: 3px;
    padding: 6px 14px;
    border: 1px solid #dfdfdf; }
    .msds-msnSearch__item.is-active {
      background-color: #d9d9d9;
      font-weight: bold; }
    .msds-msnSearch__item:hover {
      opacity: 0.8; }
    @media screen and (max-width: 767px) {
      .msds-msnSearch__item {
        padding: 4px 14px;
        line-height: 1.4; } }
  .msds-msnSearch__itemDetail {
    font-size: 12px;
    color: #999; }
  @media (min-width: 768px), print {
    .msds-msnSearch__icon-plus {
      display: none; } }
  @media screen and (max-width: 767px) {
    .msds-msnSearch__icon-plus {
      position: absolute;
      right: 18px;
      top: 18px;
      display: block;
      width: 11px;
      height: 11px;
      fill: currentColor; } }
  @media (min-width: 768px), print {
    .msds-msnSearch__heading {
      pointer-events: none; } }
  @media screen and (max-width: 767px) {
    .msds-msnSearch__group.is-open .msds-msnSearch__icon-plus--rect01 {
      display: none; }
    .msds-msnSearch [data-accordion-body] {
      pointer-events: none;
      height: 0;
      transition: height 0.5s;
      overflow: hidden; }
    .msds-msnSearch [data-accordion].is-open [data-accordion-body] {
      pointer-events: auto;
      height: auto; } }

@media screen and (max-width: 767px) {
  .msds-fullWidth {
    margin-left: -15px;
    margin-right: -15px; } }

.msds-about-mainImage {
  position: relative;
  margin-top: 60px; }
  @media screen and (max-width: 767px) {
    .msds-about-mainImage {
      margin-top: 20px; } }
  .msds-about-mainImage__img {
    width: 100%; }
    @media screen and (max-width: 767px) {
      .msds-about-mainImage__img--pc {
        display: none; } }
    @media (min-width: 768px), print {
      .msds-about-mainImage__img--sp {
        display: none; } }
  .msds-about-mainImage__heading {
    position: absolute; }
    @media (min-width: 768px), print {
      .msds-about-mainImage__heading {
        top: 50px;
        left: 50px;
        width: 410px; } }
    @media screen and (max-width: 767px) {
      .msds-about-mainImage__heading {
        top: 25px;
        left: 20px;
        width: 66vw; } }
  .msds-about-mainImage__textBlock {
    display: flex;
    padding: 30px;
    background-color: #262626; }
    @media screen and (max-width: 767px) {
      .msds-about-mainImage__textBlock {
        flex-direction: column; } }
  .msds-about-mainImage__subHeading {
    flex-basis: 275px;
    padding-right: 30px;
    flex: none; }
    @media screen and (max-width: 767px) {
      .msds-about-mainImage__subHeading {
        flex-basis: auto;
        padding: 0; } }
  .msds-about-mainImage__subHeadingText {
    width: 245px; }
    @media screen and (max-width: 767px) {
      .msds-about-mainImage__subHeadingText {
        width: 215px; } }
  .msds-about-mainImage__text {
    flex-basis: 625px;
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 16px;
    font-weight: normal;
    flex-grow: 1;
    line-height: 1.7; }
    @media screen and (max-width: 767px) {
      .msds-about-mainImage__text {
        border-left: none;
        padding-left: 0;
        padding-top: 16px;
        flex-basis: auto; } }

.msds-iconHeadingBox__heading {
  display: flex;
  align-items: center;
  position: relative; }
  @media (min-width: 768px), print {
    .msds-iconHeadingBox__heading {
      pointer-events: none; } }
  @media screen and (max-width: 767px) {
    .msds-iconHeadingBox__heading {
      height: auto;
      min-height: 80px;
      padding: 10px 65px 10px 17px;
      border: 1px solid #d9d9d9;
      border-radius: 5px 5px 0 0;
      background-color: #f8f8f8; } }

@media (min-width: 768px), print {
  .msds-iconHeadingBox__spBreak {
    display: none; } }

.msds-iconHeadingBox__icon-plus {
  display: block;
  position: absolute;
  right: 24px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: currentColor; }
  .msds-iconHeadingBox.is-open .msds-iconHeadingBox__icon-plus--rect01 {
    display: none; }
  @media (min-width: 768px), print {
    .msds-iconHeadingBox__icon-plus {
      display: none; } }

.msds-iconHeadingBox__headingGroup {
  display: flex;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .msds-iconHeadingBox__headingGroup {
      flex-direction: column;
      align-items: flex-start; } }

.msds-iconHeadingBox__headingText {
  font-size: 18px;
  font-weight: bold; }

.msds-iconHeadingBox__headingSubText {
  margin-left: 16px; }
  @media screen and (max-width: 767px) {
    .msds-iconHeadingBox__headingSubText {
      margin-left: 0;
      margin-top: 3px;
      font-size: 12px; } }

.msds-iconHeadingBox__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: #262626;
  margin-right: 15px;
  flex: none;
  border-radius: 30px; }
  @media screen and (max-width: 767px) {
    .msds-iconHeadingBox__icon {
      width: 60px;
      height: 60px;
      margin-right: 15px; } }
  .msds-iconHeadingBox__icon::before {
    content: "";
    display: block;
    padding: 5px;
    background-repeat: no-repeat; }
  .msds-iconHeadingBox__icon--train::before {
    background-image: url(/about/img/ico-train.svg);
    width: 15px;
    height: 24px; }
    @media screen and (max-width: 767px) {
      .msds-iconHeadingBox__icon--train::before {
        width: 20px;
        height: 32px; } }
  .msds-iconHeadingBox__icon--money::before {
    background-image: url(/about/img/ico-money.svg);
    width: 22px;
    height: 19px; }
    @media screen and (max-width: 767px) {
      .msds-iconHeadingBox__icon--money::before {
        width: 30px;
        height: 26px; } }
  .msds-iconHeadingBox__icon--home::before {
    background-image: url(/about/img/ico-home.svg);
    width: 22px;
    height: 19px; }
    @media screen and (max-width: 767px) {
      .msds-iconHeadingBox__icon--home::before {
        width: 31px;
        height: 26px; } }
  .msds-iconHeadingBox__icon--list::before {
    background-image: url(/about/img/ico-list.svg);
    width: 33px;
    height: 24px; }
    @media screen and (max-width: 767px) {
      .msds-iconHeadingBox__icon--list::before {
        width: 33px;
        height: 24px; } }
  .msds-iconHeadingBox__icon--arrow::before {
    background-image: url(/about/img/ico-arrow.svg);
    width: 37px;
    height: 18px;
    position: relative;
    left: -4px; }
    @media screen and (max-width: 767px) {
      .msds-iconHeadingBox__icon--arrow::before {
        width: 56px;
        height: 25px; } }
  .msds-iconHeadingBox__icon--team::before {
    background-image: url(/about/img/ico-team.svg);
    width: 28px;
    height: 28px; }
    @media screen and (max-width: 767px) {
      .msds-iconHeadingBox__icon--team::before {
        width: 39px;
        height: 39px; } }

@media screen and (max-width: 767px) {
  .msds-iconHeadingBox {
    margin-bottom: 25px; } }

.msds-iconHeadingBox__body {
  overflow: hidden;
  height: auto;
  transition: height 500ms;
  padding-top: 30px; }
  @media screen and (max-width: 767px) {
    .msds-iconHeadingBox__body {
      height: 0;
      border-bottom: 0;
      padding: 0;
      pointer-events: none; }
      .msds-iconHeadingBox__body::before {
        content: "";
        display: block;
        padding-top: 30px; }
      .msds-iconHeadingBox.is-open .msds-iconHeadingBox__body {
        height: auto;
        pointer-events: auto; } }

@media (min-width: 768px), print {
  .msds-iconHeadingBox--accordionPCEnable .msds-iconHeadingBox__heading {
    pointer-events: auto;
    height: 84px;
    border: 1px solid #d9d9d9;
    padding: 0 20px;
    border-radius: 5px 5px 0 0;
    background-color: #f8f8f8; }
    .msds-iconHeadingBox--accordionPCEnable .msds-iconHeadingBox__heading:hover {
      cursor: pointer; }
  .msds-iconHeadingBox--accordionPCEnable .msds-iconHeadingBox__headingText {
    font-size: 20px; }
  .msds-iconHeadingBox--accordionPCEnable .msds-iconHeadingBox__headingSubText {
    font-size: 20px; }
  .msds-iconHeadingBox--accordionPCEnable .msds-iconHeadingBox__icon {
    width: 60px;
    height: 60px;
    margin-right: 20px; }
  .msds-iconHeadingBox--accordionPCEnable .msds-iconHeadingBox__icon-plus {
    display: block; }
  .msds-iconHeadingBox--accordionPCEnable .msds-iconHeadingBox__body {
    pointer-events: none;
    height: 0; }
  .msds-iconHeadingBox--accordionPCEnable.is-open .msds-iconHeadingBox__body {
    height: auto;
    pointer-events: auto; } }

.msds-gallery {
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
  background: #262626;
  margin-bottom: 60px; }
  .msds-gallery__group {
    padding: 25px 0 40px;
    text-align: right; }
    .msds-gallery__group:not(:last-child) {
      border-bottom: 1px solid #404040; }
    @media screen and (max-width: 767px) {
      .msds-gallery__group {
        padding: 20px 0; } }
  .msds-gallery__title {
    padding: 0 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #ccc; }
    @media screen and (max-width: 767px) {
      .msds-gallery__title {
        padding-bottom: 20px; } }
  .msds-gallery__content {
    position: relative;
    overflow: hidden;
    height: 308px; }
    .msds-gallery__content--invisible {
      display: none; }
    .msds-gallery__group--theme .msds-gallery__content {
      height: 140px; }
  .msds-gallery__moreLink {
    display: inline-block;
    position: relative;
    color: inherit;
    padding-left: 0.9em;
    line-height: 1.3;
    text-decoration: underline;
    color: #ccc;
    margin: 15px 45px 0 0;
    font-size: 14px; }
    @media screen and (max-width: 767px) {
      .msds-gallery__moreLink {
        margin-right: 20px; } }
    .msds-gallery__moreLink:hover {
      text-decoration: none; }
    .msds-gallery__moreLink::before {
      content: "";
      display: block;
      position: absolute;
      left: 1px;
      top: 0.4em;
      width: 0.45em;
      height: 0.45em;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg); }
  @media (min-width: 768px), print {
    .msds-gallery__left, .msds-gallery__right {
      cursor: pointer;
      -webkit-user-select: none;
          -ms-user-select: none;
              user-select: none;
      position: absolute;
      top: 0;
      z-index: +1;
      width: 40px;
      height: 100%;
      background: rgba(38, 38, 38, 0.7); }
      .msds-gallery__left[disabled], .msds-gallery__right[disabled] {
        pointer-events: none; }
      .msds-gallery__left:hover, .msds-gallery__right:hover {
        background: rgba(38, 38, 38, 0.9); }
      .msds-gallery__left::after, .msds-gallery__right::after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 15px;
        height: 15px;
        margin-top: -10px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff; }
      .msds-gallery__left.js-is-disabled, .msds-gallery__right.js-is-disabled {
        display: none;
        pointer-events: none; }
    .msds-gallery__left {
      left: 0; }
      .msds-gallery__left::after {
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        margin-left: -4px; }
    .msds-gallery__right {
      right: 0; }
      .msds-gallery__right::after {
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
        margin-left: -10px; } }
  .msds-gallery__contentInner {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding-bottom: 30px; }
  .msds-gallery__items {
    white-space: nowrap;
    font-size: 0; }
  .msds-gallery__item {
    display: inline-block;
    width: 300px;
    margin-right: 10px;
    font-size: 1rem;
    vertical-align: top;
    white-space: normal; }
    @media screen and (max-width: 767px) {
      .msds-gallery__item:first-child {
        margin-left: 15px; }
      .msds-gallery__item:last-child {
        margin-right: 15px; } }
    @media (min-width: 768px), print {
      .msds-gallery__item:first-child {
        margin-left: 50px; }
      .msds-gallery__item:last-child {
        margin-right: 50px; } }
  .msds-galleryMansion {
    display: block;
    width: 300px;
    background: #000;
    color: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); }
    .msds-galleryMansion__image {
      height: 250px;
      overflow: hidden; }
    .msds-galleryMansion__imageExpand {
      display: block;
      position: relative; }
      @media (min-width: 768px), print {
        .msds-galleryMansion__imageExpand img {
          transition: -webkit-transform 200ms ease-in-out;
          transition: transform 200ms ease-in-out;
          transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; }
        .msds-galleryMansion__imageExpand:hover img {
          -webkit-transform: scale(1.03);
                  transform: scale(1.03); } }
      .msds-galleryMansion__imageExpand::after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 32px;
        height: 32px;
        background: rgba(0, 0, 0, 0.8) url(/res/common/img/components/icon_expand_white.svg) no-repeat 0 0;
        background-size: contain; }
    .msds-galleryMansion__name {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      padding: 10px 10px;
      line-height: 1.4;
      font-size: 13px; }
      .msds-galleryMansion__name small {
        font-size: 11px; }
    .msds-galleryMansion__description {
      height: 65px;
      overflow: hidden;
      padding: 0 10px;
      color: #b3b3b3;
      font-size: 11px;
      line-height: 1.5; }

.msds-steps__item {
  display: flex;
  flex-direction: column; }
  .msds-steps__item:last-child .msds-steps__arrow {
    visibility: hidden; }
  .msds-steps__item:last-child .msds-steps__text::after {
    display: none; }

.msds-steps__row {
  display: flex;
  flex-direction: row; }

@media (min-width: 768px), print {
  .msds-steps__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    flex-shrink: 0; }
    .msds-steps__arrow::after {
      content: "";
      display: block;
      background: url("/res/msd/img/arrow-steps.svg") no-repeat center center/100% 100%;
      width: 9px;
      height: 9px; } }

.msds-steps__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 27px;
  font-size: 12px;
  font-weight: bold;
  background-color: #add9f6; }

.msds-steps__labelInt {
  font-size: 16px;
  margin-left: 5px; }

.msds-steps__textColumn {
  margin-left: 15px; }

.msds-steps__heading {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-left: 15px; }

.msds-steps__text {
  position: relative;
  font-size: 15px;
  line-height: 1.7;
  padding-bottom: 25px;
  margin-left: 15px; }
  @media screen and (max-width: 767px) {
    .msds-steps__text {
      margin-top: 10px;
      margin-left: 0;
      padding-bottom: 40px; }
      .msds-steps__text::after {
        content: "";
        display: block;
        position: absolute;
        left: 30px;
        bottom: 16px;
        background: url("/res/msd/img/arrow-steps.svg") no-repeat center center/100% 100%;
        width: 9px;
        height: 9px; } }

.msds-note {
  font-size: 12px;
  color: #808080; }
  @media screen and (max-width: 767px) {
    .msds-note {
      font-size: 14px; } }

.msds-newArrival {
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
  background: #262626; }
  .msds-newArrival__group {
    padding-top: 25px;
    padding-bottom: 60px; }
    .msds-newArrival__group:not(:last-child) {
      border-bottom: 1px solid #404040; }
    @media screen and (max-width: 767px) {
      .msds-newArrival__group {
        padding-bottom: 45px; } }
  .msds-newArrival__title {
    padding: 0 20px 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #ccc; }
  .msds-newArrival [data-areaSwitcher-content] {
    display: none; }
    .msds-newArrival [data-areaSwitcher-content].is-open {
      display: block; }
  .msds-newArrival__content {
    position: relative;
    height: 275px;
    overflow: hidden; }
    .msds-newArrival__content--campaign {
      height: 263px; }
  .msds-newArrival__areaSwitcher {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px 30px 15px; }
    @media (min-width: 768px), print {
      .msds-newArrival__areaSwitcher {
        max-width: 490px;
        margin: 0 auto 30px; } }
  .msds-newArrival__areaSwitcherButton {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #414141;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    cursor: pointer; }
    .msds-newArrival__areaSwitcherButton + div {
      margin-left: 4px; }
    .msds-newArrival__areaSwitcherButton:hover {
      background-color: #666; }
    .msds-newArrival__areaSwitcherButton.is-active {
      background-color: #fff;
      color: #000; }
      .msds-newArrival__areaSwitcherButton.is-active:hover {
        background-color: #fff; }
  @media (min-width: 768px), print {
    .msds-newArrival__left, .msds-newArrival__right {
      cursor: pointer;
      -webkit-user-select: none;
          -ms-user-select: none;
              user-select: none;
      position: absolute;
      top: 0;
      z-index: +1;
      width: 45px;
      height: 270px;
      background: rgba(38, 38, 38, 0.7); }
      .msds-newArrival__left[disabled], .msds-newArrival__right[disabled] {
        pointer-events: none; }
      .msds-newArrival__left:hover, .msds-newArrival__right:hover {
        background: rgba(38, 38, 38, 0.9); }
      .msds-newArrival__left::after, .msds-newArrival__right::after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 15px;
        height: 15px;
        margin-top: -10px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff; }
      .msds-newArrival__left.js-is-disabled, .msds-newArrival__right.js-is-disabled {
        display: none;
        pointer-events: none; }
      .msds-newArrival__left--campaign, .msds-newArrival__right--campaign {
        height: 100%; }
    .msds-newArrival__left {
      left: 0; }
      .msds-newArrival__left::after {
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        margin-left: -4px; }
    .msds-newArrival__right {
      right: 0; }
      .msds-newArrival__right::after {
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
        margin-left: -10px; } }
  .msds-newArrival__contentInner {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding-bottom: 30px;
    position: relative; }
  .msds-newArrival__items {
    white-space: nowrap;
    font-size: 0; }
  .msds-newArrival__item {
    display: inline-block;
    width: 220px;
    margin-right: 10px;
    font-size: 1rem;
    vertical-align: top;
    white-space: normal; }
    @media screen and (max-width: 767px) {
      .msds-newArrival__item:first-child {
        margin-left: 15px; }
      .msds-newArrival__item:last-child {
        margin-right: 15px; } }
    @media (min-width: 768px), print {
      .msds-newArrival__item:first-child {
        margin-left: 50px; }
      .msds-newArrival__item:last-child {
        margin-right: 50px; } }
  .msds-newArrivalMansion {
    display: block;
    width: 220px;
    height: 270px;
    background: #000;
    color: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); }
    .msds-newArrivalMansion:hover .msds-newArrivalMansion__image img {
      -webkit-transform: scale(1.03);
              transform: scale(1.03); }
    .msds-newArrivalMansion__image {
      height: 135px;
      overflow: hidden; }
      .msds-newArrivalMansion__image img {
        transition: -webkit-transform 200ms ease-in-out;
        transition: transform 200ms ease-in-out;
        transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out; }
    .msds-newArrivalMansion__name {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      height: 70px;
      overflow: hidden;
      padding: 5px 10px 0;
      line-height: 1.4;
      font-weight: bold; }
      .msds-newArrivalMansion__name small {
        font-size: 13px; }
    .msds-newArrivalMansion__description {
      height: 65px;
      overflow: hidden;
      padding: 0 10px;
      color: #b3b3b3;
      font-size: 11px;
      line-height: 1.5; }
  .msds-newArrivalCampaign {
    display: block;
    width: 220px;
    height: 258px;
    background: #000;
    color: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); }
    .msds-newArrivalCampaign:hover .msds-newArrivalCampaign__image img {
      -webkit-transform: scale(1.03);
              transform: scale(1.03); }
    .msds-newArrivalCampaign__image {
      width: 100%;
      padding: 10px;
      overflow: hidden; }
      .msds-newArrivalCampaign__image img {
        transition: -webkit-transform 200ms ease-in-out;
        transition: transform 200ms ease-in-out;
        transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
        background-color: #000; }
    .msds-newArrivalCampaign__heading {
      height: 45px;
      padding: 0 10px;
      overflow: hidden;
      font-size: 13px;
      line-height: 18px;
      font-weight: bold; }
    .msds-newArrivalCampaign__text {
      font-size: 11px;
      color: #b3b3b3;
      padding: 10px; }

.msds-mainVisual {
  position: relative; }
  @media screen and (max-width: 767px) {
    .msds-mainVisual.is-slider-inactive {
      padding-bottom: 60px; } }
  .msds-mainVisual.is-slider-inactive .msds-mainVisual__indicatorGroup {
    display: none; }
  @media screen and (max-width: 767px) {
    .msds-mainVisual {
      padding-bottom: 12px;
      background-color: #f1f1f1; } }
  .msds-mainVisual__slideItem {
    position: relative;
    display: block;
    color: #000; }
    @media (min-width: 768px), print {
      .msds-mainVisual__slideItem {
        z-index: 0;
        overflow: hidden; } }
  .msds-mainVisual__slideImageContainer {
    position: relative;
    width: 100%;
    overflow: hidden; }
    .swiper-animating .msds-mainVisual__slideImageContainer {
      -webkit-animation: mv-scale 30s ease-out forwards;
              animation: mv-scale 30s ease-out forwards; }
    @media (min-width: 0px) {
      @-webkit-keyframes mv-scale {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1); }
        100% {
          -webkit-transform: scale(1.1);
                  transform: scale(1.1); } }
      @keyframes mv-scale {
        0% {
          -webkit-transform: scale(1);
                  transform: scale(1); }
        100% {
          -webkit-transform: scale(1.1);
                  transform: scale(1.1); } } }
    @media (min-width: 768px), print {
      .msds-mainVisual__slideImageContainer {
        height: 420px; } }
  @media (min-width: 768px), print {
    .msds-mainVisual__slideImage {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      min-width: 1280px;
      min-height: 100%;
      width: 100%; }
      .msds-mainVisual__slideImage--sp {
        display: none; } }
  @media screen and (max-width: 767px) {
    .msds-mainVisual__slideImage--pc {
      display: none; } }
  .msds-mainVisual__textbox {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 1; }
    @media screen and (max-width: 767px) {
      .msds-mainVisual__textbox {
        width: calc(100% - 30px);
        top: auto;
        bottom: -45px;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%); } }
    @media (min-width: 768px), print {
      .msds-mainVisual__textbox:hover {
        opacity: 0.9; } }
  .msds-mainVisual__indicatorGroup.swiper-pagination-bullets {
    display: flex;
    justify-content: center;
    margin-top: 54px; }
    @media screen and (max-width: 767px) {
      .msds-mainVisual__indicatorGroup.swiper-pagination-bullets {
        position: relative;
        bottom: 0; } }
    @media (min-width: 768px), print {
      .msds-mainVisual__indicatorGroup.swiper-pagination-bullets {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        bottom: 20px; } }
  .msds-mainVisual__indicatorItem {
    display: block;
    width: 12px;
    height: 12px;
    background-color: #dcdcdc;
    opacity: 0.8;
    border-radius: 6px;
    transition: background-color 200ms; }
    .msds-mainVisual__indicatorItem + .msds-mainVisual__indicatorItem {
      margin-left: 18px; }
    .msds-mainVisual__indicatorItem.is-active {
      background-color: #000; }
  .msds-mainVisual__imagebox {
    position: absolute;
    left: 50%;
    bottom: 50%;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    padding: 25px 10px;
    width: 550px; }
    .msds-mainVisual__imagebox .msds-mainVisual__textimage--pc {
      height: auto; }
  .msds-mainVisual__slideImageContainer-no-zoomin {
    height: 420px;
    position: relative;
    width: 100%;
    overflow: hidden; }
  .msds-mainVisual__sizefit {
    width: 100%;
    height: 420px;
    padding: 0;
    text-align: center; }
    .msds-mainVisual__sizefit .sizefit__img {
      height: 100%;
      object-fit: cover; }
  @media screen and (max-width: 767px) {
    .msds-mainVisual__imagebox.msds-mainVisual__imagebox-pc {
      display: none; }
    .msds-mainVisual__slideImageContainer-no-zoomin {
      height: auto; } }

.msds-mainVisual-textbox--02 .msds-mainVisual-textbox__mainrow {
  padding-bottom: 10px; }
  @media (min-width: 768px), print {
    .msds-mainVisual-textbox--02 .msds-mainVisual-textbox__mainrow {
      padding-bottom: 19px; } }

.msds-mainVisual-textbox--02 .msds-mainVisual-textbox__heading {
  padding: 10px 0 5px; }
  @media (min-width: 768px), print {
    .msds-mainVisual-textbox--02 .msds-mainVisual-textbox__heading {
      padding: 19px 0 4px; } }

.msds-mainVisual-textbox__mainrow {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  padding: 0 15px 15px;
  box-sizing: border-box; }
  @media (min-width: 768px), print {
    .msds-mainVisual-textbox__mainrow {
      width: 465px;
      padding: 0 15px 25px; } }

.msds-mainVisual-textbox__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'UD Reimin Regular JIS2004', 'Yu Mincho', 'YuMincho',
 'Hiragino Mincho ProN', 'HG明朝E', serif; }
  @media (min-width: 768px), print {
    .msds-mainVisual-textbox__heading {
      justify-content: center;
      font-size: 28px;
      padding: 25px 0 10px; } }
  @media screen and (max-width: 767px) {
    .msds-mainVisual-textbox__heading {
      font-size: 20px;
      align-items: flex-start;
      padding: 15px 0 10px; } }

.msds-mainVisual-textbox__subheading {
  font-size: 12px; }
  @media (min-width: 768px), print {
    .msds-mainVisual-textbox__subheading {
      font-size: 15px; } }

.msds-mainVisual-textbox__text {
  line-height: 1.75em; }
  @media (min-width: 768px), print {
    .msds-mainVisual-textbox__text {
      display: flex;
      justify-content: center;
      text-align: center;
      font-size: 15px; } }
  @media screen and (max-width: 767px) {
    .msds-mainVisual-textbox__text {
      font-size: 12px;
      letter-spacing: -0.5px; } }

.msds-mainVisual-textbox__subrow {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  color: #fff;
  background-color: #262626; }
  @media screen and (max-width: 767px) {
    .msds-mainVisual-textbox__subrow {
      flex-direction: column;
      padding: 0;
      height: 45px; } }
  .msds-mainVisual-textbox__subrow-subheading {
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    margin-right: 10px; }
  .msds-mainVisual-textbox__subrow-heading {
    display: inline-block;
    font-weight: bold;
    font-size: 13px; }
  .msds-mainVisual-textbox__subrow::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-width: 2px 2px 0 0;
    -webkit-transform: rotate(45deg) translateY(-50%);
            transform: rotate(45deg) translateY(-50%); }
    @media screen and (max-width: 767px) {
      .msds-mainVisual-textbox__subrow::after {
        width: 10px;
        height: 10px; } }

.msds-mainVisual-textbox__new {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  background-color: #d0050d;
  width: 50px;
  height: 18px;
  font-size: 10px;
  font-weight: bold; }

.swiper-pagination-bullet {
  display: block;
  width: 12px;
  height: 12px;
  background-color: #dcdcdc;
  opacity: 0.8;
  border-radius: 6px;
  transition: background-color 200ms;
  cursor: pointer; }
  .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-left: 18px; }
  .swiper-pagination-bullet-active {
    background-color: #000; }

@media (min-width: 768px), print {
  .msds-mainVisual2 {
    margin-top: 10px;
    margin-bottom: 10px; }
    .msds-mainVisual2 .ohd-B1-image {
      margin-bottom: 0; } }

.msds-section--fullWidth {
  max-width: none;
  padding: 0; }

.msds-section--bdt-red {
  border-top: 3px solid #d0050d; }

.msds-section--pickup {
  background-color: #f2f2f2;
  padding-bottom: 30px; }
  @media (min-width: 768px), print {
    .msds-section--pickup {
      padding-bottom: 60px; } }

.msds-section--gray {
  background-color: #f2f2f2;
  padding-bottom: 20px; }
  @media (min-width: 768px), print {
    .msds-section--gray.ohd-section {
      max-width: 960px; } }

.msds-cmInfo {
  display: block; }
  @media (min-width: 768px), print {
    .msds-cmInfo:hover {
      background-color: #f1f1f1; } }
  .msds-cmInfo__container {
    text-align: center; }
  .msds-cmInfo__inner {
    display: inline-flex;
    padding: 25px 0; }
    @media screen and (max-width: 767px) {
      .msds-cmInfo__inner {
        padding: 15px 0;
        flex-direction: column; } }
  .msds-cmInfo__heading {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #d0050d;
    font-weight: bold; }
    @media (min-width: 768px), print {
      .msds-cmInfo__heading {
        padding-right: 20px;
        margin-right: 20px;
        border-right: 1px solid #dfdfdf;
        font-size: 14px; } }
    @media screen and (max-width: 767px) {
      .msds-cmInfo__heading {
        margin-bottom: 5px; } }
  .msds-cmInfo__text {
    font-size: 14px;
    color: #000;
    text-align: left; }
    @media screen and (max-width: 767px) {
      .msds-cmInfo__text {
        line-height: 1.75em;
        display: flex;
        align-items: center;
        justify-content: space-between; } }
  @media screen and (max-width: 767px) {
    .msds-cmInfo__icon::after {
      content: "";
      right: 18px;
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px solid #d0050d;
      border-width: 2px 2px 0 0;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg); } }

.msds-heading {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  padding: 30px 0 18px; }
  .msds-heading__subheading {
    font-size: 11px;
    color: #d0050d; }
  @media (min-width: 768px), print {
    .msds-heading {
      font-size: 24px;
      font-weight: bold;
      padding: 60px 0 30px; }
      .msds-heading__subheading {
        font-size: 12px; } }

.msds-heading2 {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .msds-heading2 {
      margin: 10px 0; } }
  .ohd-section + .msds-heading2 {
    margin-top: -3.75rem; }
  .msds-heading2__icon {
    margin: 0 10px 0 0;
    flex-shrink: 0; }
    .msds-heading2__icon img {
      display: block; }
  .msds-heading2__text {
    width: 100%;
    font-size: 15px;
    font-weight: bold; }
    @media (min-width: 768px), print {
      .msds-heading2__text {
        font-size: 20px; } }

.msds-heading3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 22px;
  text-align: center;
  color: #00215b;
  margin-bottom: 20px; }
  @media (min-width: 768px), print {
    .msds-heading3 {
      margin-bottom: 16px; } }

.msds-heading4 {
  display: inline-flex;
  padding-top: 1.5rem;
  padding-bottom: 0.1em;
  border-bottom: 3px solid #d9d9d9;
  color: #666;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700; }

.msds-heading5 {
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #d9d9d9;
  font-weight: 700;
  font-size: 18px; }
  @media (min-width: 768px), print {
    .msds-heading5 {
      margin-bottom: 20px; } }

.msds-heading6 {
  margin-bottom: 1.25rem;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700; }

.msds-heading7 {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 1.25rem 0;
  padding: 5px 0 4px 10px;
  border-left: 7px solid #dc0810;
  font-size: 24px;
  line-height: 1.25;
  font-weight: bold; }
  .msds-heading7__subHeading {
    display: block;
    font-size: 14px; }
  .msds-heading7__mainHeading {
    display: block;
    font-size: 18px; }
    @media (min-width: 768px), print {
      .msds-heading7__mainHeading {
        font-size: 24px; } }

.msds-heading8 {
  margin-bottom: 0.4em;
  width: 18%; }
  .msds-heading8__title {
    font-weight: bold;
    font-size: 3.4vw; }

.msds-headerArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333333;
  height: 32px;
  padding: 0 10px;
  box-sizing: border-box; }
  @media screen and (max-width: 767px) {
    .msds-headerArea {
      margin: 0 -15px; } }
  .msds-headerArea__text {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    margin: 0; }
  .msds-headerArea__area {
    font-size: 18px; }

@media (min-width: 768px), print {
  .msds-headerArea2 {
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .msds-headerArea2__information {
      flex-shrink: 0; } }

@media screen and (max-width: 767px) {
  .msds-headerArea2__title {
    margin-left: -5px;
    margin-right: -5px; }
  .msds-headerArea2__information {
    background-color: #EDEDED;
    margin-left: -15px;
    margin-right: -15px; } }

/*
---
name: バナー
category:
  - Banner
---

```html```
*/
@-webkit-keyframes changeimage {
  0% {
    opacity: 1;
    visibility: visible; }
  50% {
    opacity: 1;
    visibility: visible; }
  58% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 0;
    visibility: hidden; } }
@keyframes changeimage {
  0% {
    opacity: 1;
    visibility: visible; }
  50% {
    opacity: 1;
    visibility: visible; }
  58% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 0;
    visibility: hidden; } }

.msds-topBanner {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
  display: block;
  line-height: 0;
  position: relative; }
  .msds-topBanner img {
    width: 100%;
    height: auto; }
  .msds-topBanner__item a {
    display: block; }
  @media screen and (max-width: 767px) {
    .msds-topBanner {
      padding: 10px;
      margin: 0 -15px; }
      .ohd-B1 + .msds-topBanner {
        margin-top: -2rem; }
      .msds-topBanner__item:last-of-type {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        -webkit-animation-delay: 3s;
                animation-delay: 3s;
        -webkit-animation-name: changeimage;
                animation-name: changeimage;
        -webkit-animation-duration: 6s;
                animation-duration: 6s;
        -webkit-animation-direction: alternate;
                animation-direction: alternate;
        -webkit-animation-timing-function: ease;
                animation-timing-function: ease;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite; } }
  @media (min-width: 768px), print {
    .msds-topBanner {
      padding: 10px 115px;
      display: flex; }
      .msds-topBanner--reverse {
        flex-direction: row-reverse; }
        .msds-topBanner--reverse .msds-topBanner__item + .msds-topBanner__item {
          margin-left: 0;
          margin-right: 20px; }
      .msds-topBanner__item {
        width: 100%; }
        .msds-topBanner__item + .msds-topBanner__item {
          margin-left: 20px; } }
  .msds-topBanner--full {
    padding: 0; }
    @media screen and (max-width: 767px) {
      .msds-topBanner--full .msds-topBanner__item {
        position: relative;
        padding: 0;
        -webkit-animation: none;
                animation: none; } }
  @media (min-width: 768px), print {
    .msds-topBanner--separatedImgByResponsive .msds-topBanner__item:last-child {
      display: none; } }
  @media screen and (max-width: 767px) {
    .msds-topBanner--separatedImgByResponsive .msds-topBanner__item:first-child {
      display: none; } }
  .msds-topBanner--separatedImgByResponsive .msds-topBanner__item + .msds-topBanner__item {
    margin-left: 0; }

.msds-update {
  font-family: "Hiragino Kaku Gothic ProN", Roboto, Meiryo, sans-serif;
  text-align: center;
  padding: 16px 0;
  margin: 0 auto;
  width: 210px; }
  .msds-update__inner {
    height: 30px;
    padding: 0 0 0 25px;
    background-color: #fff;
    border-radius: 4px;
    text-align: center;
    position: relative;
    box-sizing: border-box; }
    @media (min-width: 768px), print {
      .msds-update__inner {
        border: 1px solid #ccc; } }
  .msds-update__update {
    background-image: url(/res/msd/img/search/fig_fukidashi.png);
    background-repeat: no-repeat;
    background-size: 68px auto;
    border-radius: 50%;
    width: 68px;
    height: 59px;
    padding: 0 10px 0 0;
    text-align: center;
    font-weight: bold;
    position: absolute;
    left: -10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    box-sizing: border-box; }
    @media (min-width: 768px), print {
      .msds-update__update {
        background-size: 76px auto;
        width: 76px;
        height: 66px; } }
  .msds-update__date {
    width: 100%;
    font-size: 13px;
    font-family: "Arial",-apple-system,BlinkMacSystemFont,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    white-space: nowrap; }
    @media (min-width: 768px), print {
      .msds-update__date {
        font-size: 17px; } }
  .msds-update__text {
    width: 100%;
    font-size: 10px;
    margin: 2px 0 0; }
  .msds-update__message {
    line-height: 30px;
    font-weight: bold;
    font-size: 14px; }
    @media (min-width: 768px), print {
      .msds-update__message {
        font-size: 16px; } }
  .msds-update__bukken, .msds-update__kosuu {
    font-size: 18px;
    color: #DC0810; }
    @media (min-width: 768px), print {
      .msds-update__bukken, .msds-update__kosuu {
        font-size: 20px; } }

.msds-maskAreaBanner {
  border: 4px solid #1B5886;
  background-color: #fff;
  position: relative;
  margin-left: -10px;
  margin-right: -10px; }
  .msds-maskAreaBanner img {
    height: auto; }
  .msds-maskAreaBanner.is-open .msds-maskAreaBanner__trigger {
    display: none; }
  .msds-maskAreaBanner.is-open .msds-maskAreaBanner__inner:after {
    display: none; }
  .msds-maskAreaBanner--accordion .msds-maskAreaBanner__inner:after {
    content: '';
    height: 104px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 13.65%, #fff 100%); }
  @media (min-width: 768px), print {
    .msds-maskAreaBanner--accordion[data-accordion-msd-sp-only] .msds-maskAreaBanner__inner {
      height: auto !important; }
      .msds-maskAreaBanner--accordion[data-accordion-msd-sp-only] .msds-maskAreaBanner__inner:after {
        display: none; }
    .msds-maskAreaBanner--accordion[data-accordion-msd-sp-only] .msds-maskAreaBanner__trigger {
      display: none; } }
  .msds-maskAreaBanner__inner {
    display: block;
    overflow: hidden;
    transition: height .5s;
    position: relative; }
  .msds-maskAreaBanner__button1 {
    width: 240px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); }
  .msds-maskAreaBanner__trigger {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
    color: #1B5886;
    font-size: 14px;
    font-weight: bold;
    width: 200px;
    height: 50px;
    padding: 0 0 10px 0;
    border-radius: 5px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    box-sizing: border-box; }
    .msds-maskAreaBanner__trigger:after {
      content: '';
      width: 10px;
      height: 10px;
      border: 1px solid #1B5886;
      border-width: 2px 2px 0 0;
      position: absolute;
      bottom: 10px;
      left: 50%;
      -webkit-transform: translateX(-50%) rotate(135deg);
              transform: translateX(-50%) rotate(135deg); }

html.addPaymentModalIsOpen {
  overflow: hidden; }
  html.addPaymentModalIsOpen .msds-modal-addPayment {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s; }

.msds-modal-addPayment {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 15000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .msds-modal-addPayment__window {
    position: absolute;
    border-radius: 7px;
    background-color: #fff;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
    @media screen and (max-width: 767px) {
      .msds-modal-addPayment__window {
        width: calc(100% - 40px);
        max-width: 335px; } }
    @media (min-width: 768px), print {
      .msds-modal-addPayment__window {
        width: 80%;
        max-width: 768px; } }
  .msds-modal-addPayment__button {
    display: block;
    position: absolute;
    right: -10px;
    top: -10px;
    outline: 0;
    z-index: 2;
    cursor: pointer; }
    .msds-modal-addPayment__button img {
      width: 34px; }
  .msds-modal-addPayment__inner {
    overflow-y: scroll;
    max-height: calc(100vh - 60px); }
  .msds-modal-addPayment__body {
    padding: 20px; }
  .msds-modal-addPayment__list {
    list-style: none;
    font-size: 11px;
    line-height: 1.637; }
  .msds-modal-addPayment__item {
    margin: 0 0 9px; }
  .msds-modal-addPayment__close {
    outline: 0;
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #0088c3;
    text-decoration: underline;
    padding: 0;
    border: 0;
    background: 0 0;
    cursor: pointer; }
  .msds-modal-addPayment__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); }

.msds-cvArea {
  margin: 20px 0; }
  .msds-cvArea__row {
    display: flex;
    justify-content: center;
    align-items: center; }
  .msds-cvArea__image {
    margin: 0 10px 0 0;
    flex-shrink: 0; }
  .msds-cvArea__text {
    font-weight: bold; }
  .msds-cvArea__title {
    margin: 0;
    color: #C40000;
    font-size: 15px;
    line-height: 1.375;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.16); }
  .msds-cvArea__description {
    margin: 5px 0 0;
    color: #333;
    font-size: 14px;
    line-height: 1.57143;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.16); }
  .msds-cvArea__button {
    text-align: center;
    margin: 10px 0 0; }
    .msds-cvArea__button--animation-bound {
      -webkit-animation-name: boundUnder;
              animation-name: boundUnder;
      -webkit-animation-duration: 1s;
              animation-duration: 1s;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-timing-function: ease;
              animation-timing-function: ease; }

@-webkit-keyframes boundUnder {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes boundUnder {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

.msds-u-mb30 {
  margin-bottom: 30px; }

@media (min-width: 768px), print {
  .msds-u-only-sp {
    display: none; } }

@media screen and (max-width: 767px) {
  .msds-u-only-pc {
    display: none; } }

.msds-font-gothic {
  font-family: "Hiragino Kaku Gothic ProN", Roboto, Meiryo, sans-serif; }

@media print {
  .msds-mainVisual {
    display: none; }
  .msds-about-mainImage__subHeading:after {
    display: block;
    content: '東京に、家を持とう。';
    font-size: 24px;
    font-weight: bold; }
  .msds-about-mainImage__subHeadingText {
    display: none; }
  .msds-about-mainImage__text {
    color: #000; } }

.msds-image {
  margin-bottom: 1.25rem;
  text-align: center; }
  .msds-image__image {
    max-width: 100%;
    vertical-align: middle; }
  .msds-image--fullWidth {
    margin-left: -10px;
    margin-right: -10px; }
    @media (min-width: 768px), print {
      .msds-image--fullWidth {
        width: 100%; } }

.msds-slider {
  display: flex;
  overflow: scroll;
  padding: 0; }
  @media (min-width: 768px), print {
    .msds-slider {
      overflow: visible; } }
  .msds-slider__item {
    display: block;
    width: 280px;
    list-style-type: none;
    margin-right: 10px;
    flex-shrink: 0;
    padding-bottom: 10px; }
    .msds-slider__item:last-child {
      margin-right: 0; }
    @media (min-width: 768px), print {
      .msds-slider__item {
        width: 300px;
        margin-right: 30px; } }
  .msds-slider__heading {
    font-weight: bold;
    font-size: 18px;
    margin: 18px 0;
    text-align: center; }
  .msds-slider__text {
    font-size: 16px; }
  .msds-slider__image {
    max-width: 100%;
    vertical-align: middle; }

.msds-googleMap {
  margin: 0 -10px;
  height: 375px; }
  @media (min-width: 768px), print {
    .msds-googleMap {
      width: 100%;
      height: 450px; } }

.msds-modal-1tap {
  position: fixed;
  z-index: 1100;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%; }
  .msds-modal-1tap.is-closed .msds-modal-1tap__window2 {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    transition: 0.3s cubic-bezier(0, 0.47, 0.56, 1);
    opacity: 0; }
  .msds-modal-1tap.is-opened .msds-modal-1tap__window2 {
    -webkit-transform: scale(1);
            transform: scale(1);
    transition: 0.3s cubic-bezier(0, 0.47, 0.56, 1);
    opacity: 1; }
  .msds-modal-1tap.is-opened .msds-onetap-modal__closeButton2 {
    display: block; }
  @media (min-width: 768px), print {
    .msds-modal-1tap {
      max-width: 480px; } }
  .msds-modal-1tap__window {
    position: absolute;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 10px;
    z-index: 2;
    width: calc(100% - 40px);
    max-width: 90%;
    max-height: calc(100% - 20px); }
  .msds-modal-1tap__window2 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, white 0%, white 35%, #fffbdf 35%, #fffbdf 100%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 10; }
    .msds-modal-1tap__window2 .msds-onetap-modal__head {
      padding: 4.5vw 0 2.5vw; }
  .msds-modal-1tap__window2 ~ .msds-modal-1tap__overlay {
    background-color: transparent; }
  .msds-modal-1tap__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 1; }
  .msds-modal-1tap__close {
    display: block;
    width: 34px;
    height: 34px;
    position: absolute;
    right: -10px;
    top: -10px;
    z-index: 2;
    background: url("/res/msd/img/icon-close.svg") no-repeat 100% 100%;
    background-size: contain;
    border: 0;
    cursor: pointer; }
  .msds-modal-1tap__inner {
    max-height: 84vh;
    overflow: scroll; }
  .msds-modal-1tap__main {
    padding: 2px 2px 25px; }
  .msds-modal-1tap__image {
    width: 100%; }
  .msds-modal-1tap__section-title {
    margin-top: 15px;
    text-align: center;
    color: #1c346c;
    font-weight: bold; }
    @media (min-width: 768px), print {
      .msds-modal-1tap__section-title {
        font-size: 20px; } }
  .msds-modal-1tap__section-title2 {
    margin: 18px auto 0;
    text-align: center;
    color: #000;
    width: 80%;
    background-image: linear-gradient(to bottom, transparent 55%, #fec5c7 55%, #fec5c7 100%);
    font-weight: bold;
    font-size: 4.5vw; }
    @media (min-width: 768px), print {
      .msds-modal-1tap__section-title2 {
        font-size: 20px; } }
  .msds-modal-1tap__section-text {
    margin-top: 10px;
    text-align: center; }
    .msds-modal-1tap__section-text--sm {
      font-size: 4vw; }
    @media (min-width: 768px), print {
      .msds-modal-1tap__section-text {
        font-size: 16px; } }
  .msds-modal-1tap__date {
    padding: 15px 6vw 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
  .msds-modal-1tap-1tap-open--princelist .msds-onetap-modal__image-wrap {
    background-size: cover; }
  .msds-modal-1tap.modal2 {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    top: 0;
    background: linear-gradient(180deg, white 0%, white 35%, #fffbdf 35%, #fffbdf 100%); }
    .msds-modal-1tap.modal2 .msds-modal-1tap__window {
      background: none;
      border-radius: 0; }
    .msds-modal-1tap.modal2 .msds-modal-1tap__overlay.js-1tapReserveModal__close {
      background: none; }

.msds-modal-1tap-button {
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  padding: 0 6px;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #d9101d 0, #d9101d 88%, #af0103 100%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-width: 0;
  width: 80%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto; }
  .msds-modal-1tap-button__inner {
    display: flex;
    flex-direction: row;
    align-items: center; }
  .msds-modal-1tap-button__text {
    display: block;
    flex: 1 1 auto; }
    @media (min-width: 768px), print {
      .msds-modal-1tap-button__text {
        font-size: 16px; } }
  .msds-modal-1tap-button__icon {
    position: absolute;
    right: 10px;
    display: block;
    flex: 0 0 auto;
    width: 16px;
    padding-left: 5px; }
    .msds-modal-1tap-button__icon img {
      width: 100%;
      height: auto; }

.msds-modal-1tap-button2 {
  position: relative;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  padding: 0 6px;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #d9101d 0, #d9101d 88%, #af0103 100%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-width: 0;
  width: 66%;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto; }
  .msds-modal-1tap-button2__inner {
    display: flex;
    flex-direction: row;
    align-items: center; }
  .msds-modal-1tap-button2__text {
    display: block;
    flex: 1 1 auto;
    font-size: 14px; }
    @media (min-width: 768px), print {
      .msds-modal-1tap-button2__text {
        font-size: 16px; } }
  .msds-modal-1tap-button2__icon {
    position: absolute;
    right: 10px;
    display: block;
    flex: 0 0 auto;
    width: 16px;
    padding-left: 5px; }
    .msds-modal-1tap-button2__icon img {
      width: 100%;
      height: auto; }

.msds-onetap-modal__head {
  padding: 2.8vw 0;
  margin: 0;
  font-weight: 700;
  font-size: 4.8vw;
  text-align: center; }
  .msds-onetap-modal__head [class^=oh-icon] {
    color: #d9101d;
    margin-right: 5px; }

.msds-onetap-modal__buttons {
  display: flex;
  margin: 20px 8% 0;
  justify-content: center;
  border-radius: 0 0 5px 5px; }
  .msds-onetap-modal__buttons-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 0 12px;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 100px;
    color: #fff;
    font-size: 4vw;
    font-weight: bold; }
    .msds-onetap-modal__buttons-item:first-child {
      margin-left: 0; }
    .msds-onetap-modal__buttons-item:last-child {
      border-left: 1px solid #ccc; }
    .msds-onetap-modal__buttons-item:active {
      -webkit-transform: scale(0.9);
              transform: scale(0.9);
      opacity: 0.9; }
    .msds-onetap-modal__buttons-item.msds-onetap-modal__button-yes {
      background-color: #d9101d; }
    .msds-onetap-modal__buttons-item.msds-onetap-modal__button-no {
      background-color: #adadad; }

.msds-onetap-modal__image-wrap {
  background-color: #fffbdf;
  display: block;
  height: auto; }

.msds-onetap-modal__image {
  width: 100%;
  height: auto; }

.msds-onetap-modal__closeButton2 {
  display: none;
  position: absolute;
  top: 22px;
  right: 22px;
  left: auto;
  width: 25px;
  height: 25px;
  z-index: 15; }
  .msds-onetap-modal__closeButton2::before, .msds-onetap-modal__closeButton2::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 11px;
    width: 2px;
    height: 16px;
    background-color: #1a1a1a; }
  .msds-onetap-modal__closeButton2::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg); }
  .msds-onetap-modal__closeButton2::after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg); }

.msds-lead {
  font-size: 15px;
  line-height: 26px;
  text-align: center; }
  @media (min-width: 768px), print {
    .msds-lead {
      font-size: 16px; } }

.msds-hr {
  display: block;
  width: 100%;
  height: 1px;
  border: none;
  border-top: 1px solid #d9d9d9;
  margin-bottom: 1.25rem; }

.msd-dialog {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-out;
  z-index: 100; }
  .msd-dialog.is-closed {
    opacity: 0; }
  .msd-dialog__item {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    border: #0067b6 solid 3px;
    background: #fff; }
  .msd-dialog__content {
    text-align: center; }
  .msd-dialog__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 10px; }
  .msd-dialog__overlay {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); }

.msds-1tap-balloon {
  position: relative; }

@keyframes boundBalloon {
  0% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); }
  50% {
    -webkit-transform: translate(-50%, -5px);
            transform: translate(-50%, -5px); }
  100% {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0); } }
  .msds-1tap-balloon::before {
    content: "";
    width: 110px;
    height: 34px;
    background: url("/res/msd/img/fukidashi-1tap.svg") 0 0/100% 100% no-repeat;
    position: absolute;
    top: -28px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 10;
    -webkit-animation-name: boundBalloon;
            animation-name: boundBalloon;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease; }

.msds-1tap-balloon2 {
  position: relative;
  width: 100%;
  display: block; }
  .msds-1tap-balloon2::before {
    content: "";
    width: 50%;
    height: 34px;
    background: url("/res/msd/img/fukidashi-1tap.svg") 0 0/100% 100% no-repeat;
    position: absolute;
    top: -42px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 10; }

/*
利用ページ：
- マイページ（SP）
*/
.msds-bnr {
  width: 100%;
  margin-bottom: 20px; }
  .msds-bnr--fixed {
    position: fixed;
    z-index: 10; }
  .msds-bnr__image {
    width: 100%;
    vertical-align: middle; }
  .msds-bnr--top {
    margin-bottom: 0; }

/*
利用ページ：
- マイページ（SP）
*/
@media screen and (max-width: 767px) {
  .msds-guide__image {
    margin: 10px -5px 0; } }

@media screen and (max-width: 767px) {
  .msds-guide-map {
    margin: 0;
    padding: 10px 0; } }

.msds-guide-map__inner {
  color: #747474;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e4e3e3;
  border-radius: 0;
  background-color: #fff; }
  @media screen and (max-width: 767px) {
    .msds-guide-map__inner {
      padding: 10px 10px;
      border-radius: 5px; } }

.msds-guide-map__title {
  position: relative;
  font-weight: bold; }
  @media screen and (max-width: 767px) {
    .msds-guide-map__title {
      font-size: 14px; }
      .msds-guide-map__title .oh-icon-map-marker {
        font-size: 18px;
        margin-right: 8px; } }

.msds-guide-map__text > a {
  text-decoration: underline;
  position: relative;
  color: #000;
  padding-left: 26px; }

@media screen and (max-width: 767px) {
  .msds-guide-map__text {
    margin: 5px 0 0 0;
    font-size: 13px; }
    .msds-guide-map__text .oh-icon-angle-right {
      font-weight: 500;
      font-size: 21px;
      position: absolute;
      top: 2px;
      left: 12px;
      width: 7px;
      height: 13px; } }

.msds-guide-map__link {
  color: inherit;
  text-decoration: underline; }

.msds-guide-map [class^=oh-icon] {
  color: #c00;
  vertical-align: middle;
  line-height: 0.5; }

/*
利用ページ：
- マイページ（SP）
*/
.msds-cta {
  background-color: #fff3f3; }
  @media screen and (max-width: 767px) {
    .msds-cta {
      background-color: #fff;
      margin: 0 -15px 0;
      padding: 0 15px; }
      .msds-cta__inner {
        position: relative; }
        .msds-cta__inner .ohkarte-viewers:before {
          content: "\e971"; }
      .msds-cta__catch {
        text-align: center;
        font-weight: bold;
        line-height: 1.5;
        margin-bottom: 10px;
        font-size: 4vw; }
      .msds-cta__subcatch {
        display: block;
        font-size: 18px; }
        .msds-cta__subcatch--red {
          color: #d0050d; }
      .msds-cta__desc {
        text-align: right; }
        .msds-cta__desc--less {
          color: #e60000;
          font-size: 14px;
          margin-right: 10px; }
        .msds-cta__desc--more {
          color: #0086df;
          font-size: 14px; } }

@media screen and (max-width: 767px) {
  .msds-cta__table {
    margin-top: 10px;
    margin-bottom: 10px; } }

.msds-cta__table.is-hidden {
  display: none; }

.msds-icon, .msds-icon-home-catalog, .msds-icon-clock {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-size: contain; }
  .msds-icon-home-catalog {
    background-image: url(/res/msd/img/icon-home-catalog.png); }
  .msds-icon-clock {
    background-image: url(/res/msd/img/icon-clock.png); }

.msds-fullmodal {
  visibility: hidden;
  position: fixed;
  overflow: scroll;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 50;
  -webkit-transform: translateY(102%);
          transform: translateY(102%);
  transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out; }
  .msds-fullmodal.is-open {
    visibility: visible;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out; }
  .msds-fullmodal__inner {
    height: auto;
    overflow: hidden;
    padding-bottom: 84px; }
  .msds-fullmodal__close {
    display: none;
    z-index: 55;
    position: fixed;
    top: 52px;
    right: 4px;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    background-color: #e8e8e8;
    cursor: pointer; }
    .msds-fullmodal__close::before, .msds-fullmodal__close::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 2px;
      -webkit-transform: translate(-50%, -50%) rotate(45deg);
      transform: translate(-50%, -50%) rotate(45deg);
      background: #000;
      content: ""; }
    .msds-fullmodal__close::after {
      -webkit-transform: translate(-50%, -50%) rotate(-45deg);
      transform: translate(-50%, -50%) rotate(-45deg); }

.msds-fullmodal-body {
  position: relative;
  margin-top: 50px;
  padding: 0 15px 0; }
  .msds-fullmodal-body__merit {
    margin-top: 40px;
    margin-right: -15px;
    margin-bottom: 28px;
    margin-left: -15px; }
  .msds-fullmodal-body__buttons {
    position: relative;
    padding-top: 32px;
    margin-top: 40px; }
  .msds-fullmodal-body__headline {
    position: relative;
    margin-top: 32px;
    margin-bottom: 24px;
    text-align: center; }
    .msds-fullmodal-body__headline::before {
      display: block;
      width: 84px;
      height: 24px;
      margin: 0 auto 11px;
      background: url(/res/msd/img/sp/light.png) no-repeat center;
      background-size: contain;
      content: ""; }
  .msds-fullmodal-body__course {
    padding: 25px;
    border: 2px solid #ebebeb;
    border-radius: 12px; }
    .msds-fullmodal-body__course__title {
      position: relative;
      margin-bottom: 39px;
      padding-bottom: 22px;
      border-bottom: 1px dashed #2c2c2c;
      font-weight: bold;
      font-size: 20px;
      text-align: center; }
      .msds-fullmodal-body__course__title small {
        display: block;
        margin-top: 0.2em;
        font-size: 12px; }
      .msds-fullmodal-body__course__title::after {
        position: absolute;
        top: 0;
        left: 50%;
        width: 116px;
        height: 65px;
        margin-left: 2.4em;
        -webkit-transform: translateY(-80%);
        transform: translateY(-80%);
        background: url(https://ms.ohd.openhouse-group.com/gallery-invi/img/guide_badge.png) no-repeat center;
        background-size: contain;
        content: ""; }
    .msds-fullmodal-body__course__box {
      position: relative;
      margin-bottom: 24px; }
      .msds-fullmodal-body__course__box::before {
        z-index: 0;
        position: absolute;
        top: 6px;
        bottom: -30px;
        left: 7px;
        width: 2px;
        background: #fcdc2b;
        content: ""; }
      .msds-fullmodal-body__course__box:last-child::before {
        display: none; }
      .msds-fullmodal-body__course__box b {
        display: block;
        position: relative;
        margin-bottom: 10px;
        color: #fcdc2b;
        font-weight: bold;
        font-size: 16px; }
        .msds-fullmodal-body__course__box b::before {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 10px;
          -webkit-transform: translateY(3px);
          transform: translateY(3px);
          border-radius: 50%;
          background: #fcdc2b;
          content: ""; }
      .msds-fullmodal-body__course__box-title {
        margin-bottom: 20px;
        padding-left: 28px;
        font-weight: bold;
        font-size: 18px; }
      .msds-fullmodal-body__course__box-img {
        z-index: 1;
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        padding: 0 0px 0 28px;
        border-radius: 12px; }
      .msds-fullmodal-body__course__box-text {
        margin-bottom: 0;
        padding: 0 0px 0 28px;
        font-size: 14px; }

.msds-headline__label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 27px;
  border-radius: 1em;
  background: #fbdb2c;
  font-weight: bold;
  font-size: 12px;
  line-height: 1; }

.msds-headline__text {
  display: block;
  font-weight: bold;
  font-size: 28px;
  line-height: 1.42857; }

.msds-fixedButtons {
  display: none;
  z-index: 55;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0; }
  .msds-fixedButtons.is-visible {
    display: block; }
  .msds-fixedButtons__inner {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    background: rgba(38, 38, 38, 0.5);
    color: #fff;
    font-size: 13px;
    width: 100%; }
  .msds-fixedButtons__body {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin-right: auto;
    margin-left: auto; }
  .msds-fixedButtons__item {
    flex: 1 0 auto;
    min-width: 0;
    max-width: 100%;
    position: relative; }
    .msds-fixedButtons__item a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 34px;
      padding: 0 7px;
      color: inherit;
      font-weight: 700;
      text-align: center; }
    .msds-fixedButtons__item:first-child {
      background-color: #C16C39;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      margin-right: 1px; }
    .msds-fixedButtons__item:last-child {
      background-color: #e60000;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px; }

/*
利用ページ：
- 資料請求フォーム　メッセージ（SP）
- 資料請求フォーム　メッセージ（PC）
- 来場予約フォーム　メッセージ（SP）
- 来場予約フォーム　メッセージ（PC）
- マイページ　メッセージ
*/
.msds-info-text--strong {
  color: #f00;
  font-size: 20px;
  font-weight: bold; }

.msds-info-text--strong2 {
  font-weight: bold; }

/*
---
name: この物件を詳しく知る
category:
  - Arrow
---

```html
<div class="msds-arrow-heading">この物件を詳しく知る</div>
```
*/
.msds-arrow-heading {
  position: relative;
  background-color: #3C3C3C;
  display: block;
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin: 0 -15px;
  padding: 10px 0;
  font-size: 17px; }
  .msds-arrow-heading::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -12px;
    border-width: 15px 17px 0 17px;
    border-style: solid;
    border-color: #3C3C3C transparent transparent transparent;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    z-index: 10; }

/*
---
name: モデルルームご案内の流れ
category:
  - Link
---

```html
<a class="msds-link" href="#" data-fullmodalOpen="msds-fullmodal" data-kz-track-on-click="38229">
  <div class="msds-link__inner">
    <span class="oh-icon-exclamation-circle"></span>
    <span class="msds-link__text">モデルルームご案内の流れ</span>
    <span class="oh-icon-angle-right"></span>
  </div>
</a>
```
*/
.msds-link {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  color: #1150a5;
  font-size: 13px;
  font-weight: bold; }
  .msds-link__inner {
    border-bottom: 1px solid #1150a5;
    position: relative;
    padding-right: 17px; }
    .msds-link__inner .oh-icon-angle-right {
      display: block;
      position: absolute;
      top: 50%;
      right: 0;
      line-height: 0;
      font-size: 19px; }
  .msds-link__text {
    line-height: 1.6; }