@charset "utf-8";
@import url("/recruit/css/hmenu.css");
/****************************************************************************
全施設共通
--------------------------------------------------------
   Last up date   : 2025.10.22
****************************************************************************/
body {
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  color:#333;
  letter-spacing: 0.1em;
}

:root {
/* # =================================================================
   # 共通カラー
   # ================================================================= */
  --pink1: #F19CA6;
  --rosered: #db535e;
  --black: #000;
  --lightgray:  #e6e6e6;
  --offwhite:  #f6f6f6;
  --white:  #ffffff;
  --lightblue: #0071bc26;  
  
/* # =================================================================
   # 白庭病院　-　共通カラー
   # ================================================================= */
  --base1: #005fa8;
  --base2: #29ABE2;
  --base3: #999;
  --base4: #0071bc26;
}


  :root {
/* # =================================================================
   # 見出しフォントサイズ
   # ================================================================= */
  --fs-h1: clamp(1.5rem, 0.975rem + 1.09vw, 2rem);/* w768=24px → w1500=32px */ 
  --fs-h2: clamp(1.375rem, 1.113rem + 0.55vw, 1.625rem);/* w768=22px → w1500=26px */ 
  --fs-h3: clamp(1.125rem, 0.863rem + 0.55vw, 1.375rem);/* w768=18px → w1500=22px */ 
  --fs-h4: clamp(1rem, 0.738rem + 0.55vw, 1.25rem);/* w768=16px → w1500=20px */
  --fs-h5: clamp(1rem, 0.869rem + 0.27vw, 1.125rem);/* w768=16px → w1500=18px */
  --fs-h6: 1rem;                                      /* 16px固定 */

/* # =================================================================
   # 文章フォントサイズ
   # ================================================================= */
  --fs-lead: clamp(1rem, 0.607rem + 0.82vw, 1.375rem); /* w768=16px → w1500=22px */
  --fs-body: clamp(0.875rem, 0.613rem + 0.55vw, 1.125rem); /* w768=14px → w1500=18px */
  --fs-note: clamp(0.875rem, 0.744rem + 0.27vw, 1rem); /* w768=14px → w1500=16px */
  --fs-title: clamp(1rem, 0.738rem + 0.55vw, 1.25rem); /* 16px → 20px */ 
  --fs-caption: clamp(0.75rem, 0.488rem + 0.55vw, 1rem);/* w768=12px → w1500=16px */ 
  --fv-fs-h2: clamp(1.5rem, 0.975rem + 1.09vw, 2rem);/* w768=24px → w1500=32px */ 
}
/*--------------------------------------------------------
　ヘッダー
--------------------------------------------------------*/
header {
  position: fixed !important;

}
@media screen and (max-width:1024px) { 
header {
  height: 60px !important;
}
}

.top-grobal-nav {
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
  height: clamp(5.625rem, 3.658rem + 4.1vw, 7.5rem); /* w1500-150px -> w768-90px */
  transition: .5s ease;
  background: #FFF;                 /* 透け防止 */
  letter-spacing: 0.05em;
  height: 90px;
}
.be-small {
	height: 60px !important;
}



/* 左ナビ */
.header-nav{
  width: 100%;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between;
  /*  display: block;*/
}

/*--------------------------------------------------------
ロゴ
--------------------------------------------------------*/

.header-logo{
  transition: opacity 0.5s ease;
  display: inline-block;

  width: 18%;
  max-width: 180px;
  margin: 20px 2% 30px 2%;
}
.header-logo:hover {
  opacity: 0.6;  
}
@media screen and (max-width:1500px) {
.header-logo{
    width: 12%;
}
}
@media screen and (max-width:1024px) {
  .header-logo{
  	position: absolute;
  	z-index: 100000;

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


/*--------------------------------------------------------
ナビ
--------------------------------------------------------*/
.header-nav-item{
  width: 50%;
  margin-left: 16%;
}

.be-small .header-nav-item{
  vertical-align: top;
  margin-top: 1.2em;
  width: 50%;
  margin-left: 18%;
}

@media screen and (max-width:1400px) {
.be-small .header-nav-item{
  vertical-align: top;
  margin-top: 1.2em;
  width: 50%;
  margin-left: 18%;
}
}

/*--エントリーボタン---*/
.header-entry{
    margin-right: 4%;
    margin-top: 10px;
    width: 10%;
}
.header-entry img{
    width: 100%;
}
.be-small .header-entry{
    margin-right: 4%;
    margin-top: 10px;
    width: 7%;
}
.be-small .header-entry img{
    width: 100%;
}
@media screen and (max-width:1024px) {
  .header-entry{
   display: none; 
}
}
.header-entry-btn img {
  transition: opacity 0.5s ease; /* なめらかに変化 */
}

.header-entry-btn:hover img {
  opacity: 0.7; /* 半透明 */
}

@media screen and (max-width:1625px) {
  .be-small .open {
     min-height: 100px; max-height: 100px; }
  }

.global-nav {
  display: flex;          /* 横並び */
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}
@media screen and (max-width:1024px) {
  .global-nav {
   display: none; 
}
}


.global-nav__item {
	margin: clamp(1.875rem, 1.219rem + 1.37vw, 2.5rem) clamp(0.313rem, -0.278rem + 1.23vw, 0.875rem) 14px clamp(0.313rem, -0.278rem + 1.23vw, 0.875rem);
  /*top1500-40px -> top768-30px w1500-14px -> w768-5px*/
  transition: .5s ease;
}
.be-small .global-nav__item {
	margin: 0px 8px;
}

.global-nav__item a {
	font-size: var(--fs-body);
	font-weight: 700;
	padding: 0;
  text-decoration: none; /* 下線が出る場合の防止 */
  transition: color 0.3s ease; /* スムーズに色が変わる */
  color: #333;
}

.global-nav__item a:hover {
  color: var(--pink1);
}
.global-nav__item a:link {
  color: #333;
}
.global-nav__item a:hover-active {
  color: #333
}

@media screen and (min-width: 1025px) and (max-width: 1400px) {
.global-nav__item a {
	font-size: clamp(0.813rem, 0.3rem + 0.8vw, 1rem);
}

}




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

/***** フッターナビ *****/
.footer-nav{
  width: 90%;
  max-width: 1585px;
  margin: 40px auto;
  border-top: solid 1px #4d4d4d;
  border-bottom: solid 1px #4d4d4d;
}   

.footer-nav-item{
  margin: 20px;
}

.footer-navg {
  display: flex;          /* 横並び */
  justify-content: space-between;
    flex-wrap: wrap;   
  width: 75%;
  margin: 0 auto;
    gap: 10px;                /* 要素間のすき間を自然に */
  list-style: none;
  padding: 0;
}

.footer-navg__item {
	margin: 16px;
  transition: .5s ease;
}

.footer-navg__item a {
	font-size: var(--fs-body);
	font-weight: 700;
	padding: 0;
  text-decoration: none; /* 下線が出る場合の防止 */
  transition: color 0.3s ease; /* スムーズに色が変わる */
  color: #333;
}

.footer-navg__item a:hover {
  color: var(--pink1);
}
.footer-navg__item a:link {
  color: #333;
}
.global-nav__item a:hover-active {
  color: #333
}


/***** ロゴ *****/
.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;
}

/***** フッター ロゴ *****/
.footer-info{
  width: 100%;
  margin: 80px auto 60px;
  text-align: center; /* 中央寄せ */
}
.footer-logo{
  width: 260px;
  display: inline-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;
}

.footer-logo:hover {
  opacity: 0.6;                /* 半透明に */
}


.footer-copyright {
  text-align: center;
  font-size: var(--fs-caption);
  padding-bottom: 80px;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.05em;
}

/*--------------------------------------------------------
フッター max-width:767px
--------------------------------------------------------*/
@media screen and (max-width:767px) {

/***** フッターナビ *****/
.footer-nav{
  width: 90%;
  max-width: 1585px;
  margin: 40px auto;
  border-top: solid 1px #4d4d4d;
  border-bottom: solid 1px #4d4d4d;
      justify-content: center; /* 横中央寄せのまま */
    gap: 12px 24px;          /* 縦横のすき間を設定（例:縦12px 横24px） */
    width: 100%;
}   

.footer-nav-item{
  margin: 10px;
  width: 100%;
}

.footer-navg {
  display: flex;
  justify-content: center;  /* space-betweenだと広がりすぎるので中央寄せ推奨 */
  flex-wrap: wrap;          /* ← 横並びで折り返し！ */
  width: 90%;
  margin: 20px auto;
  gap: 10px;                /* 要素間のすき間を自然に */
  list-style: none;
  padding: 0;
}

.footer-navg__item {
	margin: 10px;
  transition: .5s ease;
}

.footer-navg__item a {
	font-size: var(--fs-body);
	font-weight: 700;
	padding: 0;
  text-decoration: none; /* 下線が出る場合の防止 */
  transition: color 0.3s ease; /* スムーズに色が変わる */
  color: #333;
}

/***** フッター ロゴ *****/
.footer-info{
  width: 100%;
  margin: 40px auto 30px;
  text-align: center; /* 中央寄せ */
}
.footer-logo{
  width: 260px;
  display: inline-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: 12px;
	container-type: inline-size;
	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: 20px;
	text-align: justify;
	text-align-last: justify;
		font-weight: bold;
}

.footer-logo:hover {
  opacity: 0.6;                /* 半透明に */
}


.footer-copyright {
  text-align: center;
  font-size: var(--fs-caption);
  padding-bottom: 80px;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.05em;
}


}

/* ボタン */
  .search_items {
    margin-top: 5rem;
    text-align: center;
  }
  .btn, .btn02 {
    /* ユーザーエージェントスタイルシートをリセット */
    padding: 0;
    border: 0;
    border-radius: 5px;
    color: inherit;
    appearance: none;
    border: 2px solid #000;
　　transition: background-color 0.5s ease;
 
    /* 高さに影響するプロパティが同じ値であることを確認 */
    font-size: 1em;
    line-height: 1.2;
    padding: 0.5em var(--padding-x);
    border-width: 2px;
    border-style: solid;
  }
  
  /* button */
  .btn {
    display: inline-flex;
    justify-content: center; /* コンテンツを水平方向に中央揃え */
    align-items: center; /* コンテンツを垂直方向に中央揃え */
    --padding-x: 1.2em;
  }
  
  /* input */
  .btn02 {
    --padding-x: 0.5em;
  }

.btn:hover{
  background-color: #ffe5ef;
}



/* PCとスマホの表示ON・OFF */
/**** PC用の設定 ****/
.pcLayer { display: block; }
.spLayer { display: none; }
/**** SP用の設定 ****/
@media screen and (max-width:1024px) {
.pcLayer { display: none; }
.spLayer { display: block; }
}