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

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

　   webフォント

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

/*Noto Serif Japanese*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&display=swap");

/*EB Garamond*/
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,500;1,500&display=swap");

/*Jost*/
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

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

　   全体

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

html {
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: 100%;
}

body {
  color: #40210f;
  font-family: Helvetica, Arial, Verdana, "Hiragino Kaku Gothic Pro",
    "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "游ゴシック Medium",
    "Yu Gothic Medium", "游ゴシック体", YuGothic, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  width: 100%;
  padding: 0;
}
@media only screen and (max-width: 767px) {
  body {
    font-size: 15.5px;
  }
}
@media only screen and (max-width: 520px) {
  body {
    font-size: 15px;
  }
}
@media only screen and (max-width: 320px) {
  body {
    font-size: 14px;
  }
}

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

　   パーツ

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

/*　PC・タブレットで非表示、スマホで表示　*/
.pc_hidden {
  display: none;
}
@media only screen and (max-width: 767px) {
  .pc_hidden {
    display: block !important;
  }
}
.pc_hidden520 {
  display: none;
}
@media only screen and (max-width: 520px) {
  .pc_hidden520 {
    display: block !important;
  }
}
.pc_hidden480 {
  display: none;
}
@media only screen and (max-width: 480px) {
  .pc_hidden480 {
    display: block !important;
  }
}

/*　スマホで非表示、PC・タブレットで表示　*/
.sp_hidden {
  display: block;
}
@media only screen and (max-width: 767px) {
  .sp_hidden {
    display: none !important;
  }
}
.sp_hidden520 {
  display: block;
}
@media only screen and (max-width: 520px) {
  .sp_hidden520 {
    display: none !important;
  }
}
.sp_hidden480 {
  display: block;
}
@media only screen and (max-width: 480px) {
  .sp_hidden480 {
    display: none !important;
  }
}

/*　回りこみ解除　*/
.clear {
  clear: both;
  float: none;
}
.clear::after {
  content: " ";
  display: block;
  clear: both;
}

/*PCでのtel:無効に*/
[href^="tel"] {
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  [href^="tel"] {
    pointer-events: auto;
  }
}

/*--リンク--*/
a {
  color: #007bff;
  text-decoration: underline;
  transition: 0.3s;
}
a:hover {
  opacity: 0.7;
}

/*--フォント サイズ--*/
.tiny {
  font-size: 0.7em;
}

/*--フォント 色指定--*/
.ft_red {
  color: #c30d23;
}

/*--フォント 指定--*/
/*明朝*/
.ft_mc {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
/*英字*/
.ft_en {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

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

　   wrapper

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

.wrapper {
  overflow: hidden;
  background-color: #ffffc0;
}

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

　   header

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

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

サイトタイトル

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

/*--全体--*/
header#header {
  /* ドット柄
   background-color: #008f45;

  background-image: radial-gradient(
      circle at 10px 10px,
      #ffd700 2px,
      transparent 0
    ),
    radial-gradient(circle at 30px 30px, #ffd700 2px, transparent 0);

  background-size: 40px 40px;

  background-repeat: repeat; */

  /* 市松模様 */
  margin: 0;
  width: 100vw;
  height: 99.2px;
  background-color: #008f45;
  background-image: linear-gradient(45deg, #00964a 25%, transparent 25%),
    linear-gradient(-45deg, #00964a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #00964a 75%),
    linear-gradient(-45deg, transparent 75%, #00964a 75%);
  background-size: 5vw 5vw;
  background-position: 0 0, 0 2.5vw, 2.5vw -2.5vw, -2.5vw 0;
}

/*テキスト囲み*/
.site_title {
  padding: 22px 0;
}

/*日本語「新高岡駅周辺駐車場」*/
.site_title__jp {
  color: #ffffff;
  font-size: 2.4em;
  margin-bottom: 4px;
}

/*英字「Parking lots around Shin-Takaoka」*/
.site_title__en {
  /* color: #c79f62; */
  color: #ffffff;
  font-size: 0.8em;
  letter-spacing: 1px;
}

@media only screen and (max-width: 767px) {
  /*--全体--*/
  header#header {
    background-size: 140%;
  }
  /*テキスト囲み*/
  .site_title {
    padding: 20px 0;
  }
  /*日本語「新高岡駅周辺駐車場」*/
  .site_title__jp {
    font-size: 2em;
  }
  /*英字「Parking lots around Shin-Takaoka」*/
  .site_title__en {
    font-size: 0.7em;
  }
}
@media only screen and (max-width: 520px) {
  /*テキスト囲み*/
  .site_title {
    padding: 14px 0 11px 0;
  }
  /*日本語「新高岡駅周辺駐車場」*/
  .site_title__jp {
    font-size: 1.25em;
    margin-bottom: 0;
    line-height: 100%;
  }
  /*英字「Parking lots around Shin-Takaoka」*/
  .site_title__en {
    font-size: 0.55em;
  }
}

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

　   main

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

main#main {
}

.container {
  width: 94%;
  max-width: 800px;
  margin: 0 auto;
}
@media only screen and (max-width: 520px) {
  .container {
    width: 94%;
  }
}

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

ページタイトル

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

/*--全体--*/
.page_title__wrap {
  /* background: #ffffff url("../img/page_title__bg.jpg") no-repeat center right; */
  background: #ffffff;
  background-size: contain;
  padding: 55px 0;
}

/*タイトル「駐車場の利用状況」*/
.page_title {
  font-size: 2em;
}
@media only screen and (max-width: 767px) {
  /*--全体--*/
  .page_title__wrap {
    padding: 55px 0;
  }
  /*タイトル「駐車場の利用状況」*/
  .page_title {
    font-size: 1.8em;
  }
}
@media only screen and (max-width: 520px) {
  /*--全体--*/
  .page_title__wrap {
    padding: 38px 0;
  }
  /*タイトル「駐車場の利用状況」*/
  .page_title {
    font-size: 1.4em;
  }
}
@media only screen and (max-width: 320px) {
  /*--全体--*/
  .page_title__wrap {
    padding: 30px 0;
  }
}

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

現在の日時

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

/*--全体--*/
.time__wrap {
  font-size: 1em;
  margin: 23px 0;
}
/*時計アイコン*/
.time__wrap .far {
  color: #b28146;
}
@media only screen and (max-width: 520px) {
  /*--全体--*/
  .time__wrap {
    font-size: 0.85em;
    margin: 15px 0;
  }
}

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

コンテンツ（一覧表・マップ）

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

.cont__bg_white {
  background: #ffffff;
  box-shadow: 0px 0px 2px 0px rgba(209, 177, 134, 0.5);
  max-width: 850px;
  width: 94%;
  margin: 0 auto;
  padding-top: 23px;
  padding-bottom: 23px;
}
@media only screen and (max-width: 520px) {
  .cont__bg_white {
    width: 96%;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

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

テーブル 全体囲み

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

.parking_Status__section {
}

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

一覧表テーブル

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

.tbl_list {
  width: 100%;
}

.tbl_list tr {
}

.tbl_list th,
.tbl_list td {
}

.tbl_list th {
  background: #008f45;
  color: #fff;
  font-size: 1em;
  font-weight: normal;
  text-align: center;
  padding: 12px 0;
}

.tbl_list td {
  border-bottom: solid 1px #e3d1bf;
  font-size: 1.3em;
  padding: 14px 0;
  text-align: center;
  vertical-align: middle;
}
.tbl_list td:first-child {
  text-align: left;
  padding: 14px 0 14px 2.5%;
}

.tbl_list tr:last-of-type td {
  border-bottom: solid 1px #008f45;
}

/*----見出し----*/

/*駐車場名*/
.tbl_list__name {
}

/*総台数*/
.tbl_list__total {
  width: 10%;
}

/*満・空*/
.tbl_list__status {
  width: 15%;
}

/*空き台数*/
.tbl_list__current {
  width: 18%;
}

/*----駐車場名----*/

.tbl_list__name_upper {
  font-size: 0.7em;
  margin-bottom: 3px;
}
.tbl_list__name_lower {
}

/*----満車時の表示----*/

/*背景 ピンク表示*/
.alert {
  background: #fdf1f0;
}
/*「空車」非表示*/
.alert .status span {
  display: none;
}
/*「満車」表示*/
.alert .status::after {
  display: block;
  content: "満車";
  background: #c30d23;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 8px 12px;
}
/*台数 赤表示*/
.alert td:last-child {
  color: #c30d23;
}

/*----空き台数----*/

/*数字*/
.tbl_list .num {
  font-size: 1.4em;
  font-weight: 700;
  font-style: normal;
}

/*台*/
.tbl_list .unit {
  font-size: 0.9em;
  font-weight: 700;
  font-style: normal;
}

@media only screen and (max-width: 767px) {
  .tbl_list th {
    font-size: 0.9em;
    padding: 8px 0 7px 0;
  }
  .tbl_list td {
    font-size: 1.2em;
    padding: 12px 0;
  }
  .tbl_list td:first-child {
    padding: 12px 0 12px 1.5%;
  }

  /*総台数*/
  .tbl_list__total {
    width: 20%;
  }
  /*満・空*/
  .tbl_list__status {
    width: 20%;
  }
}
@media only screen and (max-width: 520px) {
  .tbl_list th {
    font-size: 0.85em;
    padding: 7px 0;
  }
  .tbl_list td {
    font-size: 1em;
    padding: 11px 0;
  }
  .tbl_list td:first-child {
    padding: 11px 0 11px 1.5%;
  }
  /*----空き台数----*/
  /*数字*/
  .tbl_list .num {
    font-size: 1.2em;
  }
}
@media only screen and (max-width: 360px) {
  .tbl_list th {
    font-size: 0.8em;
    padding: 6px 1%;
  }
  .tbl_list td {
    padding: 10px 1%;
  }
  /*----空き台数----*/
  /*数字*/
  .tbl_list .num {
    font-size: 1.1em;
  }
}

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

イラストマップ 

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

/*--全体--*/
.parking_Map__section {
}

/*--マップ--*/
.parking_Map {
  position: relative;
  width: 100%;
  margin: 4% auto 0 auto;
}
.parking_Map img {
  width: 100%;
}

/*--ふきだし--*/
.arrow_box {
  position: absolute;
  height: auto;
  background: #0078bd;
  padding: 1.5% 2% 1.2% 2%;
  text-align: center;
  color: #ffffff;
  font-size: clamp(100%, 4vw, 200%);
  font-weight: 700;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: 2px 2px 5px 0px rgba(97, 57, 29, 0.5);
}
/* ふきだし線 */
.arrow_box::after {
  content: "";
  position: absolute;
  transform-origin: top left;
  width: clamp(0.5px, 0.4vw, 3px);
  background-color: #0078bd;
}
/*駐車場名*/
.arrow_box p {
  font-size: 40%;
  margin-bottom: 1%;
}
.arrow_box span::after {
  content: "台空き";
  font-size: 80%;
}

/*満車ふきだし表示*/
.full__sign {
  background: #c30d23;
}
.full__sign:after {
  border-top-color: #c30d23;
}
.arrow_box.full__sign span::after {
  content: "満車";
  /*font-size: 90%;*/
}
.arrow_box.full__sign::after {
  background-color: #c30d23; /* 満車時の線の色 */
}

/*ふきだし個別　位置調整*/
.arrow_box.t01 {
  left: 10%;
  top: 90%;
}
.arrow_box.t01::after {
  top: -35%;
  left: 90%;
  transform: rotate(45deg);
  height: clamp(1px, 4vw, 30px);
}
.arrow_box.t02 {
  left: 60%;
  top: 90%;
}
.arrow_box.t02::after {
  top: -15%;
  left: -25%;
  transform: rotate(-50deg);

  height: clamp(1px, 6vw, 50px);
}
.arrow_box.t03 {
  left: 75%;
  top: 75%;
}
.arrow_box.t03::after {
  top: -20%;
  left: -35%;
  transform: rotate(-60deg);
  height: clamp(1px, 8vw, 60px);
}
.arrow_box.t04 {
  left: 10%;
  top: 1.5%;
}
.arrow_box.t04::after {
  top: 95%;
  left: 80%;
  transform: rotate(-35deg);
  height: clamp(1px, 3vw, 25px);
}
.arrow_box.t05 {
  left: 28%;
  top: 58%;
}
.arrow_box.t05::after {
  top: 70%;
  left: 0%;
  transform: rotate(75deg);
  height: clamp(1px, 4vw, 40px);
}
.arrow_box.t06 {
  left: 77%;
  top: 22%;
}
.arrow_box.t06::after {
  top: 100%;
  left: 40%;
  transform: rotate(0deg);
  height: clamp(1px, 16vw, 155px);
}
.arrow_box.t07 {
  left: 6%;
  top: 15%;
}
.arrow_box.t07::after {
  top: 90%;
  left: 45%;
  transform: rotate(-15deg);
  height: clamp(1px, 11vw, 100px);
}
/* 満車時 ふきだし線 */
.arrow_box.t02.full__sign::after {
  top: -15%;
  left: -25%;
  transform: rotate(-50deg);
  height: clamp(1px, 4vw, 50px);
}
.arrow_box.t03.full__sign::after {
  top: -20%;
  left: -35%;
  transform: rotate(-60deg);
  height: clamp(1px, 5vw, 40px);
}
.arrow_box.t04.full__sign::after {
  top: 95%;
  left: 80%;
  transform: rotate(-45deg);
  height: clamp(1px, 6vw, 50px);
}
/* ---------------------------------------------------------------------------------------------

　   footer

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

footer#footer {
}

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

コピーライト

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

.cpright {
  font-size: 0.8em;
  text-align: center;
  margin: 30px 0;
}