/* ドーミーイン 客室のこだわり LP専用CSS（共通CSSの後に読み込み） */
/* ---- 要素スタイル（元インラインstyleをクラス化） ---- */
#lpRooms .lp-div-01 {
  background: #ffffff;
  color: #333333;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}
#lpRooms .lp-header-01 {
  position: relative;
}
#lpRooms .lp-div-02 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 24, 34, 0.34) 0%, rgba(16, 24, 34, 0.58) 50%, rgba(16, 24, 34, 0.34) 100%);
  pointer-events: none;
}
#lpRooms .lp-div-03 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#lpRooms .lp-h1-01 {
  font-size: clamp(22px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffffff;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  line-height: 1.5;
}
#lpRooms .lp-br-01 {
  display: none;
}
#lpRooms .lp-div-04 {
  background: #ffffff;
}
#lpRooms .lp-nav-01 {
  max-width: 1080px;
  margin: 0 auto;
  height: 34px;
  padding: 0 clamp(16px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #000000;
}
#lpRooms .lp-a-01 {
  color: #000000;
  text-decoration: none;
}
#lpRooms .lp-span-01 {
  color: #000000;
}
#lpRooms .lp-section-01 {
  padding: clamp(52px, 7vw, 92px) clamp(16px, 3vw, 40px);
}
#lpRooms .lp-p-01 {
  max-width: 44em;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.3;
  letter-spacing: 0.04em;
  color: #000000;
}
#lpRooms .lp-span-02 {
  display: inline-block;
}
#lpRooms .lp-section-02 {
  background: #39527c;
  padding: clamp(18px, 2.4vw, 26px) clamp(16px, 3vw, 40px);
}
#lpRooms .lp-h2-01 {
  text-align: center;
  font-size: clamp(17px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}
#lpRooms .lp-span-03 {
  font-size: 1.35em;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 0 0.1em 0 0.06em;
}
#lpRooms .lp-section-03 {
  background: #f2f4f7;
  padding: clamp(52px, 6.5vw, 84px) clamp(16px, 3vw, 40px);
}
#lpRooms .lp-div-05 {
  max-width: 1080px;
  margin: 0 auto;
}
#lpRooms .lp-div-06 {
  position: relative;
  height: clamp(56px, 7vw, 92px);
  margin-bottom: 6px;
}
#lpRooms .lp-span-04 {
  position: absolute;
  left: -0.06em;
  bottom: -0.16em;
  font-size: clamp(72px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #dfe4ec;
  user-select: none;
  pointer-events: none;
}
#lpRooms .lp-h2-02 {
  font-size: clamp(12px, 3.6vw, 26px);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #39527c;
  margin: 0 0 clamp(30px, 4vw, 50px);
  white-space: nowrap;
}
#lpRooms .lp-div-07 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}
#lpRooms .lp-article-01 {
  display: flex;
  flex-direction: column;
}
#lpRooms .lp-div-08 {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ffffff;
}
#lpRooms .lp-h3-01 {
  font-size: clamp(13px, 4vw, 17px);
  font-weight: 900;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: #39527c;
  margin: 26px 0 0;
  white-space: nowrap;
}
#lpRooms .lp-p-02 {
  font-size: 14px;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: 0.03em;
  margin: 14px 0 0;
  color: #000000;
}
#lpRooms .lp-section-04 {
  background: #ffffff;
  padding: clamp(52px, 6.5vw, 84px) clamp(16px, 3vw, 40px);
}
#lpRooms .lp-span-05 {
  position: absolute;
  left: -0.06em;
  bottom: -0.16em;
  font-size: clamp(72px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #e6eaf1;
  user-select: none;
  pointer-events: none;
}
#lpRooms .lp-div-09 {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f2f4f7;
}
#lpRooms .lp-div-10 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
#lpRooms .lp-h3-02 {
  font-size: clamp(13px, 4vw, 17px);
  font-weight: 900;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: #39527c;
  margin: 0;
  white-space: nowrap;
}
#lpRooms .lp-section-05 {
  background: #f2f4f7;
  padding: clamp(52px, 6.5vw, 84px) clamp(16px, 3vw, 40px) clamp(60px, 7vw, 96px);
}
#lpRooms .lp-section-06 {
  background: #ffffff;
  padding: 0 clamp(16px, 3vw, 40px) clamp(20px, 3vw, 32px);
}
#lpRooms .lp-div-11 {
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 0;
}
#lpRooms .lp-p-03 {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 2.0;
  letter-spacing: 0.03em;
  color: #000000;
}
#lpRooms .lp-section-07 {
  background: #ffffff;
  padding: clamp(20px, 3vw, 36px) 0 0;
}
#lpRooms .lp-div-12 {
  padding: clamp(30px, 4vw, 52px) clamp(16px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
#lpRooms .lp-p-04 {
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: #000000;
}
#lpRooms .lp-span-06 {
  display: inline-block;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: 0.08em;
  color: #39527c;
  margin-bottom: 18px;
}
#lpRooms .lp-a-02 {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: #39527c;
  color: #ffffff;
  text-decoration: none;
  padding: 18px 26px 18px 34px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
#lpRooms .lp-span-07 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  font-size: 12px;
}
#lpRooms .lp-section-08 {
  background: #f2f4f7;
  padding: clamp(44px, 6vw, 76px) clamp(16px, 3vw, 40px);
}
#lpRooms .lp-div-13 {
  max-width: 860px;
  margin: 0 auto;
}
#lpRooms .lp-p-05 {
  margin: 0 0 10px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000000;
}
#lpRooms .lp-span-08 {
  background: linear-gradient(to top, rgba(255,255,0,0.5) 50%, transparent 50%);
}
#lpRooms .lp-div-14 {
  width: 766px;
  max-width: 100%;
  aspect-ratio: 766 / 431;
  position: relative;
  margin: 0 auto;
}
#lpRooms .lp-iframe-01 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ---- レイアウト／動き／SP ---- */
#lpRooms { text-wrap: pretty; font-family: "Noto Sans JP", sans-serif; -webkit-font-smoothing: antialiased; }
#lpRooms a { color: #39527c; text-underline-offset: 3px; }
#lpRooms a:hover { color: #2f5a8c; }
#mv { height: 600px; overflow: hidden; }
#mvGrid { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; width: 100%; height: 100%; background: #ffffff; }
#mvGrid .mvRow { overflow: hidden; }
#mvGrid .mvTrack { display: flex; gap: 0; width: max-content; height: 100%; animation: mvMarquee 54s linear infinite; }
#mvGrid .mvRow.rev .mvTrack { animation-name: mvMarqueeRev; animation-duration: 66s; }
#mvGrid .mvSet { display: flex; gap: 10px; margin-right: 10px; flex: 0 0 auto; height: 100%; }
#mvGrid .mvTile { position: relative; flex: 0 0 auto; width: clamp(150px, 24vw, 320px); height: 100%; background: #e5e9ef; overflow: hidden; }
#mvGrid .mvSet > .mvTile.w-wide { width: clamp(200px, 32vw, 430px); }
#mvGrid .mvSet > .mvTile.w-narrow { width: clamp(110px, 17vw, 230px); }
#mvGrid .mvTile > image-slot { position: absolute; inset: 0; }
#mvGrid .mvTile > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@keyframes mvMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mvMarqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { #mvGrid .mvTrack { animation: none !important; } }
@media (prefers-reduced-motion: reduce) {
  #lpRooms [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
main.dormyinnSubMenu { padding-bottom: 0 !important; margin-bottom: 0 !important; }
#yt { margin-bottom: 0 !important; }
footer#footerContainerId.footerContainer { margin-top: 0 !important; }
@keyframes ctaMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ctaMarqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.ctaRail { overflow: hidden; cursor: grab; touch-action: pan-y; }
.ctaRail.dragging { cursor: grabbing; }
.ctaTrack { display: flex; gap: 0; width: max-content; animation: ctaMarquee 46s linear infinite; }
.ctaTrack.rev { animation-name: ctaMarqueeRev; animation-duration: 58s; }
.ctaTrack > .ctaSet { display: flex; gap: 8px; margin-right: 8px; flex: 0 0 auto; }
.ctaRail:hover .ctaTrack { animation-play-state: paused; }
.ctaRail.js .ctaTrack { animation: none !important; }
.ctaTrack .ctaSet > div { position: relative; flex: 0 0 auto; background: #e5e9ef; overflow: hidden; }
.ctaRail.rowA .ctaSet > div { width: clamp(180px, 22vw, 300px); aspect-ratio: 16 / 9; }
.ctaRail.rowB .ctaSet > div { width: clamp(150px, 18vw, 240px); aspect-ratio: 16 / 9; }
.ctaRail .ctaSet > div > image-slot { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.ctaTrack img, .ctaTrack image-slot { -webkit-user-drag: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .ctaTrack { animation: none; } }
@media (max-width: 900px) {
  #mv { height: 390px; overflow: hidden; }
  #mv > div { height: 390px; }
  #mv { height: 390px !important; }
  #mv img { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: center !important; }
  #crumbs { display: none !important; }
  #mv-br { display: block !important; }
  #cta-lead { font-size: 22px !important; line-height: 1.6 !important; margin-bottom: 24px !important; }
  #reserve p { font-size: 13px !important; line-height: 2 !important; }
  #reserve p span { line-height: 2 !important; }
  #cta-lead, #cta-lead span { line-height: 1.6 !important; }
  [data-sec-title] { white-space: normal !important; font-size: 20px !important; line-height: 1.7 !important; }
}

/* ---- 画像（本番用 <img>） ---- */
#lpRooms .lp-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#mvGrid .mvTile > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* CTAボタン：ホバー時も文字色を白に固定（#lpRooms a:hover の上書き防止） */
#lpRooms #reserve a[href*="/hotels/list/"],
#lpRooms #reserve a[href*="/hotels/list/"]:hover,
#lpRooms #reserve a[href*="/hotels/list/"]:focus-visible { color: #ffffff !important; }
#lpRooms #reserve a[href*="/hotels/list/"]:hover { background: #2f4568 !important; }