/* オカムラメイト・トップ 左カラム専用。既存 header / nav / aside / footer を変更しません。  */
/* 既存 #main > article の幅（約740px）に合わせ、すべて .om-landing 配下に限定。 */
#main > article .om-landing,
#main > article .om-landing * { box-sizing: border-box; }
#main > article .om-landing { clear: both; display: block; width: 100%; max-width: 740px; margin: 0; padding: 0; font-family: -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Yu Gothic",sans-serif; font-size: 13px; line-height: 1.55; color: #173a50; background: #fff; }
#main > article .om-landing section { float: none; width: auto; min-width: 0; height: auto; padding: 0; margin: 0; border: 0; background-image: none; }
#main > article .om-landing h2,
#main > article .om-landing h3,
#main > article .om-landing p { float: none; width: auto; height: auto; padding: 0; margin: 0; border: 0; background: none; line-height: inherit; text-indent: 0; }
#main > article .om-landing h2,
#main > article .om-landing h3 { font-family: inherit; font-weight: 800; letter-spacing: .015em; color: #0b3550; }
#main > article .om-landing a { color: inherit; text-decoration: none; background: none; }
#main > article .om-landing a:hover { opacity: 1; }
#main > article .om-landing a:focus-visible { outline: 3px solid #efad68; outline-offset: 2px; }
#main > article .om-landing img { border: 0; max-width: 100%; height: auto; vertical-align: middle; }

/* 視認性の高い青系のエリアバナー。外部画像なしで表示可能です。 */
#main > article .om-landing .om-hero { position: relative; isolation: isolate; min-height: 186px; display: flex; align-items: center; overflow: hidden; padding: 23px 25px; margin-bottom: 28px; color: #0a3954; background: linear-gradient(112deg,#deeff8 0%,#e8f6fc 46%,#c2e4f2 100%); border: 1px solid #d2e7f0; border-radius: 2px; }
#main > article .om-landing .om-hero::after { content: ""; position: absolute; height: 78px; width: 400px; background: #177ca6; transform: rotate(-19deg); bottom: -91px; right: -40px; opacity: .75; z-index: -1; }
#main > article .om-landing .om-hero__copy { width: 77%; position: relative; z-index: 2; }
#main > article .om-landing .om-eyebrow { color: #14799d; font: 700 9px/1.5 Arial,sans-serif; letter-spacing: .13em; margin-bottom: 9px; }
#main > article .om-landing .om-hero h2 { font-size: 24px; line-height: 1.34; margin: 0 0 11px; color: #083956; }
#main > article .om-landing .om-hero__copy > p:last-child { font-size: 11.5px; line-height: 1.8; max-width: 485px; font-weight: 600; color: #375b71; }
#main > article .om-landing .om-hero__art { position: absolute; right: -8px; bottom: 0; width: 34%; height: 90%; z-index: 0; opacity: .8; pointer-events: none; }
#main > article .om-landing .om-hero__art svg { width: 100%; height: 100%; }

/* 共通見出し */
#main > article .om-landing .om-section { padding: 0 10px 22px; }
#main > article .om-landing .om-section__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 0 0 18px; }
#main > article .om-landing .om-kicker { font: 800 10px/1.45 Arial,sans-serif; letter-spacing: .17em; color: #117d9e; margin-bottom: 5px; }
#main > article .om-landing .om-section__header h2 { font-size: 23px; line-height: 1.32; color: #073451; }
#main > article .om-landing .om-section__aside { text-align: right; font-size: 10.5px; color: #688394; line-height: 1.55; flex: 0 0 37%; }

/* 店舗カード：740pxの記事内3列。写真ファイルは店舗ごとに差し替え可能。 */
#main > article .om-landing .om-shops__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
#main > article .om-landing .om-shop { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #d6e5eb; border-top: 4px solid #55a9bb; border-radius: 11px; overflow: hidden; box-shadow: 0 8px 20px rgba(18,69,91,.07); transition: border-color .15s,transform .15s,box-shadow .15s; }
#main > article .om-landing .om-shop:hover { transform: translateY(-2px); border-color: #9ccdd6; box-shadow: 0 12px 24px rgba(11,62,84,.13); }
#main > article .om-landing .om-shop__photo { display: block; width: 100%; aspect-ratio: 460/225; overflow: hidden; border-bottom: 1px solid #dfecef; background: linear-gradient(130deg,#d1e9f3,#edf7fa); }
#main > article .om-landing .om-shop__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
#main > article .om-landing .om-shop:hover .om-shop__photo img { transform: scale(1.035); }
#main > article .om-landing .om-shop__inner { flex: 1; display: flex; flex-direction: column; gap: 0; padding: 12px 12px 11px; min-width: 0; }
#main > article .om-landing .om-shop__station { display: inline-block; align-self: flex-start; margin: 0 0 9px; padding: 3px 7px; border-radius: 24px; background: #eaf5f6; color: #34748a; font-weight: 800; font-size: 10px; white-space: nowrap; }
#main > article .om-landing .om-shop h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.3; white-space: nowrap; }
#main > article .om-landing .om-shop h3 a { color: #0b3953; }
#main > article .om-landing .om-shop h3 span { color: #87b3c5; font-size: 12px; }
#main > article .om-landing .om-shop__address { flex: 1; font-size: 10.7px; min-height: 48px; line-height: 1.55; color: #617e8f; overflow-wrap: anywhere; }
#main > article .om-landing .om-shop__phone { display: block; margin: 9px 0 10px; color: #006d98; font-size: 13px; font-weight: 900; white-space: nowrap; }
#main > article .om-landing .om-shop__button { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 7px 10px; background: #086187; color: #fff; border-radius: 6px; font-weight: 800; font-size: 11px; }
#main > article .om-landing .om-shop__button:hover { background: #097e9e; color: #fff; }
#main > article .om-landing .om-shop__map { align-self: flex-end; display: inline-block; margin-top: 10px; font-size: 10px; color: #5b7c8f; }
#main > article .om-landing .om-shop__map:hover { text-decoration: underline; }
#main > article .om-landing .om-shops__note { margin: 12px 0 4px; font-size: 10.5px; color: #718b98; }

/* 情報案内 */
#main > article .om-landing .om-information { padding-top: 26px; margin-top: 7px; border-top: 1px solid #e3edf0; }
#main > article .om-landing .om-guide__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
#main > article .om-landing .om-guide { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 70px; background: #fff; border: 1px solid #dce8ed; border-radius: 9px; padding: 9px 8px; transition: background .15s, border-color .15s; }
#main > article .om-landing .om-guide:hover { background: #f2f9fb; border-color: #bedce4; }
#main > article .om-landing .om-guide__icon { flex: 0 0 33px; width: 33px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 17px; }
#main > article .om-landing .om-guide--green .om-guide__icon { background: #def4e9; color: #138657; }
#main > article .om-landing .om-guide--blue .om-guide__icon { background: #e4f2fc; color: #2473b4; }
#main > article .om-landing .om-guide--orange .om-guide__icon { background: #fff0dc; color: #c38525; }
#main > article .om-landing .om-guide--violet .om-guide__icon { background: #f3eafa; color: #a364bc; }
#main > article .om-landing .om-guide--sea .om-guide__icon { background: #e4f3f3; color: #0e899a; }
#main > article .om-landing .om-guide--indigo .om-guide__icon { background: #e9edfd; color: #536fac; }
#main > article .om-landing .om-guide__text { min-width: 0; flex: 1; }
#main > article .om-landing .om-guide__text strong { display: block; font-size: 11.5px; color: #163a51; white-space: nowrap; }
#main > article .om-landing .om-guide__text small { display: block; font-size: 9.1px; color: #758c99; line-height: 1.5; margin-top: 3px; }
#main > article .om-landing .om-guide__arrow { flex: 0 0 auto; color: #0b88ab; font-weight: 900; font-size: 13px; }

/* SNS */
#main > article .om-landing .om-social-title { display: flex; align-items: center; gap: 12px; font-size: 16px; margin: 26px 0 13px; color: #173f56; }
#main > article .om-landing .om-social-title::after { content: ""; height: 1px; background: #d9e5eb; flex: 1; }
#main > article .om-landing .om-social__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
#main > article .om-landing .om-social { display: flex; flex-direction: column; min-width: 0; min-height: 160px; padding: 10px 10px 12px; border: 1px solid #dae7ec; border-radius: 9px; background: #f4f8fa; color: #173a50; }
#main > article .om-landing a.om-social:hover { border-color: #a7d0df; background: #edf7fb; }
#main > article .om-landing .om-social__icon { width: 32px; height: 32px; margin-bottom: 9px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; font-weight: 800; }
#main > article .om-landing .om-social__icon--blog { background: #e1f2fa; color: #167ea2; }
#main > article .om-landing .om-social__icon--ig { background: linear-gradient(125deg,#ffd173,#ed4d79,#8455d4); color: #fff; }
#main > article .om-landing .om-social__icon--x { background: #243440; color: #fff; }
#main > article .om-landing .om-social__icon--app { background: #dff4e9; color: #208965; }
#main > article .om-landing .om-social strong { font-size: 11px; line-height: 1.4; color: #143b53; }
#main > article .om-landing .om-social small { display: block; font-size: 9px; line-height: 1.5; margin: 9px 0 12px; color: #748b9a; flex: 1; }
#main > article .om-landing .om-social__link { font-weight: 800; font-size: 9.7px; color: #0275a0; white-space: nowrap; }
#main > article .om-landing .om-social__app-links { display: flex; gap: 5px 10px; flex-wrap: wrap; }
#main > article .om-landing .om-social__app-links a { font-weight: 800; font-size: 9px; color: #0275a0; white-space: nowrap; }

/* 左カラムが可変幅になった場合のレイアウト（従来サイト全体の固定幅は変更しない）。 */
@media (max-width: 860px) { #main > article .om-landing .om-shops__grid { gap: 9px; } #main > article .om-landing .om-shop__inner { padding: 10px; } }
@media (max-width: 650px) {
  #main > article .om-landing .om-hero__copy { width: 94%; }
  #main > article .om-landing .om-hero__art { opacity: .24; }
  #main > article .om-landing .om-shops__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #main > article .om-landing .om-guide__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #main > article .om-landing .om-social__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 420px) {
  #main > article .om-landing .om-hero { padding: 20px 17px; }
  #main > article .om-landing .om-hero h2 { font-size: 21px; }
  #main > article .om-landing .om-section__header { align-items: flex-start; flex-direction: column; }
  #main > article .om-landing .om-section__aside { text-align: left; }
  #main > article .om-landing .om-shops__grid { grid-template-columns: 1fr; }
}