@charset "utf-8";

/* ========== 基本的な文字の指定 ========== */
html, body {
	font-size: 12px;   /* フォントのサイズ12px */
	font-family: sans-serif;
	color: #393939;                    /*基本の文字色指定*/
	background: #ffffff;               /*基本の背景色指定*/
}

/* 画面が480px（タブレット縦）以上の時の動作 */
@media screen and (min-width: 480px) {
    html, body {
	   font-size: 14px;   /* フォントのサイズ14px */
    }
}

/* 画面が768px（タブレット横）以上の時の動作 */
@media screen and (min-width: 768px) {
    html, body {
	   font-size: 16px;   /* フォントのサイズ12px */
    }
}

/* ========== マージンや空白の指定 ========== */
body, div, p, h1, h2, h3, h4, ul, figure {
	margin: 0;
	padding: 0;
}
p, td, th, li {
	line-height: 1.8;
}
img {
	width: 100%;
	height: auto;
}
a {
	color: #709a00;
}
a:hover {
	color: #95cd00;
}
a:active {
	color: #4b6700;
}
.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ========== 見出し文字h1の指定 ========== */
main h1 {
	margin-bottom: 1rem;
	border-bottom: 1px dashed #c84040;
	font-weight: normal;
	font-size: 1.2rem;
}
/* 画面が480px（タブレット縦）以上の時の動作 */
@media screen and (min-width: 480px) {
    main h1 {
	   font-size: 1.4rem;
    }
}

/* 画面が768px（タブレット横）以上の時の動作 */
@media screen and (min-width: 768px) {
    main h1 {
	   font-size: 1.6rem;
    }
}

/* ========== 強調文字の設定 ========== */
.impactpink{
    font-weight: bold;
    color: deeppink;
}

/* ========== 下線文字の設定 ========== */
.impactborder{
    text-decoration : underline;
}

/* ========== 太文字の設定 ========== */
.impactbold{
    font-weight: bold;
}


/* ========== コンテナの指定 ========== */
.container {
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	max-width: 1000px;
}

/* 画面が480px（タブレット縦）以上の時の動作 */
@media screen and (min-width: 480px) {
       
}

/* 画面が768px（タブレット横）以上の時の動作 */
@media screen and (min-width: 768px) {
	.container {
		padding-left: 0px;
		padding-right: 0px;
	}
}

/* 画面が920px（PC）以上の時の動作 */
@media screen and (min-width: 920px) {
    
}


/* ========== ヘッダー ========== */
header {
	background: #ffffff;               /*ヘッダーの背景色指定*/
}
.header-container {
/*	padding-top: 20px;
	padding-bottom: 20px; */
    height:150px;
}
/* 画面が480px（スマホ）以下の時の動作 */
@media screen and (max-width: 480px) {
    .header-container {
        height:120px;
    }
}



.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header-logo {
	padding: 10px 0;
	width: 160px;
	height: 37px;
}
.header-info {
	padding: 10px 0;
	width: 160px;
	height: 37px;
}

.telephone {
/* 	padding: 10px 0; */
	width: 250px;
/*	height: 37px; */
    float: right;
}
.info-logo {
/* 	padding: 10px 0; */
	width: 500px;
/*	height: 37px; */
    float: left;
}

/* 画面が479px（スマホ）以下の時の動作 */
@media screen and (max-width: 479px) {
    .telephone img {
        width: 150px;
        float: right;
    }
    .info-logo img {
        width: 300px;
/*      float: left; */
    }
}
/* 画面が480px（タブレット縦）以上の時の動作 */
@media screen and (min-width: 480px) {
    .telephone img {
        width: 200px;
        float: right;
    }
    .info-logo img {
        width: 400px;
/*      float: left; */
    }    
}
/* 画面が768px（タブレット横）以上の時の動作 */
@media screen and (min-width: 768px) {

}


/*ヘッダーのメニューボタン指定 －－－－－－－－－－－－－－－－－－－－－ */
.menu-btn {
	padding: 10px 0;
	border: 1px solid #33ccff;
	border-radius: 4px;
	width: 40px;
	height: 40px;
	background: url(../images/hamburger.png) no-repeat center center;
	background-size: contain;
}

/* 画面が480px（タブレット縦）以上の時の動作 */
@media screen and (min-width: 480px) {
    
    
}

/* 画面が768px（タブレット横）以上の時の動作 */
@media screen and (min-width: 768px) {
	.header-logo {
		padding: 20px 0;
		width: 200px;
		height: 46px;
	}
	.menu-btn {
		display: none;
	}
}

/* 画面が920px（PC）以上の時の動作 */
@media screen and (min-width: 920px) {
    
}



/* ========== ナビゲーション ========== */
nav {
    background: rgb(0,153,255);         /*ナビゲーションの背景色指定*/
}
.navbar {
	display: none;
	list-style-type: none;
}
.navbar a {
	display: block;
	padding: 0.6rem 0;
	color: #fff;
	text-decoration: none;
}
.navbar a:hover {
	background: #333366;               /*マウスが上に来た時の背景色指定*/
}


/* 画面が480px（タブレット縦）以上の時の動作 */
@media screen and (min-width: 480px) {
    
    
}

/* 画面が768px以上の時の動作 */
@media screen and (min-width: 768px) {
	.navbar {
		display: flex !important;
	}
	.navbar li {
		flex: 1 1 auto;
		text-align: center;
	}
	.navbar a.nav-current {
		background: #333366;           /*マウスが上に来た時の背景色指定*/
	}
}

/* 画面が920px（PC）以上の時の動作 */
@media screen and (min-width: 920px) {
    
}


/* ========== メインエリア基本レイアウト ========== */
main {
	padding-top: 50px;
	padding-bottom: 50px;
	background: #ffffff;               /*メイン部分の背景色指定*/
}

/* 画面が768px以上の時の動作 */
@media screen and (min-width: 768px) {
	main {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* ========== フッター ========== */
footer {
	background: rgb(0,153,255);         /*フッターの背景色指定*/
	font-size: 0.9rem;
	color: #fff;
}
.footer-container {
	padding-top: 20px;
	padding-bottom: 20px;
}
.footer-nav {
	list-style-type: none;
}
.footer-nav li {
	display: inline;
	padding: 0 1rem 0 0;
}
.footer-nav a {
	color: #fff;
	text-decoration: none;
}
.footer-nav a:hover {
	opacity: 0.5;
}

/* ========== index トップページ ========== */

/* キャッチコピー */
.home-maincopy {
	text-align: center;
	font-size: 1.4rem;                 /*フォントデフォルトの1.4倍*/
}
.home-maincopy strong {
	color: lightskyblue;                    /*キャッチコピー強調時の色指定*/
}

/* 画面が768px以上の時の動作 */
@media screen and (min-width: 768px) {  
	.home-maincopy {
		font-size: 1.8rem;            /*フォントデフォルトの1.8倍*/
	}
}

/* 見出し文字を指定します */
.home-h2 {
	padding-bottom: 5px;
	margin: 30px 0 10px 0;
	color: lightskyblue;                    /*見出しの色指定*/
	border-bottom: 1px dashed #3366cc;
	font-size: 1.3rem;                 /*フォントデフォルトの1.3倍*/
}

/* ホーム診療内容 */
.home-info {
	padding: 30px;
	border-radius: 10px;
	background: #ffefef;                  /*ホーム診療内容の背景色指定*/
}

/* お知らせ */
.home-news {
	padding: 30px;
	border-radius: 10px;
	background: #eff7ff;                  /*お知らせの背景色指定*/
/*    height: 12em; */
    height: 16em;
    overflow: auto;
}

/* 画面幅が広い（タブレット・パソコン向け） */
@media screen and (min-width: 768px) {    
	}

/* ========== about 当院について ========== */
/* =====画面の幅に合わせてドクター写真の表示や非表示、サイズを設定する===== */
/* ドクター写真（モバイル用）の設定 */
.doctors-image-mobile img {
	float:inherit;         /* フロート継承 */
	margin-right: 20px;    /*  */
	border-radius: 10%;    /*  */
	width: 80%;            /* 画像の幅を画面の80％に指定 */
}
/* ドクター写真の基本設定 */
.doctors-image img {
    float: right;       /* フロートは右 */
	margin-right: 20px;
	border-radius: 10%;
	width: 30%;         /* 画像の幅を画面の30％に指定 */
}

/* 画面が479px（タブレット縦）以下の時の動作 */
@media screen and (max-width: 479px) {
    .doctors-image img {
        display: none;      /* ドクター写真を表示しない */
    }
}
/* 画面が480px（タブレット縦）以上の時の動作 */
@media screen and (min-width: 480px) {  
    .doctors-image-mobile img {
	   width: 50%;            /* 画像の幅を画面の50％に指定 */
    }
    .doctors-image img {
        display: none;      /* ドクター写真を表示しない */
    }    
}

/* 画面幅が広い（タブレット・パソコン向け） */
@media screen and (min-width: 768px) {
    /* ドクター写真の基本設定 */
    .doctors-image img {
        display:flex;
        width: 30%;         /* 画像の幅を画面の30％に指定 */
    }
    .doctors-image-mobile img {
        display: none;      /* ドクター写真（モバイル用）を表示しない */
    }
}

/* =====医師紹介の設定===== */
.doctors-text {
	padding: 1rem 0 0.5rem 0;
}
/* 院長紹介 */
.career-info {
	border-collapse: collapse;
}
.career-info td, .career-info th {
	padding: 0.5em 1em;
	border-bottom: 1px dotted #aeaeae;
}
.career-h3 {
	margin: 30px 0 10px 0;
	color: lightskyblue;
	border-bottom: 1px dashed navy;
	font-size: 1.3rem;
}

/* 院内紹介 */
.inside-h3 {
	margin: 30px 0 10px 0;
	color: lightskyblue;
	border-bottom: 1px dashed navy;
	font-size: 1.3rem;
}
.inside {
	overflow: hidden;
}
.inside img {
	float: left;
	margin-right: 20px;
	border-radius: 5%;
	width: 80%;
}

/* ========== schedule 診察時間 ========== */
/* 診察時間 */
.schedule-text {
	border-collapse: collapse;
}
.schedule-text td, .schedule-text th {
	padding: 0.5em 1em;
    padding: 10px 20px;
	border-bottom: 1px dotted #aeaeae;
}
.schedule-h3 {
	margin: 30px 0 10px 0;
	color: lightskyblue;
	border-bottom: 1px dashed navy;
	font-size: 1.3rem;
}
.schedule-info {
    
}

.schedule-table {
    margin-right: 20px;
    border-radius: 5%;
    width: 60%;    
}

.calendar img{
    margin-right: 20px;
    border-radius: 5%;
    width: 80%;
}

/* 画面が479px（タブレット縦）以下の時の動作 */
@media screen and (max-width: 768px) {
    .schedule-table {
        margin-right: 20px;
        border-radius: 5%;
        width: 100%;    
    }
    .calendar img {
        margin-right: 20px;
        border-radius: 5%;
        width: 100%;
    }
}


/* ========== access アクセス ========== */
/* 当院へのアクセス */
 .map {
	overflow: hidden;
}
.map-mobile {
	overflow: hidden;
}

/* =====画面の幅に合わせて地図の表示や非表示、サイズを設定する===== */
/* 地図（モバイル用）の設定 */
.map-mobile img {
	float:inherit;         /* フロート継承 */
	margin-right: 20px;    /*  */
	border-radius: 5%;    /*  */
	width: 100%;            /* 画像の幅を画面の70％に指定 */
}
/* 画面が479px（タブレット縦）以下の時の動作 */
@media screen and (max-width: 479px) {
    .map img {
        display: none;      /* 地図を表示しない */
    }
}
/* 画面が480px（タブレット縦）以上の時の動作 */
@media screen and (min-width: 480px) {  
    /* 地図の基本設定 */
    .map img {
        float: left;       /* フロートは右 */
        margin-right: 20px;
        border-radius: 5%;
        width: 40%;
    }
    /* 地図（モバイル用）の設定 */
    .map-mobile img {
        display: none;      /* 地図（モバイル用）を表示しない */
    }
}
/* 画面幅が広い（タブレット・パソコン向け） */
@media screen and (min-width: 768px) {
	/* 地図の基本設定 */
    .map img {
	   width: 60%;         /* 画像の幅を画面の30％に指定 */
    }
}
.access-text {
	padding: 1rem 0 0.5rem 0;
}

/* トップへ戻るボタンのセット */
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}