@charset "UTF-8";
@import url("grid.css");


img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: var(--link-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}
a img {
    margin-bottom: 1rem;
}
a img:hover {
	opacity: 0.8;
}
.underline {/* 診療科目 */
	border-bottom: 3px solid var(--base-color);
	padding-bottom: 0.5rem;
}

/*ヘッダー
-------------------------------------*/
header {
	background-color: white;
    left:0;
    line-height:1;
    position: sticky;
    top:0;
    width:100%;
	height: 230px;
    z-index:100;
    text-align:center;
    padding:1rem;
}
.container2{
	width:100%;
	height: 230px;
	background-image: url("../img/headerback.png");
	background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.head {
	display: flex;
    flex-direction: row;
    padding: 1rem 0 0 0;
}

.head h1 { 
    padding: 1rem 0;
}

.head h1 a {
	width:60rem;
	padding-top: 3rem
}

/*予約ボタン*/
.right-box{ 
	width: 20rem;
	margin-left: auto;	
	 position: relative; /*追記*/
     top: -120px; /*ボックス位置*/
     left:0px; /*ボックス位置*/
}
.btan{
	display: block;
}
.btn-stitch1 {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #000;
  width: 200px;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: linear-gradient(#FEF9E1 0%, #FF9B50 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);

}
.btn-stitch1:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#FFFF99 0%, #FFBB5C 100%);/*グラデーションを明るく*/
}
.btn-stitch2 {
 display: inline-block;
  position: relative;
  text-decoration: none;
  color: #000;
  width: 200px;
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: linear-gradient(#FEF9E1 0%, #D04848 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}
.btn-stitch2:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#fed6e3 0%, #FF9999 100%);/*グラデーションを明るく*/
}	
@media screen and (max-width: 768px){
	header {
	height: 160px;
}
	.container2{
	width:100%;
	height: 130px;
	background-image: url("../img/headerback.png");
	background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
	.right-box{width: auto;
		margin-left: auto;
		font-weight: bold;
		margin-top: -10px;
		position: initial; /*ポジション解除　スマホ時の予約ボタンの高さ*/
	}
	.btan{
		display: flex;
	}/*スマホ時は予約ボタンを縦並びにする*/
	.btn-stitch1{
		font-size: 1.5rem;	/*文字サイズ*/
		margin-right: 10px;	
	}
	.btn-stitch2{
		font-size: 1.5rem;/*文字サイズ*/	
		margin-left: 10px;
	}	
}
/*メニュー*/
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin-top: -7rem;
	margin-bottom: -2rem;
}
nav li {
    display: block;
    flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
}
nav a:hover {
    background-color: var(--back-color);   
}
nav a:hover{
    color: #9C4142;
	}
	


@media screen and (min-width: 768px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}
@media screen and (max-width: 768px){
.head {
	flex-direction: column;
    text-align: left;
    margin-bottom: 20px;
}
.head #open,#close  {
    position: absolute;
    top: 28px;
    right: 12px;
    }
.head h1 a { 
    width: 90%;
}
nav ul {
	flex-direction: column;
	margin-top: 20px;	
}
nav li {
	padding: 15px;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 0;
	background-color:#F1E2E2;
	border-top: 3px dotted #fff; 	
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
	
}

/* 罫線
-------------------------------------*/

hr {
	margin: 0 auto;
    width: 1000px;
    height: 3px;
	background-color:#CD5C5C;
	border: none;
}
@media screen and (max-width: 768px){
hr {
    width: 100%;
}
}

/*メイン
-------------------------------------*/
/* トップへ戻るボタン */
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;
}

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

h2 {
  color: #c0656a;/*フォントカラー*/
  padding: 11px 20px;/*余白*/
  font-size: 23px;/*フォントサイズ*/
  font-weight: bold;/*太字*/
  border-left: 8px solid #c0656a;/*左線 サイズ・カラー*/
  background: #f7e7df;/*背景カラー*/
  margin-top: 0px;
}
main{background-color:#FFFAF4;}/* メイン背景色 */


h3 {
  color: #fff;/*フォントカラー*/
  padding: 0.6rem 2.5rem;/*余白*/
  font-size: 20px;/*フォントサイズ*/
  font-weight: bold;/*太字*/
  background : #c0656a;
  width : 20rem;
  height : 4rem;
  border-radius : 5rem;
  margin-top: 0.2rem;
	text-align: center;
}

.midashi h4::before{
	position: absolute;
	content: '';
	background: #AB4143;
	width: 20px;
	height: 20px;
	top: 18px;
	left: 0px;
}
.midashi h4{
	padding: 15px 15px 15px 30px;
	font-size: 20px;
	color: #AB4143;
	position: relative;
}

h5{
	font-size: 20px;
    color: #db7093}

.buntyurink{
	display:inline;
	color: #A4044F;
}

.mojiiro{color: #A4044F;
         font-weight: bold;}

@media screen and (max-width: 768px){
	.main{
		osition: relative; /* 今の位置を基準 */
        top: 10px; /* 上から10px */
}
}


/*フッター
-------------------------------------*/

.footer-section{
	display: flex;
}

.footer-ad {
  width: 50%;
  text-align: center;
  font-style: normal;
}

.jikan{
    margin: auto;
}




@media screen and (max-width: 768px) {
.footer-section{
	display: block;
}
.footer-ad {
  width: 100%;
}
}

/*診療時間*/


/*フッターリスト*/
.footer02 {
 color: #808080;
 background: #fff;
 text-align: center;
 padding: 30px;
}
.footer02 a {
 color: #808080;
 text-decoration: none;
}
.footer02 a:hover {
 text-decoration: underline;
}
.footer02 .menu {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.footer02 .menu li {
 margin: 0;
 padding: 0 20px;
}
.footer02 .copyright {
 margin: 0;
 padding: 20px 0 0 0;
}
	
.footer-copyright {
  padding: 1rem;
  line-height: 1;
  color: #fff;
  text-align: center;
  background: #ed7d31;
}