@charset "utf-8";
/*                                      */
/*  index.html用　スタイル                */
/*                                      */
body {
  margin: 0;
  padding: 0;
}
img {
  border: 0;
}
.logo {
  float: left;
  margin-top: 1%;
  width: 50%;
  margin-left: 5%;
  min-width: 20%;
  max-width: 600px;
  margin-bottom: 1%;
}
header, nav {           /* Top page global navigation */
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.headerInner {          /* Top page header */
  width: 100%;
  padding-left: 10%;
}
.button {               /* Top page 検査予約はこちら  */
  border-color: transparent;
  width: 20%;
  min-width: 10%;
  margin-top: 3%;
  margin-left: 30px;
}
.site_header {
  display: flex;
  flex-direction: column;
  padding: 1% 1%;
  text-justify: space-between;
  width: 100%;
}
nav ul {                 /*      navigation       */
  margin: 0;
  padding: 0;
  width: 100%;
}
nav ul li {              /*     for navigation    */
  list-style: none;
  display: inline-block;
  /*  width: 240px;*/
  width: 100%;
  min-width: 90px;
}
a:hover {                /*   text mouse hover    */
  color: lime;
}
/*   mouse hover   */
nav ul img:hover{ 
  filter: hue-rotate(-50deg);
}
.headerInner .logo:hover{ 
  filter: hue-rotate(-50deg);
}
.button:hover{ 
  filter: hue-rotate(-50deg);
}
.footer-logo img:hover{ 
  filter: hue-rotate(-50deg);
}
.link img:hover { 
  filter: hue-rotate(-50deg);
}
.page_header img:hover {  /*   mouse hover   */
  filter: hue-rotate(-50deg);
}
#relative {              /*   text on main visual */
  position: relative;
  display: block;
}
.graphic {               /* for sliding main visuals  */
  width: 100%;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 0.3%;
}
.graphic ul {
  list-style: none;
}
.graphic ul li {
  display: none;
  position: absolute;
}
.graphic ul li.now {
  display: block;
}
.graphic ul li img {
  width:100%;
  margin-left: auto;
  margin-right: auto;
}

#navigation {            /* for navigation button group */
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#abso_menu1 {            /* about the clinic it's self */
  position: absolute;
  left: 10%;
  top: 30px;
  width: 17%;
  max-width: 240px;
}
#abso_menu2 {            /*    explanation of exams    */
  position: absolute;
  left: 27.5%;
  top: 30px;
  width: 17%;
  max-width: 240px;
}
#abso_menu3 {            /* weekly status for reservation */
  position: absolute;
  left: 45%;
  top: 30px;
  width: 17%;
  max-width: 240px;
}
#abso_menu4 {            /*  patiant list for one day    */
  position: absolute;
  left: 62.5%;
  top: 30px;
  width: 17%;
  max-width: 240px;
}
#clinic_text {           /*   人間ドック専門クリニック text  */
  position: absolute;
  width: 100%;
  top:0%;
  left:5%;
  padding-top: 0px;
}
#absolute {
  position: absolute;
  width: 50%;
  left: 18%;
  top: 13%;
}
.slider_group {          /*     visual slider  枠    */
  position: absolute;
  left:1%;
  top:1%;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 150px; padding-top: 13%;
}
.slider {                /*      スライダー            */
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-left: 3%;
  margin-right: auto;
  margin-top:40%;
  margin-bottom: 2%;
}
.slick-prev::before {
  content: '←';
}
.slick-next::before {
  content: '→';
}
.slick-prev::before, .slick-next::before {
  font-family: 'slick';
  font-size: 25px;
  line-height: 1;
  opacity: .75;
  color: #0000ff;
}
.slick-prev {
  left: -25px;
}
.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: #ff0000;
  border: none;
  outline: none;
  background: #ff0000;
}
.section1 {             /*     本院紹介 セクション         */
  padding-top: 1%;
  margin-top: 1%;
}
.img_title {            /*   本院紹介などの画像タイトル      */
  width: 20%;
  margin-top: 2%;
  margin-left: 15%;
  min-width: 180px;
}
.div_contener {         /*      本院紹介文と写真の枠        */
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}
.div1_2_text p {        /*      本院紹介文                 */
  margin-top: 2%;
  width: 200%;
  margin-left:120%;
  color: black;
}
.div1_3_photo {         /*        院長写真                 */
  width: 100%;
  margin-top: -5%; 
  margin-left:  40%;
}
.div2_2_photo img {     /*        検査内容の血液写真         */
  width: 60%;
  margin-top: 2%;
  margin-left: 210px;
}
.div2_3_text p {        /*       検査内容の説明文            */
  color: black;
  width:100%;
  margin-top: 2%;
  margin-left:  15%;
}
.div3_2_text p {         /*       検査料金の説明文            */
  color: black;
  margin-top: 2%;
  margin-left: 220px;
}
.table3_3 {              /*       検査料金表                 */
  margin-top: 2%;
  margin-left: 250px;
  width: 300px;
}
.table3_3 tr td:nth-of-type(1) {  /*  料金表の項目名左寄せ     */
  text-align: left;
}
.table3_3 tr td:nth-of-type(2) {  /*  項目ごとの料金右寄せ     */
  text-align: right;
}
.div3_3_photo img {      /*       料金表の右側の写真           */
  width: 100%;
  margin-top: 2%;
  margin-left: 30%;
}
h3 {
  color: #2e3192;
  margin: 0 auto 20px auto;
}
footer a {               /*    フッター  リンク先の文字色      */
  color: white;
}
footer {                 /*     フッター  枠                 */
  clear: both;
  width: 100%;
  height: 200px;
  background-color: #c56ea9;
  margin: 10px auto 30px auto;
  display: flex;
  flex-direction: row;
}
.footerInner {           /*    フッター内の構成枠             */
  display: flex;
  flex-direction: row;
  width: 1200px;
  /*  width: 100%;*/
  height: 200px;
  float: left;
  margin-left: 170px;
  align-content: space-between;
}
.footer-l {              /*    フッター左側 ロゴとコピーライト   */
  display: flex;
  flex-direction: column;
  width: 300px;
}
.footer-logo {           /*    フッターのロゴ             */
  display: block;
  /* width: 100%;*/
  width: 430px;
  height: 100px;
  margin-top: 30px;
}
.copyright {             /*    フッターのコピーライト       */
  display: block;
  width: 100%;
  margin-left: 120px;
  color: white;
}
.footer-nav-list {       /*   フッター中央部枠             */
  width: 180px;
  display: flex;
  flex-direction: column;
  padding-left: 150px;
}
.footer-nav {            /*   フッター中央部リンク先リスト   */
  width: 180px;
  display: inline;
  margin-top: 30px;
  list-style: none;
  font-size: 24px;
}
.footer-r {              /*   フッター右側枠               */
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-left: 100px;
}
.sec_map {               /* セキュリティポリシーとサイトマップ */
  width: 250px;
  display: flex;
  flex-direction: column;
  font-size: 20px;
}
.link {                   /*   リンク先のロゴの列           */
  width: 250px;
  margin-top: 30px;
  height: auto;
  display: block;
}
/*                                       */
/*    各ページのナビヘッダー                   */
/*                                       */
/* #page_header {  */
.page_header {
  display: flex;
  flex-direction: row;
  width: 1100px;
  margin-left: 1px;
  padding-left: 17%;
  margin-right: auto;
  margin-top: 1px;
  padding-top: 1px;
  position: fixed;
  background-color: white;
}

.page_header img {
  margin-top: 12px;
}
.page_menu {
  width: 1000px;
  display: flex;
  flex-direction: row;
  list-style: none;
}
.page_menu li {
  padding-left: 10px;
}
.page_title {
  width:300px;
  margin-left: 1px;
  padding-left: 300px;
  margin-top: 100px;
  padding-top:200px;
}
/*                                       */
/*      chek_date.html用　スタイルシート    */
/*                                       */
.box_check_date {
  width: 1000px;
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  margin-left: auto;
  margin-right: auto;
}

#page_header_check_date {
  display: flex;
  flex-direction: row;
  width: 1000px;
  margin-left: 1px;
  padding-left: 230px;
  margin-top: -60px;
  position:fixed;
  background-color: white;
}

#page_header_check_date img {
  margin-top: 12px;
}
#explain {
  width: 850px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
  color: black;
}
#joukyou {
  margin-left: 50px;
  margin-bottom: 10px;
}
.enable {
  width: 100px;
  height: 31px;
  float: left;
  margin-left: 220px;
  margin-bottom: 10px;
}
.disable {
  width: 100px;
  height: 31px;
  float: left;
  margin-left: 100px;
  margin-bottom: 10px;
}
#prev_w {
  width: 40px;
  margin-top: 15px;
  margin-right: 10px;
}

#table {
  float: left;
}
#status {
  width: 870px;
  margin-left: auto;
  margin-right: auto;
}
#status th {
  background-color: #bdd7ee;
}
#status td {
  text-align: center;
}
#status td.maru {
  background-color: #ddebf7;
  color: #00b0f0;
}
#status td.maru a {
  color: #00b0f0;
}
#status td.batsu {
  background-color: #ddebf7;
  color: red;
}
#status td.nashi {
  background-color: #d0cece;
  color: #00b0f0;
}
#next_w {
  width: 40px;
  margin-left: 10px;
  margin-top: 15px;
}

input:hover {
  filter: hue-rotate(120deg);
}
#status td.maru:hover {
  filter: hue-rotate(120deg);
}
/*                                           */
/*   check.html 用                           */
/*                                           */
.gate {
  width: 100%;
  margin-left: 20%;
  margin-top: 50px;
}
#table0 {
  width: 300px;
  /*  margin-right: auto; */
}
#table0 p {
  color: black;
  margin-top: 0px;
}
#table0 th {
  background-color: #bdd7ee;
}
#table0 td {
  text-align: left;
}
#table0 td {
  background-color: #ddebf7;
  color: black;
}
/*                                                  */
/*         cancel.html 用                           */
/*                                                  */
#page_header_cancel {
  width: 1100px;
  margin-left: 1px;
  padding-left: 200px;
  margin-right: auto;
  margin-top: 30px;
  padding-top: 1px;
  position: fixed;
  text-align: center;
  display: flex;
  flex-direction: row;
  background-color: white;
}
#page_header_cancel img {
  margin-top: 12px;
}
#page_header_cancel_exec {
  width: 1100px;
  margin-left: 1px;
  padding-left: 200px;
  margin-right: auto;
  margin-top: 0;
  padding-top: 1px;
  position: fixed;
  text-align: center;
  display: flex;
  flex-direction: row;
  background-color: white;
}
#page_header_cancel_exec img {
  margin-top: 12px;
}
.box_cancel {
  display: flex;
  flex-direction: column;
  color: black;
}
.box_detail {
  margin-left: 20%;
  display: flex;
  flex-direction: column;
  color: black;
}
.box_detail h1 {
  margin-top: 60px;
}
.a {
  display:flex;
  flex-direction: column;
  margin-top: 1px;
  padding-top: 1px;
}
#cancel {
  display: block;
  flex-direction: column;
  background-color: white;
  color: black;
}

.cancel_exec {
  width: 100%;
  margin-left: 20%;
  margin-top: 50px;
  /*  margin-right: auto;*/
  display: block;
  flex-direction: column;
  background-color: white;
  color: black;
}
#cancel p {
  color: black;
}
#cancel_table {
  /*  display: block;*/
  width: 300px;
  /*  margin-right: auto;*/
}
#cancel_table th {
  background-color: #bdd7ee;
}
#cancel_table td {
  text-align: left;
  background-color: #ddebf7;
  color: black;
}
#input_cancel {
  display: block;
}
/*                                                  */
/*   cancel_exec.php 用                            */
/*                                                  */
.color {
  color: black;
}
#cancel th {
  background-color: #bdd7ee;
}
#cancel td {
  text-align: left;
  background-color: #ddebf7;
  color: black;
}
/*                                             */
/*            entry.html用                     */
/*                                             */
.input_date_time {
  /*  margin-top: 0px; */
  margin-left: 30%;
}
#entry_table {
  display: block;
/*  width: 100%; */
  /*  margin-top: 0px; */
/*  margin-left: 30%; */
}
#entry_table tr th:nth-of-type(1) {
/*  width: 100%; */
  text-align: center;
}
#entry_table tr th {
  background-color: #bdd7ee;
}
#entry_table tr td {
  text-align: left;
  background-color: #ddebf7;
  color: black;
}
.input_date_time_kakuninn {
  margin-left: 30%;
}
/*                                                   */
/*        entry.php用                                 */
/*                                                  */

#page_header_entry{
  width: 1100px;
  margin-left: 250px;
  margin-right: auto;
  margin-top: -63px;
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: white;
}
#page_header_entry img{
  margin-top: 12px;
}
.box {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.box_entry {
  width: 540px;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}
.box_entry_php {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 60px;
  margin-left: 25%;
}
#sts_opt {
  width: 500px;
}
#sts_opt th {
  background-color: #bdd7ee;
}
#sts_opt td {
  text-align: center;
}
#sts_opt td.maru {
  background-color: #ddebf7;
  color: #00b0f0;
}
#sts_opt td.maru a {
  color: #00b0f0;
}
#sts_opt td.batsu {
  background-color: #ddebf7;
  color: red;
}
#sts_opt td.nashi {
  background-color: #d0cece;
  color: #00b0f0;
}
.entry_confirm{
  color: black;
  margin-left: 20%;
  padding-top: 50px;
}
#entry_tb {
  width: 540px;
}
#entry_tb th {
  background-color: #bdd7ee;
}
#entry_tb td {
  text-align: left;
}
#entry_tb td {
  background-color: #ddebf7;
  color: black;
}
/*....................................................*/
/*        check_entry_date.php用......................*/
/*                                                    */
#entry_rectangle {
  display: flex;
  flex-direction: row;
  width: 930px;
  margin-left: auto;
  margin-right: auto;
}
#prev_dd {
  margin-left: auto;
  margin-right: auto;
  margin-top: -740px;
}
#dummy {
  width: 30%;
}
#next_dd {
  margin-left: auto;
  margin-right: auto;
  margin-top: -740px;
}
.tbl {
  width: auto;
  margin-left: 25%;
  margin-right: auto;
}
.tbl tr th {
  background-color: #bdd7ee;
}
.tbl tr td {
  background-color: #ddebf7;
  color: black;
}
/*                                                   */
/*          day_exam.html用                           */
/*                                                  */
#exam_table {
  width: 300px;
}
#exam_table th {
  background-color: #bdd7ee;
}
#exam_table td {
  text-align: left;
}
#exam_table td {
  background-color: #ddebf7;
  color: black;
}
.page_header_day_exam {
  width: 1000px;
  margin-left: 1px;
  padding-left: 250px;
  margin-right: auto;
  margin-top: -20px;
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: white;
}
#page_header_detail {
  width: 1000px;
  margin-left: 1px;
  padding-left: 250px;
  margin-right: auto;
/*  margin-top: 40px; */
/*  position: fixed; */
  display: flex;
  flex-direction: row;
  background-color: white;
}
.page_header_day_exam img {
  margin-top: 12px;
}
#page_header_detail img {
  margin-top: 12px;
}
.page_menu_day_exam {
  width: 1000px;
  display: flex;
  flex-direction: row;
  list-style: none;
}
#page_menu_detail {
  width: 1000px;
  display: flex;
  margin-right: auto;
  flex-direction: row;
  list-style: none;
}
.page_menu_day_exam li {
  padding-left: 10px;
}
#page_menu_menu li {
  padding-left: 10px;
}
/*                                    */
/*    reservation_date.php 用                 */
/*                                    */
.confirm h1 {
  padding-top: 6%;
  padding-left: 20%;
}                                    
#entry_conf {
  width: 500px;
  margin-left: 20%;
}
#entry_conf th {
  background-color: #bdd7ee;
}
#entry_conf td {
  text-align: left;
}
#entry_conf td {
  background-color: #ddebf7;
  color: black;
}

/*                                    */
/*    reservation_date.php 用                 */
/*                                     */
#entry_table {
  width: 500px;
  margin-left: 0px;
}
.entry_table {
  width: 500px;
  margin-left: 300px;
}
#entry_table th {
  background-color: #bdd7ee;
  width: 250px;  
}
#entry_table td {
  background-color: #ddebf7;
  color: black;
  text-align: left;
  width: 250px;
}
/*                                    */
/*    register.php 用                 */
/*                                     */
.box_register {
  width: 100%;
/*  margin-left: auto;
  margin-right: auto; */
  padding-top: 5%;
}
.register_title {
  margin-left: 20%;
  color: black;
}
#register {
  width: 50%;
  margin-left: 20%;
  margin-right: 10%;
}
#register th {
  background-color: #bdd7ee;
}
#register td {
  text-align: left;
}
#register td {
  background-color: #ddebf7;
  color: black;
}