:root {
  --color-bg: #dcdcdc;
  --color-lead: #d7e0e2;
  --color-content: #e9eeee;
  --color-forecast: #d7e0e2;
  --color-access: #e9eeee;
  --color-footer: #e9eeed;
  --color-text: #3f474b;
  --color-muted: #6f777b;
  --color-white: #fff;
  --color-accent: #b8a79c;
  --color-accent-hover: #a9988c;
  --color-blue-soft: #eaf7ff;
  --color-gauge: #2196f3;
  --serif: "さわらび明朝 M", "Sawarabi Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Sawarabi Gothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .035em;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.sp-only { display: none; }

.lp-container {
  width: min(1120px, calc(100% - 80px));
  margin-inline: auto;
}
.lp-container--narrow { width: min(951px, calc(100% - 80px)); }
.lp-section { padding: 105px 0; }
.lp-heading {
  margin: 0 0 48px;
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .1em;
  text-align: center;
}

.lp-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 95px;
  align-items: center;
  justify-content: space-between;
  padding: 0 54px;
  color: var(--color-white);
  transition: background .3s, height .3s;
}
.lp-header.is-scrolled { height: 105px; background: rgba(30, 40, 45, .68); backdrop-filter: blur(8px); }
.lp-header__logo { display: block; width: 180px; height: 68px; overflow: hidden; }
.lp-header__logo img { width: 100%; height: 100%; object-fit: contain; }
.lp-header__nav { display: flex; gap: 28px; align-items: center; }
.lp-header__nav a { position: relative; font-size: 13px; letter-spacing: .08em; }
.lp-header__nav a::after {
  position: absolute;
  right: 100%;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: var(--color-white);
  content: "";
  transition: right .25s;
}
.lp-header__nav a:hover::after { right: 0; }
.lp-header__toggle { display: none; }

.lp-hero {
  position: relative;
  min-height: 610px;
  height: 82vh;
  max-height: 850px;
  overflow: hidden;
  color: var(--color-white);
	
	.lyt-tube{
		position: relative;
		/*padding-bottom: 76.25%;*/
		padding-bottom: 120vh;
		height: 0;
		overflow: hidden;
		iframe{
		position: absolute;
		top: 65%;
		left: 50%;
		width: 400vh;
		height: 100%;
		transform: translate(-50%, -90%);
		}
	}
}
.lp-hero__video { width: 100%; height: 100%; object-fit: cover; }
.lp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 31, 39, .3) 0%, rgba(18, 31, 39, .06) 45%, rgba(18, 31, 39, .52) 100%); }
.lp-lead { padding: 135px 0 145px; background: var(--color-lead); text-align: center; }
.lp-lead__title { margin: 0 0 25px; font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: .12em; }
.lp-lead .lp-heading { margin-bottom: 42px; }
.lp-lead__text { margin: 0; color: #596166; font-size: 15px; text-align: center; }

.lp-features { padding-top: 125px; background: var(--color-content); }
.lp-feature { display: grid; margin-top: 90px; grid-template-columns: 1.15fr .85fr; align-items: center; }
.lp-feature--reverse { grid-template-columns: .85fr 1.15fr; }
.lp-feature--reverse .lp-feature__image { order: 2; }
.lp-feature--reverse .lp-feature__body { order: 1; padding: 45px 75px 45px 0; }
.lp-feature__image { height: 410px; overflow: hidden; }
.lp-feature__image img { height: 100%; object-fit: cover; }
.lp-feature__body { padding: 45px 0 45px 75px; }
.lp-feature__body h3 { margin: 0 0 25px; font-family: var(--serif); font-size: clamp(24px, 2.5vw, 34px); font-weight: 500; line-height: 1.65; letter-spacing: .07em; }
.lp-feature__body p { margin: 0; color: #596166; font-size: 15px; }

.lp-cloud-rate { padding-bottom: 120px; background: var(--color-forecast); }
.lp-cloud-rate .lp-heading { margin-bottom: 55px; }
.forecast-widget { width: min(760px, 100%); margin: 0 auto; }
.forecast-widget__status { color: var(--color-muted); text-align: center; }
.forecast-widget__days { display: grid; gap: 14px; }
.forecast-day {
  display: grid;
  min-height: 150px;
  padding: 20px 34px;
  border: 1px solid rgba(70, 91, 102, .1);
  border-radius: 3px;
  background: rgba(255, 255, 255, .88);
  grid-template-columns: 1fr 132px;
  align-items: center;
  box-shadow: 0 8px 24px rgba(60, 80, 95, .07);
}
.forecast-day:first-child { border-left: 5px solid var(--color-gauge); background: #f7fbfd; }
.forecast-day__date { margin: 0; color: var(--color-text); font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: .08em; text-align: left; }
.forecast-day__date small { color: var(--color-muted); font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: .1em; }
.forecast-day__gauge { display: block; width: 124px; margin: 0 auto; }
.forecast-day__gauge text { font-family: var(--sans); font-size: 24px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.lp-movie__frame { position: relative; width: min(1117px, 100%); margin: 90px auto 0; padding-top: min(56.25%, 628px); overflow: hidden; background: #283035; }
.lp-movie__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp-live-camera { margin: 72px 0 0; text-align: center; }
.lp-live-camera .lp-button { min-width: 360px; }

.lp-access { background: var(--color-access); }
.lp-access__map { width: 100vw; height: 480px; margin-left: calc(50% - 50vw); overflow: hidden; }
.lp-access__map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.72); }
.lp-access__info { padding: 42px 20px 0; text-align: center; }
.lp-access__info p { margin: 0 0 28px; color: #596166; }
.lp-button {
  display: inline-flex;
  min-width: 280px;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 15px 34px;
  border-radius: 99px;
  color: var(--color-white);
  background: var(--color-accent);
  font-size: 15px;
  transition: background .25s, transform .25s;
}
.lp-button:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
.lp-button span { font-size: 10px; }

.lp-special__image { height: min(48vw, 650px); overflow: hidden; }
.lp-special__image img { height: 100%; object-fit: cover; object-position: center 55%; }
.lp-special__body { padding: 110px 0 120px; background: var(--color-blue-soft); text-align: center; }
.lp-special__body .lp-heading { margin-bottom: 32px; }
.lp-special__body p:not(.lp-section-label) { margin: 0 0 36px; color: #596166; }

.lp-footer { padding: 65px 30px 35px; background: var(--color-footer); text-align: center; }
.lp-footer__logo { width: 220px; height: 88px; margin: 0 auto 24px; object-fit: contain; }
.lp-footer__links { display: flex; margin-bottom: 28px; justify-content: center; gap: 30px; color: var(--color-muted); font-size: 11px; }
.lp-footer__links span + span::before { margin-right: 30px; content: "｜"; }
.lp-footer small { color: #858c8f; font-size: 9px; letter-spacing: .08em; }

@media (max-width: 900px) {
  .lp-container { width: min(100% - 56px, 1120px); }
  .lp-container--narrow { width: min(100% - 56px, 760px); }
  .lp-header { padding: 0 28px; }
  .lp-header__nav { gap: 16px; }
  .lp-feature__body { padding-left: 42px; }
  .lp-feature--reverse .lp-feature__body { padding-right: 42px; }
}

@media (max-width: 767px) {
  body { font-size: 14px; line-height: 1.9; }
  .pc-only { display: none; }
  .sp-only { display: block; }
  .lp-container, .lp-container--narrow { width: calc(100% - 40px); }
  .lp-section { padding: 74px 0; }
  .lp-heading { margin-bottom: 32px; font-size: 29px; line-height: 1.65; }
  .lp-header { height: 75px; padding: 0 18px; }
  .lp-header.is-scrolled { height: 80px; }
  .lp-header.is-menu-open { background: transparent; backdrop-filter: none; }
  .lp-header__logo { width: 142px; height: 54px; }
  .lp-header__toggle { position: relative; z-index: 32; display: block; width: 42px; height: 42px; padding: 0; overflow: visible; border: 0; background: transparent; }
  .lp-header__toggle span { position: absolute; left: 50%; display: block; width: 24px; height: 1px; background: #fff; transform: translateX(-50%); transition: top .25s, transform .25s, opacity .25s; }
  .lp-header__toggle span:nth-child(1) { top: 14px; }
  .lp-header__toggle span:nth-child(2) { top: 21px; }
  .lp-header__toggle span:nth-child(3) { top: 28px; }
  .lp-header__toggle.is-open { position: fixed; z-index: 42; top: 13px; right: 18px; width: 42px; height: 42px; padding: 0; }
  .lp-header__toggle.is-open span { top: 50%; }
  .lp-header__toggle.is-open span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
  .lp-header__toggle.is-open span:nth-child(2) { opacity: 0; }
  .lp-header__toggle.is-open span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
  .lp-header__nav { position: fixed; z-index: 30; inset: 0; display: flex; visibility: hidden; width: 100%; height: 100dvh; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: #1e282d; opacity: 0; overscroll-behavior: contain; touch-action: none; transition: opacity .25s, visibility .25s; }
  .lp-header__nav.is-open { visibility: visible; opacity: 1; }
  .lp-header__nav a { width: 100%; font-family: var(--serif); font-size: 17px; letter-spacing: .1em; text-align: center; }

  .lp-hero { min-height: 560px; height: 72vh; max-height: 720px; }
  .lp-hero__video { object-position: center; }
  .lp-lead { padding: 86px 0 92px; }
  .lp-lead__title { font-size: 17px; }
  .lp-lead__text { font-size: 13px; text-align: left; }
  .lp-lead__text br { display: none; }

  .lp-features { padding-top: 82px; }
  .lp-feature, .lp-feature--reverse { display: flex; margin-top: 62px; flex-direction: column; }
  .lp-feature--reverse .lp-feature__image, .lp-feature--reverse .lp-feature__body { order: initial; }
  .lp-feature__image { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .lp-feature__body, .lp-feature--reverse .lp-feature__body { padding: 27px 0 0; }
  .lp-feature__body h3 { margin: 0 0 16px; font-size: 25px; }
  .lp-feature__body p { font-size: 14px; }

  .forecast-widget__days { grid-template-columns: 1fr; }
  .forecast-day { min-height: 124px; padding: 14px 18px; grid-template-columns: 1fr 100px; }
  .forecast-day__date { font-size: 16px; text-align: left; }
  .forecast-day__date small { font-size: 12px; }
  .forecast-day__gauge { width: 94px; }
  .lp-movie__frame { margin-top: 60px; padding-top: 56.25%; }
  .lp-live-camera { margin-top: 48px; }
  .lp-live-camera .lp-button { width: min(100%, 330px); min-width: 0; }
  .lp-access__map { height: 340px; }
  .lp-access__info { padding: 30px 0 0; text-align: left; }
  .lp-button { min-width: 270px; min-height: 58px; padding: 14px 28px; font-size: 14px; }
  .lp-access__info .lp-button { display: flex; width: 270px; margin: 0 auto; }

  .lp-special__image { height: 66vw; min-height: 260px; }
  .lp-special__body { padding: 75px 0 82px; }
  .lp-special__body p:not(.lp-section-label) { text-align: left; }

  .lp-footer { padding: 48px 20px 30px; }
  .lp-footer__logo { width: 180px; height: 72px; }
  .lp-footer__links { flex-direction: column; gap: 5px; }
  .lp-footer__links span + span::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}