@charset "UTF-8";
/*
Theme Name: SmileHouse 事業用 Responsive v1.1.11
Theme URI: http://ethos-ltd.com
Description: 事業用PC/SP統合レスポンシブテーマ。1024px以上は従来PC表示、1023px以下は従来SP表示を基準。
Version: 1.1.11
Author: Fumihiko Kiyosawa
Author URI: http://www.ethos-ltd.com/
*/

/* PC: サーバー上で実際に使われている従来CSSをそのまま読み込む */
@import url(css/index.css);
@import url(css/webpage.css);
@import url(css/detail.css);
@import url(css/list.css);

/* SP: 旧スマホテーマの実CSSを、1023px以下だけPC CSSの後から上書き */
@import url(css/mobile-index.css) screen and (max-width: 1023px);
@import url(css/mobile-webpage.css) screen and (max-width: 1023px);
@import url(css/mobile-detail.css) screen and (max-width: 1023px);
@import url(css/mobile-list.css) screen and (max-width: 1023px);

/* 統合時に必要な最小限の差分 */
#sp_information,
#spguide { display: none; }

@media screen and (min-width: 1024px) {
  .smile-sp-only { display: none !important; }
}

@media screen and (max-width: 1023px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { background-image: none; }

  /* PCの固定配置を解除。旧SPテーマ単体では存在しなかったPC指定を明示的にリセット */
  #header {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    position: relative;
    text-align: center;
  }
  #header h1 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    padding: 4px 8px !important;
    box-sizing: border-box;
  }
  #header #logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 4px auto 8px !important;
  }
  #header #logo img {
    width: auto !important;
    max-width: 92% !important;
    height: auto !important;
  }
  #catch,
  #header #information { display: none !important; }

  #header_bar {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    box-sizing: border-box;
    background-image: none !important;
    background-color: #ff6565 !important;
  }
  #header_bar h2 { padding: 0 !important; text-align: center; }

  #sp_information {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    text-align: center;
  }
  #sp_information ul { margin: 0; padding: 0; }
  #sp_information li {
    display: inline-block;
    list-style: none;
    margin: 3px 8px;
  }
  #sp_information a { color: #333; text-decoration: underline; }
  #sp_information .tel a { font-weight: bold; font-size: 15px; }

  #spguide {
    display: block;
    width: 98%;
    margin: 6px auto 10px;
    text-align: left;
  }

  #container,
  #contents,
  #main,
  #main_side,
  #navi {
    float: none !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  #container { width: 100% !important; padding: 5px 2% !important; }
  #contents { width: 100% !important; margin: 0 !important; }
  #main { width: 100% !important; margin: 0 0 15px !important; }
  #main_side { width: 100% !important; margin: 10px 0 !important; }
  #navi { width: 100% !important; margin: 10px 0 !important; }

  /* カテゴリはヘッダー内spguideへ統合するので、左PCメニューはスマホでは重複表示しない */
  #g_navi { display: none !important; }

  /* PCテンプレートのままでもトップおすすめを2列にする */
  #main #recommend {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 0 !important;
  }
  #main #recommend > h2 {
    flex: 0 0 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  #main #recommend > dl.photo1,
  #main #recommend > dl.photo2,
  #main #recommend > dl.photo3,
  #main #recommend > dl.photo_1,
  #main #recommend > dl.photo_2 {
    float: none !important;
    width: 48% !important;
    margin: 5px 1% 12px !important;
    box-sizing: border-box;
  }
  #main #recommend > dl dt,
  #main #recommend > dl dt a { display: block; width: 100%; }
  #main #recommend > dl img {
    display: block;
    width: 100% !important;
    height: 31vw !important;
    max-height: 220px;
    min-height: 105px;
    object-fit: cover;
  }

  #footer { width: 100% !important; height: auto !important; box-sizing: border-box; }

  /* 固定幅の画像・地図・表を画面内へ */
  img { max-width: 100%; }
  iframe, .acf-map { max-width: 100% !important; }
  #webpage, #list, #detail { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
}

@media screen and (max-width: 520px) {
  #main #recommend > dl.photo1,
  #main #recommend > dl.photo2,
  #main #recommend > dl.photo3,
  #main #recommend > dl.photo_1,
  #main #recommend > dl.photo_2 {
    width: 48% !important;
  }
  #main #recommend > dl img {
    height: 31vw !important;
    min-height: 95px;
  }
  #sp_information li { margin: 2px 5px; font-size: 12px; }
}


/* =========================================================
   v1.1.4 Smartphone property-list cards
   - PC layout stays exactly as the server-base theme
   - Mobile: type emphasis / red property number / compact one-line address
   - Mobile: 地積・延床 labels and a pale comment panel
   ========================================================= */

/* Labels added to the PHP are mobile-only so the PC table stays unchanged. */
.mobile-area-label,
.mobile-price-label,
.mobile-rent-label,
.mobile-rent-area-label { display: none; }

@media screen and (max-width: 767px) {
  #listtable {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 8px 0 18px !important;
  }

  #listtable > tbody {
    display: block !important;
    width: 100% !important;
  }

  /* Hide the old six-column heading row on phones */
  #listtable > tbody > tr:first-child {
    display: none !important;
  }

  /* One property = one compact card */
  #listtable > tbody > tr:not(:first-child) {
    display: grid !important;
    grid-template-columns: 108px minmax(0, 1fr) !important;
    grid-template-areas:
      "photo status"
      "photo address"
      "photo price"
      "photo area"
      "comment comment" !important;
    column-gap: 13px !important;
    row-gap: 2px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 0 12px !important;
    padding: 9px 10px 10px !important;
    border: 1px solid #ddd4c1 !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    overflow: hidden !important;
  }

  #listtable > tbody > tr:not(:first-child) > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    vertical-align: top !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  /* 売貸家 / 売アパート etc. + property number + publication status */
  #listtable td.status {
    grid-area: status !important;
    font-size: 11px !important;
    color: #777 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }
  #listtable td.status p {
    display: inline !important;
    margin: 0 7px 0 0 !important;
    white-space: nowrap !important;
  }
  #listtable td.status p:first-child {
    color: #3c352e !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  #listtable td.status .number {
    color: #c93a2f !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* 市区町村 + 町名は基本1行。長いときだけ自然に折り返す */
  #listtable td.address {
    grid-area: address !important;
    margin-top: 2px !important;
    color: #45413d !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }
  #listtable td.address .address-break {
    display: none !important;
  }
  #listtable td.address .location-area::after {
    content: " ";
  }

  #listtable td.price {
    grid-area: price !important;
    margin-top: 1px !important;
  }
  #listtable td.price p { margin: 0 !important; }
  #listtable td.price strong {
    color: #e05d00 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }
  #listtable td.price {
    color: #555 !important;
    font-size: 11px !important;
  }
  /* 売買一覧: 金額の前に「価格」 / 賃貸一覧: 金額の前に「賃料」 */
  #listtable td.price .mobile-price-label,
  #listtable td.price .mobile-rent-label {
    display: inline-block !important;
    margin-right: 5px !important;
    color: #356b8d !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    vertical-align: baseline !important;
  }

  /* 地積・延床 */
  #listtable td.area {
    grid-area: area !important;
    margin-top: 3px !important;
    color: #555 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }
  #listtable td.area .area-row {
    display: block !important;
    white-space: nowrap !important;
  }
  #listtable td.area .mobile-area-label {
    display: inline-block !important;
    min-width: 2.9em !important;
    margin-right: 3px !important;
    color: #356b8d !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }
  /* 賃貸一覧: 面積の前に「賃貸面積」 */
  #listtable td.area .mobile-rent-area-label {
    display: inline-block !important;
    margin-right: 5px !important;
    color: #356b8d !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }
  #listtable td.area strong {
    color: #47413c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  #listtable td.area .area-break {
    display: none !important;
  }

  #listtable td.photo {
    grid-area: photo !important;
    align-self: start !important;
  }
  #listtable td.photo a {
    display: block !important;
    width: 108px !important;
  }
  #listtable td.photo img {
    display: block !important;
    width: 108px !important;
    height: 81px !important;
    max-width: none !important;
    object-fit: cover !important;
    border-radius: 4px !important;
  }

  /* Comment area: soft beige panel for quick scanning */
  #listtable td.listcoment {
    grid-area: comment !important;
    margin-top: 7px !important;
    padding: 7px 9px !important;
    border: 1px solid #eadbc4 !important;
    border-radius: 7px !important;
    background: #fcf8f1 !important;
    color: #514b45 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }
  #listtable td.listcoment p { margin: 0 !important; }

  /* Keep sort/count compact above the cards */
  form[name="resort"] { margin: 4px 0 6px !important; }
  form[name="resort"] select {
    max-width: 100% !important;
    font-size: 14px !important;
  }
}

@media screen and (max-width: 380px) {
  #listtable > tbody > tr:not(:first-child) {
    grid-template-columns: 102px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 8px !important;
  }
  #listtable td.photo a,
  #listtable td.photo img {
    width: 102px !important;
  }
  #listtable td.photo img {
    height: 76px !important;
  }
  #listtable td.status p { margin-right: 5px !important; }
  #listtable td.status p:first-child { font-size: 13px !important; }
  #listtable td.address { font-size: 15px !important; }
  #listtable td.price strong { font-size: 21px !important; }
}


/* =========================================================
   v1.1.5 Smartphone estate-type table fix
   - Reset desktop float/margin styles that survived into mobile
   - Use a stable two-column grid so labels/descriptions never overlap
   ========================================================= */
@media screen and (max-width: 767px) {
  #estate-type {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #estate-type p {
    margin: 0 !important;
    padding: 5px 6px !important;
    box-sizing: border-box !important;
  }

  #estate-type dl {
    display: grid !important;
    grid-template-columns: 34% 66% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #estate-type dt,
  #estate-type dd {
    float: none !important;
    clear: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    border-top: 1px solid #333 !important;
  }

  #estate-type dt {
    border-right: 1px solid #333 !important;
    border-left: 0 !important;
  }

  #estate-type dd {
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

/* =========================================================
   v1.1.6 Smartphone navigation refresh
   - Modern quick-contact bar with tap-to-call
   - Property categories presented as calm cards
   - Legacy red gradient navigation removed on mobile
   ========================================================= */
@media screen and (max-width: 1023px) {
  #sp_information {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 3% 8px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    text-align: left !important;
  }

  #sp_information .sp-contact-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
  }

  #sp_information .sp-phone-button,
  #sp_information .sp-contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 700;
    line-height: 1.2;
  }

  #sp_information .sp-phone-button {
    gap: 7px;
    padding: 8px 12px;
    color: #fff !important;
    background: #17365d;
    border: 1px solid #17365d;
    font-size: 17px;
    letter-spacing: .02em;
  }

  #sp_information .sp-phone-icon {
    font-size: 17px;
    line-height: 1;
  }

  #sp_information .sp-contact-button {
    padding: 8px 14px;
    color: #17365d !important;
    background: #fff;
    border: 1px solid #c7d2df;
    font-size: 14px;
    white-space: nowrap;
  }

  #sp_information .sp-contact-secondary {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 7px;
    font-size: 12px;
    color: #666;
  }

  #sp_information .sp-contact-secondary a {
    position: relative;
    display: inline-block;
    padding: 2px 14px;
    color: #555 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline !important;
    text-underline-offset: 3px;
  }

  #sp_information .sp-contact-secondary a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: #ddd;
  }

  #spguide {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 14px !important;
    padding: 0 3% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  #spguide .sp-guide-section {
    display: block;
    width: 100%;
    margin: 0 0 15px;
  }

  #spguide .sp-guide-heading {
    margin: 0 0 7px !important;
    padding: 0 2px 6px !important;
    border: 0 !important;
    border-bottom: 2px solid #17365d !important;
    background: none !important;
    color: #17365d !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-indent: 0 !important;
    letter-spacing: .03em;
  }

  #spguide .sp-guide-card {
    position: relative;
    margin: 0 0 7px;
    padding: 10px 12px 9px;
    border: 1px solid #e4d7c5;
    border-radius: 9px;
    background: #fffdfa;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    box-sizing: border-box;
  }

  #spguide .sp-guide-card h3 {
    position: relative;
    margin: 0 0 6px !important;
    padding: 0 22px 0 0 !important;
    border: 0 !important;
    background: none !important;
    color: #292929 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  #spguide .sp-guide-card h3::after {
    content: "›";
    position: absolute;
    right: 1px;
    top: -3px;
    color: #a89a88;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
  }

  #spguide .sp-guide-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 !important;
    padding: 0 !important;
  }

  #spguide .sp-guide-card li {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.5;
  }

  #spguide .sp-guide-card li a {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #444 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
  }

  #spguide .sp-guide-card li a span {
    min-width: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #f3eee6;
    color: #785d45;
    font-size: 11px;
    text-align: center;
  }

  #spguide .sp-content-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 0;
    padding: 0 2px;
  }

  #spguide .sp-content-links a {
    position: relative;
    display: inline-block;
    padding: 2px 12px;
    color: #555 !important;
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none !important;
  }

  #spguide .sp-content-links a:first-child { padding-left: 0; }
  #spguide .sp-content-links a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: #ddd;
  }

  /* Tap-to-call links in operator information blocks */
  #aboutus a[href^="tel:"] {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

@media screen and (max-width: 360px) {
  #sp_information .sp-phone-button { font-size: 15px; padding-left: 9px; padding-right: 9px; }
  #sp_information .sp-contact-button { font-size: 12px; padding-left: 9px; padding-right: 9px; }
  #spguide .sp-guide-card { padding-left: 10px; padding-right: 10px; }
  #spguide .sp-guide-card ul { gap: 4px 10px; }
}


/* =========================================================
   v1.1.7 Warm mobile accents + operator information refresh
   - Replace the strong navy accents with warm terracotta/neutral tones
   - Keep the site's orange/red/beige visual language consistent
   - Rebuild operator information for phones so the full width is used
   ========================================================= */

/* Desktop keeps the long-established operator-information markup. */
.aboutus-mobile { display: none; }

@media screen and (max-width: 1023px) {
  :root {
    --smile-accent: #b84f3f;
    --smile-accent-dark: #923f33;
    --smile-accent-soft: #d8b39e;
    --smile-ink: #3f352f;
    --smile-muted: #716961;
    --smile-beige: #fcf8f1;
    --smile-border: #e6d6c5;
  }

  /* Header quick-contact area: warm accent instead of the abrupt navy. */
  #sp_information .sp-phone-button {
    background: var(--smile-accent) !important;
    border-color: var(--smile-accent) !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(110, 55, 43, .12);
  }
  #sp_information .sp-phone-button:active {
    background: var(--smile-accent-dark) !important;
    border-color: var(--smile-accent-dark) !important;
  }
  #sp_information .sp-contact-button {
    color: var(--smile-accent-dark) !important;
    border-color: #d9aaa0 !important;
    background: #fffdfa !important;
  }

  /* Section headings become neutral with a soft warm underline. */
  #spguide .sp-guide-heading {
    color: var(--smile-ink) !important;
    border-bottom-color: var(--smile-accent-soft) !important;
  }
  #spguide .sp-guide-card {
    border-color: var(--smile-border) !important;
    background: #fffdfa !important;
  }
  #spguide .sp-guide-card h3::after {
    color: #b39480 !important;
  }
  #spguide .sp-guide-card li a span {
    background: #f5ede3 !important;
    color: #7b5948 !important;
  }

  /* Operator block: old DL layout is retained only for desktop. */
  #aboutus .aboutus-desktop { display: none !important; }
  #aboutus .aboutus-mobile { display: block !important; }

  #aboutus {
    width: 100% !important;
    margin: 12px 0 !important;
    border: 1px solid var(--smile-border) !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }

  #aboutus .title {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px 12px 9px 18px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid var(--smile-border) !important;
    background: var(--smile-beige) !important;
    color: var(--smile-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-indent: 0 !important;
  }
  #aboutus .title::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 5px !important;
    height: auto !important;
    background: var(--smile-accent) !important;
  }

  #aboutus .aboutus-mobile {
    padding: 12px !important;
    color: var(--smile-ink) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  #aboutus .operator-company {
    margin: 0 0 10px !important;
  }
  #aboutus .operator-company strong {
    display: block !important;
    margin-bottom: 2px !important;
    color: var(--smile-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  #aboutus .operator-company span {
    display: block !important;
    color: var(--smile-muted) !important;
    font-size: 12px !important;
  }

  #aboutus .operator-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 10px !important;
    border-top: 1px solid #eee5dc !important;
    border-left: 1px solid #eee5dc !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  #aboutus .operator-meta-item {
    min-width: 0 !important;
    padding: 7px 8px !important;
    box-sizing: border-box !important;
    border-right: 1px solid #eee5dc !important;
    border-bottom: 1px solid #eee5dc !important;
    background: #fff !important;
  }
  #aboutus .operator-meta-item:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  #aboutus .operator-meta-label {
    display: block !important;
    margin-bottom: 1px !important;
    color: #8a7568 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
  }
  #aboutus .operator-meta-value,
  #aboutus .operator-meta-value a {
    display: block !important;
    color: var(--smile-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere !important;
  }
  #aboutus .operator-meta-value a[href^="tel:"] {
    color: var(--smile-accent-dark) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
  }

  #aboutus .operator-license {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 9px !important;
    padding: 7px 9px !important;
    border-radius: 6px !important;
    background: var(--smile-beige) !important;
  }
  #aboutus .operator-license span {
    flex: 0 0 auto !important;
    color: #7b6a5e !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }
  #aboutus .operator-license strong {
    min-width: 0 !important;
    color: var(--smile-ink) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: right !important;
  }

  #aboutus .operator-map {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    margin: 0 0 11px !important;
    padding: 8px 11px !important;
    box-sizing: border-box !important;
    border: 1px solid #d9aaa0 !important;
    border-radius: 7px !important;
    background: #fffdfa !important;
    color: var(--smile-accent-dark) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-indent: 0 !important;
  }
  #aboutus .operator-map .operator-map-arrow {
    color: #b98a7a !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  #aboutus .operator-groups {
    padding-top: 10px !important;
    border-top: 1px solid #eee5dc !important;
  }
  #aboutus .operator-groups-title {
    display: block !important;
    margin: 0 0 4px !important;
    color: var(--smile-ink) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  #aboutus .operator-groups ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #aboutus .operator-groups li {
    position: relative !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    color: var(--smile-muted) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  #aboutus .operator-groups li:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  #aboutus .operator-groups li::before {
    content: "" !important;
    position: absolute !important;
    left: 1px !important;
    top: .58em !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #c79a88 !important;
  }
}

@media screen and (max-width: 360px) {
  #aboutus .operator-meta {
    grid-template-columns: 1fr !important;
  }
  #aboutus .operator-license {
    display: block !important;
  }
  #aboutus .operator-license strong {
    display: block !important;
    margin-top: 2px !important;
    text-align: left !important;
  }
  #aboutus .operator-groups ul {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   v1.1.8 Embedded Google Map in mobile operator information
   - Show the actual map inside the operator card
   - Keep a clear external "Googleマップで見る" link below it
   ========================================================= */
@media screen and (max-width: 1023px) {
  #aboutus .operator-access {
    margin: 0 0 11px !important;
  }
  #aboutus .operator-access-title {
    display: block !important;
    margin: 0 0 6px !important;
    color: var(--smile-ink) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  #aboutus .operator-map-embed {
    position: relative !important;
    width: 100% !important;
    height: 205px !important;
    margin: 0 !important;
    border: 1px solid var(--smile-border) !important;
    border-radius: 8px 8px 0 0 !important;
    background: #f5f1ec !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #aboutus .operator-map-embed iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #aboutus .operator-map-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--smile-border) !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px !important;
    background: var(--smile-beige) !important;
    color: var(--smile-accent-dark) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }
  #aboutus .operator-map-link .operator-map-arrow {
    color: #b98a7a !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }
}

@media screen and (max-width: 360px) {
  #aboutus .operator-map-embed {
    height: 185px !important;
  }
}


/* =========================================================
   v1.1.9 Sale price label
   - Mobile sale cards display 「価格」 before the amount.
   ========================================================= */


/* v1.1.10: make mobile navigation links more obviously tappable */
@media screen and (max-width: 767px) {
  #sp_information .sp-contact-secondary a {
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  #spguide .sp-guide-card li { font-size: 14px !important; }
  #spguide .sp-guide-card li a {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }
}