@charset "utf-8";
/****************************************************************************
白庭病院　-　共通
--------------------------------------------------------
   Last up date   : 2025.10.22
****************************************************************************/
:root {
/* # =================================================================
   # 白庭病院　-　共通カラー
   # ================================================================= */
  --base1: #005fa8;
  --base2: #29ABE2;
  --base3: #999;
  --base4: #0071bc26
}



/*--------------------------------------------------------
　ヘッダー
--------------------------------------------------------*/
.header-logo {
  width: 18%;
  max-width: 180px;
  margin: 30px 2% 30px 2%;
}
@media screen and (max-width:1500px) {
.header-logo{
  width: 12%;
}
}
@media screen and (max-width:1024px) {
  .header-logo{
  	width: 160px;
  	margin: 12px 2% 30px 2%;
}
}
.header-logo img {
	height: auto;
	width: 25%;
	float: left;
}

.header-logo span {
	float: right;
	width: 68%;
	display: block;
	font-size: 0.8cqw;
	container-type: inline-size;
	font-size: clamp(6px, 0.8vw, 12px);
	text-align: justify;
	text-align-last: justify;
	padding-top: 2px;
	padding-bottom: 5px;
		font-weight: bold;
}
.be-small .header-logo span {
	float: right;
	width: 68%;
	display: block;
	font-size: 0.8cqw;
	container-type: inline-size;
	font-size: clamp(4px, 0.6vw, 10px);
	text-align: justify;
	text-align-last: justify;
	padding-top: 2px;
	padding-bottom: 5px;
		font-weight: bold;
}

.header-logo strong {
	float: right;
	width: 68%;
	display: block;
	container-type: inline-size;
	font-size: clamp(18px, 1.5vw, 28px);
	font-weight: bold;
	text-align: justify;
	text-align-last: justify;
}
.be-small .header-logo strong {
	font-size: clamp(16px, 1.2vw, 24px);
}

.be-small .header-logo {
  width: 10%;
  max-width: 150px;
  margin: 10px 2% 30px 2%;
}
@media screen and (max-width:1024px) {
  .be-small .header-logo{
  	width: 30%;
  	margin: 15px 2% 30px 2%;
  }
  .header-logo img {
	height: auto;
	width: 35px;
	}
  .header-logo span {
	width: 115px;
	font-size: 10px;
	padding-top: 0px;
	padding-bottom: 3px;
  }
  .header-logo strong {
	width: 115px;
	font-size: 22px;
	}
}



@media screen and (max-width:1024px) {
/* ---------------------------------------------- */
/* ハンバーガーメニュー */
/* ------------------------- */

/* ▶マークの画像設定 */
.accordion-header span.accordion-menu a::after {
	background-image: url(/shiraniwa/upload/icon-link.svg);
}
/* TELアイコンの画像設定 */
.infoArea li.tel a::before {
	background-image: url(/shiraniwa/upload/tel-icon2.svg);
}
}



/* # =================================================================
   # フッター
   # ================================================================= */

/***** スペック *****/
.footer-logo{
  width: 260px;
  display: block; 
  margin-right: 40px;
  transition: opacity 0.5s ease;
    @media screen and (max-width:1024px) { width: 200px; }
}
.footer-logo img{
	height: auto;
	width: 60px;
	float: left;
    @media screen and (max-width:1024px) { width: 50px; }
}
.footer-logo span {
	float: right;
	width: 68%;
	display: block;
	font-size: 0.8cqw;
	container-type: inline-size;
	font-size: clamp(6px, 1.2vw, 16px);
	text-align: justify;
	text-align-last: justify;
	padding-top: 2px;
	padding-bottom: 5px;
	font-weight: bold;
}
.footer-logo strong {
	float: right;
	width: 68%;
	display: block;
	container-type: inline-size;
	font-size: clamp(18px, 3vw, 36px);

	text-align: justify;
	text-align-last: justify;
		font-weight: bold;
}