@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;
}





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

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}

.kyotyo{font-size: 18px;
	    color: #AD366E;
	    font-weight: bold;
        }
.kyotyo2{font-size: 20px;
	    color: #000;
	    font-weight: bold;
        text-align: center;}
.red{
	color: #FF0000;	
}

.gray{
	color: #BFBFBF;
}



/*ヘッダー
-------------------------------------*/
header {
	background-color: white;
    left:0;
    line-height:1;
    position: sticky;
    top:0;
    width:100%;
	height: 260px;
    z-index:100;
    text-align:center;
    padding:1rem;
}
.container2{
	width:100%;
	height: 290px;
	background-image: url("../img/headerback.jpg");
	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:65rem;
	padding-top: 3rem;
}

@media(min-width:751px){
    .head-2{
        display: none !important;/*PCでは表示しない*/
    }
}


/*予約ボタン*/
.right-box{ 
	width: 25rem;
	margin-left: auto;	
	 position: relative; /*追記*/
     top: -150px; /*ボックス位置*/
     left:0px; /*ボックス位置*/
}
.btan{
	display: block;
	position: relative; /*追記*/
     margin-left: 15px; /*ボックス位置*/
}
.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(#fdf5e6 0%, #e8d3ca 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  border: 3px solid; /* 枠線の太さとスタイルを指定 */
  border-color: #942343; /* 枠線の色を設定 */
}
.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%, #FF9B50 100%);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  border: 3px solid; /* 枠線の太さとスタイルを指定 */
  border-color: #D96C01; /* 枠線の色を設定 */
}
.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: 100px;
}
	.container2{
	width:100%;
	height: 130px;
	background-image: url("../img/headerback3.png");
	background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
	.right-box{width: auto;
		margin-left: auto;
		font-weight: bold;
		margin-top: -15px;
		position: initial; /*ポジション解除　スマホ時の予約ボタンの高さ*/
	}
	.btan{
		display: flex;/*スマホ時は予約ボタンを縦並びにする*/
		margin-right: 15px; /*ボックス位置*/
	}
	
	
	.btn-stitch1{
		font-size: 1.5rem;	/*文字サイズ*/
		margin-right:5px;	
	}
	.btn-stitch2{
		font-size: 1.5rem;/*文字サイズ*/	
		margin-left: 5px;
	}
}


/*メニュー*/
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin-top: -11rem;
	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;
	}
	
/* 予約ボタン電話番号表示 */
	.pc-only{
		font-weight: bold;
		font-size: 150%;
		color: #B50B0E;
		margin-top: 14px;
	}

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

#navi {
    display: block !important;
}
}
@media screen and (max-width: 768px){
	.head { display: none !important;/*スマホでは表示しない*/
	}
	
/*↓スマホ用タイトル*/	
.head-2 {
	flex-direction: column;
    text-align: left;
    margin-bottom: 45px;
}
.head-2 #open,#close  {
    position: absolute;
    top: 28px;
    right: 12px;
    }
.head-2 h1 a { 
    width: 100%;
	margin-top: 30px;
}
	

		
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: 70px;
    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);
}
main{background-color:#FFFAF4;/* メイン背景色 */
	}

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

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

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

.blue{color: #1B83FF;}


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

.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: 40px 0 0 0;
}	
.copyright {
	font-size: 70%;	
}

/*インスタグラムリンク*/
.ad{display: flex;
}
.ad-1 { margin-left: 5rem;
}
.sns { margin-left: 6rem;
	   margin-top: 2.5rem;
}
.sns img { width: 50px; /* 横幅を指定 */
	text-align: center;
	height: auto; /* 縦横比を自動調整 */
}
@media screen and (max-width: 768px) {
	.ad{display: block;
}
	.ad-1 { margin-left: 0rem;
}
.sns { margin-left: 0rem;
	   margin-top: 1rem;
	}}

	
/* 予約ボタン電話番号表示 */

	/* 初期状態（PC用） */
	.pc-only {
		display: block;
	}
	.sp-only {
 	 display: none;
	}
	
	/* スマホ用（768px以下） */
	@media screen and (max-width: 768px) {
 	 .pc-only {
  	  display: none; /* PC用電話番号を非表示 */
	  }
		.right-box{
			display: none; /* PC予約ボタンを非表示 */
		}
 	 .sp-only {
		 display: flex; /* スマホ用電話番号を表示 */
		 position: fixed; /* 画面下に固定表示する例 */
		 bottom: 0;
		 left: 0;
		 width: 100%;
		 text-align: center;
		 font-size: 18px;
		 font-weight: bold;
		}
		.s-yoyaku{
			width: 330px;	
			background: #f6bfbc;
			padding: 15px;
			border: 2px solid; /* 枠線の太さとスタイルを指定 */
			border-color: #fff; /* 枠線の色を設定 */
			color: #000;
		}	
		.s-hatunetu{
			width: 330px;
			background: #e45e32;
			padding: 15px;
			border: 2px solid; /* 枠線の太さとスタイルを指定 */
			border-color: #fff; /* 枠線の色を設定 */
			color: #fff;
		}
		.s-tel{
			width: 330px;	
			background: #f6bfbc;
			padding: 15px;
			border: 2px solid; /* 枠線の太さとスタイルを指定 */
			border-color: #fff; /* 枠線の色を設定 */
			color: #000;
			font-size:110%;
		}
	}