@charset "UTF-8";
/* ---------------------------------------------------------------

	軽井沢自動運転実証運行バス

	01.リセット
	02.基本・汎用
	03.コンテンツ

--------------------------------------------------------------- */
/* var() 関数 */
:root {
  /* コンテンツ幅 */
  --content-width: 1080px;
  /* コンテンツの上下余白 */
  --content-margin-normal: 40px;
  --content-margin-narrow: 30px;
  --content-margin-wide: 60px;
  /* フォントサイズ / 行間 / 文字間 */
  --fontsize-main-base: 62.5%;
  --fontsize-main: 1.6rem;
  --lineheight-main: 1.5;
  --letterspacing-main: 0em;
  /* 通常より一段階小さいフォントサイズ（一覧をみるボタンなど） */
  --fontsize-main-small: 1.5rem;
  /* 本文（ #main ） */
  --fontsize-detail: 1.8rem;
  --lineheight-detail: 1.75;
  --letterspacing-detail: 0.05em;
  /* 見出し */
  --lineheight-detail-midashi: 1.5;
  --letterspacing-detail-midashi: 0.1em;
  /* フォントファミリー */
  --fontfamily-normal: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Arial, 'BIZ UDPGothic', Meiryo, メイリオ, Osaka, sans-serif;
  /* 見出し / 太字 */
  --fontfamily-bold: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Arial, 'BIZ UDPGothic', Meiryo, メイリオ, Osaka, sans-serif;
  /* 基本文字色 */
  --text-color: $c_black;
  /* a:link のリンク色 */
  --textlink-link: $c_black;
  /* a:visited のリンク色 */
  --textlink-visited: $c_black;
  /* a:active のリンク色 */
  --textlink-active: #cc0000;
  /* a:hoder / a:focus のリンク色 */
  --textlink-hover: #000000;
  /* 表の枠線の色 */
  --table-bordercolor: #858585;
  /* 表の見出し背景色 */
  --table-th-background: #f0ebd9;
  --table-th-color: $c_black;
}

/* var() 関数 ここまで */
/* ---------------------------------------------------------------

	リセット

--------------------------------------------------------------- */
html {
  font-size: var(--fontsize-main-base, 62.5%);
  scroll-behavior: smooth;
}

body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-size: var(--fontsize-main, 1.4rem);
  line-height: var(--lineheight-main, 1.5);
  -moz-text-size-adjust: none;
       text-size-adjust: none;
  -webkit-text-size-adjust: none;
}
@media print, screen and (min-width: 1081px) {
  body {
    font-size: var(--fontsize-main, 1.6rem);
  }
}

.container {
  width: auto;
  height: auto;
  margin: 0px;
  padding: 0 15px;
  overflow: hidden;
}
@media print, screen and (min-width: 1081px) {
  .container {
    min-width: var(--content-width, 1080px);
  }
}

:where(p) {
  margin: 0;
}
:where(p) + p {
  margin-top: 1em;
}

:where(main ul) {
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(main figure) {
  display: block;
  margin: 0;
}

:where(main img) {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ---------------------------------------------------------------

	基本・汎用

--------------------------------------------------------------- */
/* Layout
------------------------------ */
main section + section {
  margin-top: var(--content-margin-wide);
}

.inner {
  margin: 0 auto;
  max-width: var(--content-width);
}

/* Font
------------------------------ */
body,
button {
  color: var(--text-color);
  font-family: var(--fontfamily-normal, sans-serif);
  font-size: 1.4rem;
  line-height: var(--lineheight-main, 1.5);
  letter-spacing: var(--letterspacing-main, 0em);
  overflow-wrap: break-word;
}
@media print, screen and (min-width: 1081px) {
  body,
  button {
    font-size: var(--fontsize-main, 1.6rem);
  }
}

header {
  font-size: var(--fontsize-main-small, 1.5rem);
  line-height: var(--lineheight-detail, 1.75);
  letter-spacing: var(--letterspacing-detail, 0.05em);
}
@media print, screen and (min-width: 1081px) {
  header {
    font-size: var(--fontsize-detail, 1.8rem);
  }
}

main {
  line-height: var(--lineheight-detail, 1.75);
  letter-spacing: var(--letterspacing-detail, 0.05em);
}

h1, h2, h3, h4, h5, h6, strong {
  font-family: var(--fontfamily-bold, sans-serif);
  line-height: var(--lineheight-detail-midashi, 1.5);
  letter-spacing: var(--letterspacing-detail-midashi, 0.1em);
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .hp_pcOnly {
    display: none;
  }
}

.hp_spOnly {
  display: none;
}
@media screen and (max-width: 767px) {
  .hp_spOnly {
    display: block;
  }
}

.hp_spNote {
  font-size: 0.93em;
}
@media print, screen and (min-width: 1081px) {
  .hp_spNote {
    font-size: 0.94em;
  }
}

.hp_textindent {
  padding-left: 1em;
  text-indent: -1em;
}

.hp_fontColor-red {
  color: #ba4120 !important;
}

/* フォントサイズ */
.hp_fontSize-l {
  font-size: 1.2em;
}

sup {
  font-size: 0.6em;
}

/* マージン */
.hp_mt0 {
  margin-top: 0px !important;
}

.hp_mt5 {
  margin-top: 5px !important;
}

.hp_mt10 {
  margin-top: 10px !important;
}

.hp_mt15 {
  margin-top: 15px !important;
}

.hp_mt20 {
  margin-top: 20px !important;
}

.hp_mt25 {
  margin-top: 25px !important;
}

.hp_mt30 {
  margin-top: 30px !important;
}

.hp_mt35 {
  margin-top: 35px !important;
}

.hp_mt40 {
  margin-top: 40px !important;
}

.hp_mt45 {
  margin-top: 45px !important;
}

.hp_mt50 {
  margin-top: 50px !important;
}

.hp_mt55 {
  margin-top: 55px !important;
}

.hp_mt60 {
  margin-top: 60px !important;
}

/* 注釈 */
.hp_notes {
  padding-left: 1em !important;
  text-indent: -1em;
  font-size: 0.75em;
  line-height: 1.8;
}

/* 非表示 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* 見出し
------------------------------ */
.el_heading {
  margin: 0 auto 20px;
  padding: 0.8em 1em;
  background-color: #f0f6e3;
  font-size: 1.25em;
}
@media print, screen and (min-width: 1081px) {
  .el_heading {
    margin-bottom: var(--content-margin-narrow);
    font-size: 1.63em;
  }
}

/* スクロール
------------------------------ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ボタン
------------------------------ */
.bl_btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.el_btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 24px;
  padding: 1.2em 4em;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  background-color: #333333;
  border-radius: 50vw;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: 0.3s background;
}
@media print, screen and (min-width: 1081px) {
  .el_btn {
    min-height: 40px;
    padding: 1.2em 6.8em;
  }
}
@media screen and (max-width: 767px) {
  .el_btn {
    padding: 1.2em 2.4em;
  }
}
.el_btn::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #ffffff;
  -webkit-mask: url(../img/icon_blank.svg) no-repeat center/contain;
          mask: url(../img/icon_blank.svg) no-repeat center/contain;
  position: absolute;
  right: 18px;
  top: 0;
  bottom: 0;
  margin: auto;
  color-scheme: only light; /* ダークモード回避 */
}
@media print, screen and (min-width: 1081px) {
  .el_btn::after {
    width: 15px;
    height: 15px;
    right: 40px;
  }
}
@media screen and (max-width: 767px) {
  .el_btn::after {
    right: 14px;
  }
}
.el_btn:hover {
  text-decoration: underline;
  background-color: #ba4120;
}

/* ---------------------------------------------------------------

	コンテンツ

--------------------------------------------------------------- */
/* ヘッダー
------------------------------ */
.header {
  margin: 0 auto var(--content-margin-wide);
  background: url(../img/bg_header-sp.png) no-repeat right top/100%;
  position: relative;
}
@media print, screen and (min-width: 1081px) {
  .header {
    margin-bottom: 100px;
    background-image: url(../img/bg_header-pc.png);
    background-position: center top;
  }
}
@media print, screen and (min-width: 1081px) {
  .header .inner {
    max-width: calc(var(--content-width) - 120px);
  }
}
.header::after {
  content: "";
  width: 30%;
  height: calc(100% + 15px);
  background: url(../img/bg_header_bus-pc.png) no-repeat left top/auto 100%;
  position: absolute;
  top: 0;
  right: 0;
}
@media print, screen and (min-width: 1081px) {
  .header::after {
    width: calc((100vw - var(--content-width)) / 2 + 300px);
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  .header::after {
    width: calc(100% - 220px);
    height: 130px;
    background: url(../img/bg_header_bus-sp.png) no-repeat right top/contain;
  }
}
.header-title {
  margin: 0 0 0.4em;
  padding: 40px 0 20px;
  font-size: 1.73em;
  line-height: 1.3;
  position: relative;
}
@media print, screen and (min-width: 1081px) {
  .header-title {
    padding-top: 90px;
    font-size: 2.22em;
  }
}
.header-lead {
  padding-right: 30%;
}
@media screen and (max-width: 767px) {
  .header-lead {
    padding-right: 0;
  }
}

/* 実証運行ルート
------------------------------ */
@media screen and (max-width: 767px) {
  .routemap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.routemap img {
  width: 100%;
  max-width: 1080px;
}
@media screen and (max-width: 767px) {
  .routemap img {
    width: 864px;
  }
}

/* 時刻表・お知らせ
------------------------------ */
.information {
  display: flex;
  flex-direction: column;
  gap: var(--content-margin-wide);
}

.timetable-wrap {
  flex-basis: 51.85%;
  overflow: hidden;
}

.timetable {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
@media screen and (max-width: 767px) {
  .timetable {
    width: 800px;
  }
}
.timetable:not(:first-of-type) {
  margin-top: 10px;
}
.timetable-title {
  margin: 20px auto 10px;
  font-size: 1.29em;
}
@media print, screen and (min-width: 1081px) {
  .timetable-title {
    font-size: 1.38em;
  }
}
.timetable caption {
  display: none;
}
.timetable th, .timetable td {
  padding: 0.4em 0;
  border: 1px solid var(--table-bordercolor);
  font-size: 1em;
}
@media print, screen and (min-width: 1081px) {
  .timetable th, .timetable td {
    font-size: 0.94em;
  }
}
.timetable th {
  font-weight: bold;
  background-color: var(--table-th-background);
}
.timetable th.downbound, .timetable th.upbound, .timetable th.dep, .timetable th.arr {
  color: #ffffff;
}
.timetable th.downbound, .timetable th.upbound {
  width: 46px;
  font-size: 1.07em;
}
@media print, screen and (min-width: 1081px) {
  .timetable th.downbound, .timetable th.upbound {
    width: 58px;
    font-size: 1em;
  }
}
.timetable th.downbound {
  background-color: #00afec;
  color: #000;
}
.timetable th.upbound {
  background-color: #378640;
}
.timetable th.dep, .timetable th.arr {
  font-size: 0.93em;
}
@media print, screen and (min-width: 1081px) {
  .timetable th.dep, .timetable th.arr {
    font-size: 0.88em;
  }
}
.timetable th.dep {
  background-color: #534033;
}
.timetable th.arr {
  background-color: #857266;
}
.timetable .none {
  background-color: #e1e1e1;
}

.sns-wrap {
  flex-basis: 44.44%;
}

.sns-content {
  text-align: center;
}

/* 実証運行期間
------------------------------ */
.calendar-notes {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86em;
}
@media print, screen and (min-width: 1081px) {
  .calendar-notes {
    justify-content: flex-end;
    margin-top: -1em;
    font-size: 0.88em;
  }
}
.calendar-notes::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #b9edff;
  border-radius: 50%;
  color-scheme: only light; /* ダークモード回避 */
}
@media print, screen and (min-width: 1081px) {
  .calendar-notes::before {
    width: 20px;
    height: 20px;
  }
}

.table-scroll:has(.calendar-image) {
  background-color: #ffffff;
  color-scheme: only light; /* ダークモード回避 */
}

.calendar-image > img {
  max-width: 1180px;
}
@media print {
  .calendar-image > img {
    width: 100%;
  }
}

/* 各停留所
------------------------------ */
.stops-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px 1.85%;
}
@media screen and (max-width: 767px) {
  .stops-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}
.stops-list_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  grid-template-areas: "image" "name" "text";
}
@media screen and (max-width: 767px) {
  .stops-list_item {
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto;
    gap: 0px 15px;
    grid-auto-flow: row;
    grid-template-areas: "image name" "image text";
  }
}

.stops-name {
  grid-area: name;
  margin: 0.6em 0 0.2em;
  font-size: 1.13em;
}
@media screen and (max-width: 767px) {
  .stops-name {
    place-self: self-end self-start;
    margin: 0 0 0.2em;
    font-size: 1.07em;
  }
}
.stops-text {
  grid-area: text;
  font-size: 0.93em;
}
@media print, screen and (min-width: 1081px) {
  .stops-text {
    font-size: 0.88em;
  }
}
.stops-image {
  grid-area: image;
}
@media screen and (max-width: 767px) {
  .stops-image > img {
    width: 41.02vw;
  }
}

/* 車両紹介
------------------------------ */
.vehicle-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 2.77%;
}
@media screen and (max-width: 767px) {
  .vehicle-list {
    grid-template-columns: 1fr;
  }
}
.vehicle-list_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}

.vehicle-title {
  order: 2;
  margin: 1em 0 0.6em;
  font-size: 1.14em;
}
@media print, screen and (min-width: 1081px) {
  .vehicle-title {
    font-size: 1.25em;
  }
}
.vehicle-title ._small {
  font-size: 0.8em;
}
.vehicle-text {
  order: 3;
}
.vehicle-image {
  order: 1;
}

/* 注意事項
------------------------------ */
.notes-list {
  padding: 30px 15px;
  background-color: #ddd9d6;
  font-size: 0.93em;
}
@media print, screen and (min-width: 1081px) {
  .notes-list {
    padding: 30px;
    font-size: 0.94em;
  }
}
.notes-list_item {
  text-indent: -1em;
  padding-left: 1em;
}
.notes-list_item::before {
  content: "※";
}
.notes-list_item:not(:first-of-type) {
  margin-top: 0.6em;
}

/* リンク
------------------------------ */
.links {
  margin: var(--content-margin-normal) auto 10px;
}
@media screen and (max-width: 767px) {
  .links {
    padding: 0 20px;
  }
}
@media print {
  .links {
    margin-bottom: var(--content-margin-normal);
  }
}

.link-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 2.77%;
}
.link-list_item {
  min-height: 90px;
}
.link-list_item > a {
  display: grid;
  place-items: center;
  height: calc(100% - 12px);
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid #d5d5d5;
  opacity: 1;
  transition: 0.3s;
  color-scheme: only light; /* ダークモード回避 */
}
.link-list_item > a > img {
  width: 100%;
  max-width: 300px;
}
.link-list_item > a[target=_blank] {
  position: relative;
}
.link-list_item > a[target=_blank]::after {
  content: "";
  width: 13px;
  height: 13px;
  background-color: #d5d5d5;
  -webkit-mask: url(../img/icon_blank.svg) no-repeat center/contain;
          mask: url(../img/icon_blank.svg) no-repeat center/contain;
  position: absolute;
  right: 5px;
  bottom: 5px;
  transition: 0.3s;
}
.link-list_item > a:hover {
  opacity: 0.6;
  border-color: #333333;
}
.link-list_item > a:hover::after {
  background-color: #333333;
}

/* 追従ボタン
------------------------------ */
.floating-nav {
  position: sticky;
  bottom: 0;
  z-index: 999;
  pointer-events: none;
}
.floating-nav > * {
  pointer-events: auto;
}
@media print {
  .floating-nav {
    display: none;
  }
}

/* 申込ボタン
------------------------------ */
.apply {
  display: grid;
  place-items: center;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
}
@media print, screen and (min-width: 1081px) {
  .apply {
    padding: 30px;
  }
}
.apply-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 54px;
  padding: 8px 4em;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  background-color: #378640;
  border-radius: 50vw;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: 0.3s background;
}
@media print, screen and (min-width: 1081px) {
  .apply-btn {
    min-height: 84px;
    padding: 8px 6.8em;
  }
}
@media screen and (max-width: 767px) {
  .apply-btn {
    padding: 8px 2.4em;
    transform: translateX(-40px);
  }
}
.apply-btn ._sub {
  font-size: 0.79em;
}
@media print, screen and (min-width: 1081px) {
  .apply-btn ._sub {
    font-size: 1em;
  }
}
.apply-btn ._main {
  margin-top: 0.6em;
  font-size: 1.07em;
}
@media print, screen and (min-width: 1081px) {
  .apply-btn ._main {
    font-size: 1.38em;
  }
}
.apply-btn::after {
  content: "";
  width: 11px;
  height: 11px;
  background-color: #ffffff;
  -webkit-mask: url(../img/icon_blank.svg) no-repeat center/contain;
          mask: url(../img/icon_blank.svg) no-repeat center/contain;
  position: absolute;
  right: 18px;
  top: 0;
  bottom: 0;
  margin: auto;
  color-scheme: only light; /* ダークモード回避 */
}
@media print, screen and (min-width: 1081px) {
  .apply-btn::after {
    width: 15px;
    height: 15px;
    right: 40px;
  }
}
@media screen and (max-width: 767px) {
  .apply-btn::after {
    right: 14px;
  }
}
.apply-btn:hover {
  text-decoration: underline;
  background-color: rgb(43.126984127, 105.073015873, 50.1841269841);
}

/* ページトップボタン
------------------------------ */
#pagetop {
  display: inline-grid;
  min-width: 180px;
  min-height: 55px;
  font-size: 1em;
  text-align: center;
  line-height: 1.2;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  #pagetop {
    min-width: 80px;
    min-height: 60px;
    font-size: 0.71em;
  }
}
#pagetop.is-show {
  opacity: 1;
  visibility: visible;
}
#pagetop .pagetop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: calc(100% - 0.4em);
  padding: 0.2em 1.4em;
  text-align: center;
  color: #ffffff;
  background: #534033;
  background: linear-gradient(135deg, #896d5a, #534033 50%) #534033;
  text-decoration: none;
  position: relative;
}
@media screen and (max-width: 767px) {
  #pagetop .pagetop-btn {
    flex-direction: column;
    gap: 4px;
    padding: 0.2em;
  }
}
#pagetop .pagetop-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  -webkit-mask: url(../img/icon_pagetop.svg) no-repeat center/contain;
          mask: url(../img/icon_pagetop.svg) no-repeat center/contain;
  transition: 0.3s;
  color-scheme: only light; /* ダークモード回避 */
}
@media screen and (max-width: 767px) {
  #pagetop .pagetop-btn::before {
    width: 12px;
    height: 12px;
  }
}
#pagetop .pagetop-btn:hover {
  text-decoration: underline;
}
#pagetop .pagetop-btn:hover::before {
  transform: translateY(-5px);
}

/* フッター
------------------------------ */
footer {
  padding: 30px 10px;
  border-top: 1px solid var(--table-bordercolor);
}
@media print, screen and (min-width: 1081px) {
  footer {
    padding: 30px;
  }
}
footer .copyright {
  margin: 0;
  font-size: 0.79em;
  text-align: center;
}
@media print, screen and (min-width: 1081px) {
  footer .copyright {
    font-size: 0.88em;
  }
}/*# sourceMappingURL=style.css.map */