@charset "utf-8";

/* 全体共通 ******************************************************************************************************** */
body{
  font-family:"HG丸ｺﾞｼｯｸM-PRO","ヒラギノ丸ゴ Pro";
  background-color: rgb(255, 247, 255);
}

h1{
  padding: 0px;
  vertical-align : middle;
  display: inline;
}

h2{
  text-align: center;
}

#map {
  width: 60%;
  height: 700px;
  margin-left: 20px;
  margin-bottom: 20px;
}

#result-map {
  width: 60%;
  height: 700px;
  background-color: grey;
  margin-left: 20px;
  margin-bottom: 20px;
}

/* 一覧部 */
.map-list-flex{
  display: flex;
}

/* 医療機関一覧 */
.scroll-list{
  padding-left: 15px;
  overflow-x: hidden;
  overflow-y: visible;
  width: 40%;
  height: 600px;
  cursor: pointer;
  margin-right: 10px;
}

/* 医療機関一覧のタイトル */
.list-element-title{
  font-size: 20px;
  font-weight: bold;
}

/* 医療機関一覧の各行 */
.list-element{
  position:relative;
  display:block;
  padding:10px 15px;
  border:1px solid #ddd;
  background-color: white;

}
/* 医療機関一覧の各行マウスオーバー時 */
.list-element:hover{
  background-color: rgb(250, 224, 224);
}
/* ページ先頭に戻る用 */
html {
  scroll-behavior: smooth;
}
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.pagetop2 {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(20%) rotate(-45deg);
}
.pagetop__arrow2 {
  height: 10px;
  width: 10px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(20%) rotate(-45deg);
}

/* ローダー用 */
 .pink .loader {
  margin: 2.4em auto;
  font-size: 10px;
  position: relative;
  top: 50px;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(253, 194, 243, 0.774);
  border-right: 1.1em solid rgba(253, 194, 243, 0.774);
  border-bottom: 1.1em solid rgba(253, 194, 243, 0.774);
  border-left: 1.1em solid #EE64CA;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.pink .loader,
.pink .loader:after {
  border-radius: 50%;
  width: 6em;    /* アイコンの幅*/
  height: 6em;  /* アイコンの高さ */
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0　deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ここまで、全体共通 */


/* ヘッダー部 ****************************************************************************************************** */
/* ヘッダー */
header{
  border-bottom: 3px solid hsl(0, 0%, 69%);
}

/* ヘッダーボタンエリア */
.header-button-area{
  display: flex;
  align-items: center;
}

/* 「トップ画面に戻る」ボタン */
.header-button{
  margin: 10px;
  background-color: rgb(238, 100, 202);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 30px;
  border: none;
  cursor: pointer;
  /* 角丸の指定 */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* 「トップ画面に戻る」ボタンマウスオーバー時 */
.header-button:hover{
  background-color: rgb(236, 78, 195);
}

/* 「トップ画面に戻る」ボタン */
.header-button2{
  margin: 10px;
  background-color: rgb(93, 185, 90);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 50px;
  border: none;
  cursor: pointer;
  /* 角丸の指定 */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* 「トップ画面に戻る」ボタンマウスオーバー時 */
.header-button2:hover{
  background-color: rgb(77, 153, 62);
}

/* 「前の画面に戻る」ボタン */
.back-button{
  margin: 10px;
  background-color: rgb(238, 100, 202);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 30px;
  border: none;
  cursor: pointer;
  /* 角丸の指定 */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* 「前の画面に戻る」ボタンマウスオーバー時 */
.back-button:hover{
  background-color: rgb(236, 78, 195);
}

/* 「マップ/リスト表示」リンク */
.map-list-handler{
  font-size:15px;
  font-weight:bold;
  text-decoration: underline;
  color: deepskyblue;
  margin: 0 0 0 auto;
  text-align: right;
  display: flex;
}
/* 「マップ/リスト表示」リンクマウスオーバー時 */
.map-list-handler:hover{
  text-decoration: underline;
}

/* マップ/リスト表示後CSS */
.block{
  display: block !important;
  width: 100% !important;
}
.none{
  display: none !important;
}
.none-center{
  display: none !important;
}
.none-accordion-list{
  display: none !important;
}
.none-h2{
  display: block !important;
}
.none-h1{
  display: none !important;
}
/* ここまで、ヘッダー部 */


/* トップ画面 ****************************************************************************************************** */
/* 全体 */
.top-body {
  padding: 10px;
  font-size: 20px;
}
/* 「近くの病院をさがす」ボタン */
.top-button{
  margin: 10px;
  background-color: rgb(238, 100, 202);
  color: #fff;
  font-size: 33px;
  font-weight: bold;
  padding: 3px 121px;
  border: none;
  cursor: pointer;
  /* 角丸の指定 */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* 「近くの病院をさがす」ボタンマウスオーバー時 */
.top-button:hover{
  background-color: rgb(236, 78, 195);
}

/* 「曜日・時間・場所から病院をさがす」ボタン */
.top-button2{
  margin: 10px;
  background-color: rgb(146, 208, 80);
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  padding: 5px 30px;
  border: none;
  cursor: pointer;
  /* 角丸の指定 */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* 「曜日・時間・場所から病院をさがす」ボタンマウスオーバー時 */
.top-button2:hover{
  background-color: rgb(126, 194, 52);
}
/* ここまで、トップ画面 */


/* 詳細検索画面 **************************************************************************************************** */
/* 検索条件エリアの表 */
.contact-table {
  width: 100%;
  font-weight: bold;
  padding-top: 5px;
  padding-left:10px;
  padding-right: 10px;
}
/* 検索条件エリアの列タイトル */
.contact-item {
  text-align: center; /* テキスト左寄せ */
  width: 30%; /* 横幅30%指定（グレーの背景色部分） */
  background-color: #c5e0b4; /* 薄い緑の背景色 */
  color:black;
  padding: 20px;
  border: 1px solid #ccc;
}
/* 検索条件エリアの列内容 */
.contact-body {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: white; /* 背景色 */
  width: 70%; /* 横幅70%指定（白背景色部分） */
}
/* 「キーワード」テキストボックス */
.keyword-text {
  width: 50%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  max-width: 600px;
}
/* 「病院の名前」テキストボックス */
.hospital-text {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  max-width: 600px;
}

/* 「区市町村選択」プルダウン*/
.select-area{
  width:150px;
  font-size:18px;
}

/* 「時間選択」プルダウン */
.select-time{
  font-size:18px;
}

/* 「条件を削除」「この条件で探す」ボタンエリア */
.button-center{
  display: flex;
  justify-content: center;
}

/* 「条件を削除」ボタン */
.reset-button{
  margin: 10px;
  background-color: rgb(255, 255, 255);
  color: black;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 50px;
  border: solid #999999 1px;
  cursor: pointer;
  /* 角丸の指定 */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* 「条件を削除」ボタンマウスオーバー時 */
.reset-button:hover{
  background-color: rgb(233, 233, 233);
}

/* 「このキーワードで探す」「この条件で探す」ボタン */
.conditional-search{
  margin: 10px;
  background-color: rgb(93, 185, 90);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  padding: 5px 50px;
  border: none;
  cursor: pointer;
  /* 角丸の指定 */
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
/* 「このキーワードで探す」「この条件で探す」ボタンマウスオーバー時 */
.conditional-search:hover{
  background-color: rgb(77, 153, 62);
}

/* 検索条件エリアの表 */
.condition-area{
  width: 80%;
}
/* ここまで、詳細検索画面 */


/* 医療機関情報参照画面 ********************************************************************************************* */
/* 医療機関情報 */
.result-table {
  width: 100%;
  height:45%;
  padding: 0px 15px;
  color:black;
  font-size: 18px;
}

/* 医療機関情報の列タイトル */
.result-item {
  text-align: center; /* テキスト左寄せ */
  width: 20%; /* 横幅30%指定（薄いピンクの背景色部分） */
  background-color: rgb(252, 224, 245); /* 薄いピンクの背景色 */
  color:black;
  padding: 20px;
  border: 1px solid #ccc;
  font-size: 13px;
  white-space: nowrap;
}

/* 医療機関情報の列内容 */
.result-body {
  width: 80%; /* 横幅70%指定（白背景色部分） */
  padding: 10px;
  border: 1px solid #ccc;
}

/* 病院の名前 */
.hospital-name{
  color:black;
  font-size: 20px;
  font-weight: bold;
}

/* 医療機関一覧 */
.result-list{
  height: 100%;
  width: 95%;
  cursor: pointer;
  margin: auto;
}

/* 医療機関一覧の各行 */
.result-element{
  position:relative;
  display:block;
  padding:10px 15px;
  border:1px solid #ddd;
  background-color: white;
}
/* 医療機関一覧の各行マウスオーバー時 */
.result-element:hover{
  background-color: rgb(250, 224, 224);
}

/* 医療機関一覧のタイトル */
.result-element-title{
  font-size: 20px;
  font-weight: bold;
}

/* 検索件数 */
.near-title{
  font-weight: bold;
  font-size: 25px;
  color:black;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
}

/* 右半分エリアのサイズ */
.screen-right-scroll{
  overflow: scroll;
  height: 800px;
  width: 40%;
}

/* 画面スクロール解除設定用 */
.no_scroll{
  overflow: hidden;
}

/* ローダー用 */
.green .loader {
  margin: 2.4em auto;
  font-size: 10px;
  position: relative;
  top: 50px;
  text-indent: -9999em;
  border-top: 1.1em solid #c5e0b4;
  border-right: 1.1em solid #c5e0b4;
  border-bottom: 1.1em solid #c5e0b4;
  border-left: 1.1em solid rgb(93, 185, 90);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.green .loader,
.green .loader:after {
  border-radius: 50%;
  width: 6em;    /* アイコンの幅*/
  height: 6em;  /* アイコンの高さ */
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0　deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* マップアプリボタン */
.google-map-link-button {
  position: absolute;
  top: 0%;
  right: 0%;
  z-index: 1000; /* 地図上に重ねるためのz-index */
}

.google-map-link-button,
.google-map-link-button-right {
  color: #fff;
  background-color: #EE64CA;
  font-size: 15px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin-top: 55px;
  margin-right: 9px;
  text-decoration: none;
  font-family: Arial;
  text-align: center;
}

.google-map-link-button:hover,
.google-map-link-button-right:hover{
  background-color: rgb(236, 78, 195);
}

.ios-map-link-button {
  position: absolute;
  top: 0%;
  right: 0%;
  z-index: 1000; /* 地図上に重ねるためのz-index */
}

.ios-map-link-button,
.ios-map-link-button-right {
  color: #fff;
  background-color: #EE64CA;
  font-size: 15px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin-top: 92px;
  margin-right: 9px;
  text-decoration: none;
  font-family: Arial;
  text-align: center;
  width: 142px;
}

.ios-map-link-button:hover,
.ios-map-link-button-right:hover{
  background-color: rgb(236, 78, 195);
}

.right-map-button {
  margin-top: 5px; /* ボタン間のマージンを設定 */
}

/* ここまで、医療機関情報参照画面 */


/* レスポンシブ対応用 ********************************************************************************************************************************************************* */
/* PCの場合の優先設定 *********************************************************************************************** */
@media(min-width:789px){
  h1:after {
    display:block;
    content:'';
    clear:both;
  }
  
  /* ヘッダーボタンエリア */
  .header-button-area{
    margin: 0;
    float: right;
  }

  /* マップ/リスト非表示 */
  .map-list-handler{
    display:none;
  }

  /* 電話番号リンク解除 */
  a[href*="tel:"]{
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: black;
  }

  /* スマートフォン専用の改行の無効化 */
  .br-sp {
    display: none;
  }

  /* ページ先頭に戻る用 */
  .pagetop {
    display: none;
  }  
}
/* iosタブレットの場合の優先設定 ************************************************************************************ */
@media (max-width:915px) {
  .screen-right-scroll{
    overflow-y: auto; /* 縦スクロール */
    overflow-x: hidden; /* 横スクロールを非表示 */
    max-width: 100%; /* 画面幅を超えないように最大幅を設定 */
    width: 410px;
  }
  /* 画面右側テーブル幅調整 */
  .result-table {
    padding: 0px 8px 0px 5px;
  }
  /* 病院項目幅調整 */
  .result-item {
    padding: 0px;
  }
}
/* スマートフォンの場合の優先設定 ************************************************************************************ */
@media(max-width:788px){
  /* 全体共通 ****************************************** */
  /* ヘッダー部のサイズ */
  h1{
    padding: 0px !important;
    font-size: 15px;
  }

  /* 検索結果のサイズと非表示化 */
  h2{
    white-space: nowrap !important;
    font-size: 20px !important;
    display: none;
  }

  /* マップの余白と表示化 */
  #map{
    width: 100%;
    margin-left: 0px;
    margin-bottom: 0px;
    display: block;
  }
  /* マップの余白と表示化(参照画面) */
  #result-map{
    width: 100%;
    margin-left: 0px;
    margin-bottom: 0px;
    display: none;
  }

  /* 一覧部のサイズと非表示化 */
  div.scroll-list{
    width: 100% ;
    padding-left: 0px ;
    display: none;
    overflow: visible;
  }

  /* 医療機関一覧のタイトルのサイズ */
  div.list-element-title{
    font-size: 16px;
  }

  /* 「トップ画面に戻る」ボタンのサイズ */
  .header-button{
    font-size: 15px !important;
    padding:5px 15px !important;
  }

  /* 「トップ画面に戻る」ボタンのサイズ */
  .header-button2{
    font-size: 15px !important;
    padding:5px 15px !important;
  }

  /* 「前の画面に戻る」ボタンのサイズ */
  .back-button{
    font-size: 15px !important;
    padding:5px 15px !important;
  }

  /* 「このキーワードで探す」「この条件で探す」ボタンのサイズ */
  .conditional-search{
    font-size: 15px !important;
    padding:5px 15px !important;
  }
  /* 「条件を削除」ボタンのサイズ */
  .reset-button{
    font-size: 15px !important;
    padding:5px 15px !important;
  }

  .no_scroll{
    overflow: auto;
  }

  /* トップ画面 **************************************** */
  /* 余白と文字サイズ */
  td.top-body{
    padding: 7px;
    font-size: 12px;
  }

  /* 「近くの病院をさがす」ボタンのサイズ */
  .top-button{
    font-size: 17px !important;
    padding:5px 74px !important;
  }
  /* 「曜日・時間・場所から病院をさがす」ボタンのサイズ */
  .top-button2{
    font-size: 17px !important;
    padding:5px 15px !important;
  }

  /* 詳細検索画面 ************************************** */
  /* キーワードテキストボックスの横幅拡大 */
  .keyword-text {
    width:100% !important;
  }

  /* 病院の名前のテキストボックスの横幅拡大 */
  .hospital-text {
    width:100% !important;
  }
  
  /* 「区市町村選択」プルダウンの文字サイズ*/
  .select-area{
    font-size: 15px;
  }

  /*「時間選択」プルダウンの文字サイズ*/
  .select-time{
    font-size: 15px;
  }
  
  /* 列タイトルの余白と文字サイズ */
  th.contact-item {
    padding: 2px;
    font-size: 10px;
  }
  /* 列内容の余白と文字サイズ */
  td.contact-body{
    padding: 7px;
    font-size: 12px;
  }

  /* 検索条件エリアの表 */
  .condition-area{
    width: 100%;
  }

   /*「ローダー」ラインの太さ */
   .green .loader {
    border-top: 0.8em solid #c5e0b4;
    border-right: 0.8em solid #c5e0b4;
    border-bottom: 0.8em solid #c5e0b4;
    border-left: 0.8em solid rgb(93, 185, 90);
  }
  /*「ローダー」アイコンのサイズ */
  .green .loader,
  .green .loader:after {
    width: 3em;    /* アイコンの幅*/
    height: 3em;  /* アイコンの高さ */
  }

  /* 医療機関情報参照画面 ******************************* */
  /* 列タイトルの余白と文字サイズ */
  th.result-item {
    padding: 2px;
    font-size: 10px;
  }
  /* 列内容の余白と文字サイズ */
  td.result-body{
    padding: 7px;
    font-size: 15px;
  }

  /* 検索件数の余白とサイズ */
  div.near-title{
    font-size: 17px;
    padding-bottom: 10px;
  }

  /* 医療機関一覧の余白 */
  div.result-list{
    padding-left: 0px ;
  }
  
  /* 医療機関一覧のタイトルのサイズ */
  div.result-element-title{
    font-size: 16px;
  }

  /* 医療機関一覧の内容のサイズ */
  div.result-element-detail{
    font-size: 13px;
  }

  /* 病院の名前のサイズ */
  a.hospital-name{
    font-size: 15px;
  }

  /* 右半分エリアのサイズと非表示化 */
  div.screen-right-scroll{
    overflow: visible;
    width: 100%;
  }

  .google-map-link-button {
    position: absolute;
    top: 0%;
    width: 116px;
    margin-top: 55px;
    margin-right: 10px;
    font-size: 12px;
  }

  .ios-map-link-button {
    position: absolute;
    top: 0%;
    width: 116px;
    margin-top: 90px;
    margin-right: 10px;
    font-size: 12px;
  }

  /*「ローダー」ラインの太さ */
  .pink .loader {
    border-top: 0.8em solid rgba(253, 194, 243, 0.774);
    border-right: 0.8em solid rgba(253, 194, 243, 0.774);
    border-bottom: 0.8em solid rgba(253, 194, 243, 0.774);
    border-left: 0.8em solid #EE64CA;
  }
  /*「ローダー」アイコンのサイズ */
  .pink .loader,
  .pink .loader:after {
    width: 3em;    /* アイコンの幅*/
    height: 3em;  /* アイコンの高さ */
  }
}
/* ここまで、レスポンシブ対応用 */