@charset "utf-8";
/* CSS Document */

.main{margin: 0 auto; width: 100%; max-width: 1200px;}

/* --- 共通・PCレイアウト --- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4%;
}

.nav-list {
  display: flex; /* PCでは横並び */
  list-style: none;
}

	/* お問い合わせエリアのデザイン（PC用） */
.contact-info {
  background-color: #fff9bd; /* 薄い黄色 */
  padding: 10px;
  border-radius: 15px;      /* 角を丸く */
  text-align: center;
	width: 80%;
  max-width: 220px;
}

.contact-title {
  background-color: #f39800; /* オレンジの背景 */
  color: white;
  border-radius: 20px;
  font-size: 1.0rem;
  margin-bottom: 5px;
  padding: 2px 10px;
  display: inline-block;
}

.tel a{
  font-size: 1.5rem;
  font-weight: bold;
  color: #5d3523; /* 濃い茶色 */
  margin: 0;
}
/* 電話番号行のレイアウト */
.tel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* 折り返し許可 */
  gap: 5px;       /* 要素間の隙間 */
  color: #5d3523; /* 文字色：濃い茶色 */
}

/* オレンジの丸アイコン */
.icon-circle {
  background-color: #f39800; /* オレンジ */
  color: #fff;               /* アイコンの色：白 */
  width: 24px;               /* 丸の幅 */
  height: 24px;              /* 丸の高さ */
  border-radius: 50%;        /* 正円にする */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;           /* アイコンのサイズ */
}

/* TEL&FAX のテキスト */
.label {
  font-size: 1.5rem;
  font-weight: bold;
  color: #5d3523; /* 濃い茶色 */
  font-weight: bold;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

/* 電話番号本体 */
.tel a {
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0;
  width: 100%; /* 番号を次の行に送りたい場合は100%、横に並べたいなら削除 */
  text-align: center;
}


@media screen and (min-width: 960px) {
	.header{margin: 0 auto; width: 1200px;margin-top: 15px;}.nav-list li{font-size: 1.2em;font-weight: bold;}.nav-list li a{color: #734C23;}.nav-list{padding-right: 300px;}
	.nav-list {
  display: flex;
  list-style: none;
  align-items: center; /* 縦方向の中央揃え */
}

.nav-list li {
  /* 文字の右側に線を引く */
  border-right: 2px solid #d28c5a; /* 画像に近いオレンジ・茶色系の色 */
  
  /* 線と文字の間の余白 */
  padding: 0 15px;
  
  /* 文字の高さを調整して線の長さを決める */
  line-height: 1.2; 
}

/* 一番最後の項目だけ、右側の線を消す */
.nav-list li:last-child {
  border-right: none;
}
	.contact-info {margin-left: auto; margin-top:-50px; }
}
/* スマホ用ボタンはPCでは隠す */
.menu-btn, #menu-btn-check {
  display: none;
}

/* --- スマホ・タブレット用レイアウト (960px以下など) --- */
@media screen and (max-width: 960px) {
  /* ハンバーガーボタンを表示 */
  .menu-btn {
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background-color: #f39800; /* ロゴに合わせたオレンジ等 */
  }

  /* メニューを画面外に隠す、または非表示にする */
  .nav-content {
    position: fixed;
    top: 0;
    left: 100%; /* 右側に隠しておく */
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    transition: all 0.5s;
    flex-direction: column; /* 縦並びに変更 */
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 99;
  }

  .nav-list {
    flex-direction: column;
    text-align: center;
  }

  /* チェックが入ったら（ボタンが押されたら）メニューを出す */
  #menu-btn-check:checked ~ .nav-content {
    left: 0;
  }
  
  /* 三本線のアイコン作成（CSSで描画） */
  .menu-btn span, .menu-btn span:before, .menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #fff;
    position: absolute;
  }
  .menu-btn span:before { bottom: 8px; }
  .menu-btn span:after { top: 8px; }
}

/*TOPオレンジボタン*/

.btn-orange {
  /* レイアウト */
	margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
	width: 70%;
  max-width: 300px; /* 必要に応じて調整 */
  padding: 15px 20px;
  
  /* 背景・見た目 */
  background: linear-gradient(135deg, #f39c57 0%, #e67e22 100%);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.1em;
  border-radius: 50px; /* カプセル型 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* ホバー時の演出（お好みで） */
.btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
}

/* 右側の白い丸アイコン */
.icon-play {
  position: absolute;
  right: 20px;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 三角形の部分 */
.icon-play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #e67e22; /* ボタンの色に合わせる */
  margin-left: 2px; /* 中心を微調整 */
}

/*TOPインフォ*/
.top_inf{margin: 0 auto;background-color: #fff4bc;width: 100%;height:auto;}
.relative {
  position: relative;
}
.absolute_01 {
  position: absolute;
	left: 20px;
  top:20PX;
}
@media screen and (min-width: 960px) {.absolute_02{position: absolute;
	right: 0px;
  top:50PX;}}
@media screen and (max-width: 960px) {.absolute_02 {position: absolute; bottom: 0;
  right: 0;}.relative img{width: 50%;}}


.banner-background {
  /* 1. 全体のサイズ（必要に応じて調整してください） */
  width: 100%;
  height: 400px; /* 画像の比率に合わせて調整 */
	margin-top: -10px;

  /* 2. 背景色（薄い黄色）を指定 */
  background-color: #fff4bc; 

  /* 3. 2つの画像をカンマ区切りで指定（手前に出したいものを先に書く） */
  background-image: 
    url('https://kyomachi-bal.jp/_common/img/home/img_01.png'),   /* 左上の画像 */
    url('https://kyomachi-bal.jp/_common/img/home/img_02.png');  /* 右下の画像 */

  /* 4. それぞれの画像の配置位置を指定 */
  background-position: 
    left 5% top 20%,   /* 左上から少し内側に配置 */
    right bottom;      /* 右下にぴったり配置 */

  /* 5. 画像が繰り返されないように設定 */
  background-repeat: 
    no-repeat, 
    no-repeat;

  /* 6. 画像のサイズ感を指定 */
  background-size: 
    200px auto,        /* 左上画像の幅（お好みで調整） */
    contain;           /* 右下画像はエリアに収まるように自動縮小 */
}
/* ──────────────────────────────────────────────────
   ▼ スマホ・タブレット用（画面横幅が960px以下のとき）
   ────────────────────────────────────────────────── */
@media screen and (max-width: 960px) {.banner-background {height: 100hw;}}

@media screen and (max-width: 960px) {
  .banner-background {
    /* 2つ目の画像サイズを「50% auto（要素の横幅に対して50%）」に変更 */
    background-size: 
      150px auto,      /* 1つ目（スマホに合わせて少し小さく調整） */
      150px auto;        /* 2つ目（★ここを50%に！） */
  }
}

.banner-background p{text-align:center;color:#5d3523;font-size:1.3em;padding:20px;line-height: 180%;}
.banner-background p span{color:#f39c57;font-size:1.5em;font-weight:bold;}

@media screen and (max-width: 960px) {.banner-background p{font-size:1.1em;}.banner-background p span{font-size:1.2em; margin-bottom:100px;}}

@media screen and (max-width: 450px) {.banner-background p span{margin-bottom:200px;}}

.banner-background02 {
  /* 1. 全体のサイズ（必要に応じて調整してください） */
  width: 100%;
  height: 500px; /* 画像の比率に合わせて調整 */

  /* 2. 背景色（薄い黄色）を指定 */
  background-color: #fff; 

  /* 3. 2つの画像をカンマ区切りで指定（手前に出したいものを先に書く） */
  background-image: 
    url('https://kyomachi-bal.jp/_common/img/home/img_03.png'),
    url('https://kyomachi-bal.jp/_common/img/home/imf_b.jpg');

  /* 4. それぞれの画像の配置位置を指定 */
  background-position: 
    left 5% top 0,
	  top;

  /* 5. 画像が繰り返されないように設定 */
  background-repeat: 
    no-repeat,
    no-repeat;

  /* 6. 画像のサイズ感を指定 */
  background-size: 
    300px auto, 
    100% auto;           
}
/* ──────────────────────────────────────────────────
   ▼ スマホ・タブレット用（画面横幅が960px以下のとき）
   ────────────────────────────────────────────────── */
@media screen and (max-width: 960px) {.banner-background02 {height: 100hw;}}

@media screen and (max-width: 960px) {
  .banner-background02 {
    /* 2つ目の画像サイズを「50% auto（要素の横幅に対して50%）」に変更 */
    background-size: 
      150px auto,
      100% auto;
	background-position: 
    left 5% top 0,
	  top;
  }
}

.banner-background02 p{text-align:center;color:#5d3523;font-size:1.3em;padding:20px;line-height: 180%;}

@media screen and (max-width: 960px) {.banner-background02 p{font-size:1.1em;}}

.banner-background03 {
  /* 1. 全体のサイズ（必要に応じて調整してください） */
  width: 100%;
  height: 400px; /* 画像の比率に合わせて調整 */

  /* 2. 背景色（薄い黄色）を指定 */
  background-color: #fff; 

  /* 3. 2つの画像をカンマ区切りで指定（手前に出したいものを先に書く） */
  background-image: 
    url('https://kyomachi-bal.jp/_common/img/home/img_04.png'),
    url('https://kyomachi-bal.jp/_common/img/home/kv_c.png'),
	url('https://kyomachi-bal.jp/_common/img/home/img_05.png');

  /* 4. それぞれの画像の配置位置を指定 */
  background-position: 
    right 5% top 0%,
	right 5% bottom 0%,
	left 5% top 0;

  /* 5. 画像が繰り返されないように設定 */
  background-repeat: 
    no-repeat,
	  no-repeat,
    no-repeat;

  /* 6. 画像のサイズ感を指定 */
  background-size: 
    189px auto,
	295px auto, 
    189px auto;           
}
/* ──────────────────────────────────────────────────
   ▼ スマホ・タブレット用（画面横幅が960px以下のとき）
   ────────────────────────────────────────────────── */
@media screen and (max-width: 960px) {.banner-background03 {height: 100hw;}}

@media screen and (max-width: 960px) {
  .banner-background03 {
    /* 2つ目の画像サイズを「50% auto（要素の横幅に対して50%）」に変更 */
    background-size: 
      90px auto,
      150px auto,
	  90px auto;
	background-position: 
    right 5% top 30%,
	right 0% bottom 0%,
	left 5% top 0;
  }
}

.banner-background03 p{text-align:center;color:#5d3523;font-size:1.3em;padding:20px;line-height: 180%;}

@media screen and (max-width: 960px) {.banner-background03 p{font-size:1.1em;}}


#footer{margin: 0 auto;background-image: url("../img/footer/f_b.png");background-size: cover;height: 494px;}
@media screen and (max-width: 960px) {#footer{background-image: url("../img/footer/f_b_sm.png");height: 100hw;}}

.footer_right{margin: 0 auto;margin-left: 50%;color:#5d3523;font-weight: bold;}
@media screen and (max-width: 960px) {.footer_right{margin-left: 0%; padding: 20px;}}
.footer_inf{font-size:1.3em;padding:50px 20px;}
@media screen and (max-width: 960px) {.footer_inf{font-size:1.1em;padding:10px 20px;}}
.footer_logo{font-size:1.8em;padding:20px;}
@media screen and (max-width: 960px) {.footer_logo{font-size:1.2em;}}
	
.footer_inf02{margin-top: 10%;}
@media screen and (max-width: 960px) {.footer_inf02{margin-top: 5%;}}
.footer_inf02 p{padding-top: 10px;}

	.f_tel a {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
  width: 100%; /* 番号を次の行に送りたい場合は100%、横に並べたいなら削除 */
}
	@media screen and (max-width: 960px) {.f_tel a {font-size: 1.3rem;}}

/*南風について*/

h2 {
  background: #f39800; /*背景色*/
  padding: 0.2em 1.0em; /*文字まわり（上下左右）の余白*/
  color: #fff;
  font-size: 2.0em;

  /* ▼ ここから追加：フレックスボックスで上下中央揃えにする */
  display: flex;
  align-items: center;
  /* ▲ ここまで追加 */
}

@media screen and (max-width: 960px) {h2 {font-size: 1.3em;}}

h2:before {
  content: url("../img/icon/tit.png"); /*画像のURL*/
  margin-right: 20px; /*画像右の余白*/
  
  /* ▼ 画像のサイズが大きくて文字とずれる場合は、以下を追加すると高さが揃いやすくなります */
  display: block; 
}
.center-container {
  text-align: center;
}
h3 {
  position: relative;
	color:#5d3523;
	font-size: 1.3em;padding: 0.6em;display: inline-block;
}

h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #f39800, #f39800 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #f39800, #f39800 2px, #fff 2px, #fff 4px);
}

.minamikaze {
  /* 1. 全体のサイズ（必要に応じて調整してください） */
  width: 100%;
	margin-top: -30px;

  /* 2. 背景色（薄い黄色）を指定 */
	background-color: #fff4bc; }

.minamikaze p{text-align:center;color:#5d3523;font-size:1.3em;padding:20px;line-height: 180%;}

@media screen and (max-width: 960px) {.minamikaze{margin-top: -20px;}.minamikaze p{font-size:1.1em;}}
.minamikaze p span{color:#f39c57;font-size:1.2em;font-weight:bold;}

/*精神科訪問看護とは*/
.houmon {
  /* 1. 全体のサイズ（必要に応じて調整してください） */
  width: 100%;
  height: 580px; /* 画像の比率に合わせて調整 */
	margin-top: -30px;

  /* 2. 背景色（薄い黄色）を指定 */
  background-color: #fff4bc; 

  /* 3. 2つの画像をカンマ区切りで指定（手前に出したいものを先に書く） */
  background-image: 
    url('https://kyomachi-bal.jp/_common/img/home/img_01.png'),   /* 左上の画像 */
    url('https://kyomachi-bal.jp/_common/img/home/img_02.png');  /* 右下の画像 */

  /* 4. それぞれの画像の配置位置を指定 */
  background-position: 
    left 5% top 20%,   /* 左上から少し内側に配置 */
    right bottom;      /* 右下にぴったり配置 */

  /* 5. 画像が繰り返されないように設定 */
  background-repeat: 
    no-repeat, 
    no-repeat;

  /* 6. 画像のサイズ感を指定 */
  background-size: 
    200px auto,        /* 左上画像の幅（お好みで調整） */
    contain;           /* 右下画像はエリアに収まるように自動縮小 */
}
/* ──────────────────────────────────────────────────
   ▼ スマホ・タブレット用（画面横幅が960px以下のとき）
   ────────────────────────────────────────────────── */
@media screen and (max-width: 960px) {.houmon {height: 100hw;}}

@media screen and (max-width: 960px) {
  .houmon {
    /* 2つ目の画像サイズを「50% auto（要素の横幅に対して50%）」に変更 */
    background-size: 
      150px auto,      /* 1つ目（スマホに合わせて少し小さく調整） */
      150px auto;        /* 2つ目（★ここを50%に！） */
  }
}

.houmon p{text-align:center;color:#5d3523;font-size:1.3em;padding:20px;line-height: 180%;}
.houmon p span{color:#f39c57;font-size:1.3em;font-weight:bold;}

@media screen and (max-width: 960px) {.houmon p{font-size:1.1em;}.houmon p span{font-size:1.0em; color:#f39c57;text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;}}


@media screen and (max-width: 960px) {.houmon{margin-top: -20px;}.houmon p{font-size:1.1em;}}


/*ご利用について*/
.riyou {
  /* 1. 全体のサイズ（必要に応じて調整してください） */
  width: 100%;
  height: 400px; /* 画像の比率に合わせて調整 */

  /* 2. 背景色（薄い黄色）を指定 */
  background-color: #fff; 

  /* 3. 2つの画像をカンマ区切りで指定（手前に出したいものを先に書く） */
  background-image: 
    url('https://kyomachi-bal.jp/_common/img/home/img_04.png'),
    url('https://kyomachi-bal.jp/_common/img/home/kv_c.png'),
	url('https://kyomachi-bal.jp/_common/img/home/img_05.png');

  /* 4. それぞれの画像の配置位置を指定 */
  background-position: 
    right 5% top 0%,
	left 5% bottom 0%,
	left 5% top 0;

  /* 5. 画像が繰り返されないように設定 */
  background-repeat: 
    no-repeat,
	  no-repeat,
    no-repeat;

  /* 6. 画像のサイズ感を指定 */
  background-size: 
    189px auto,
	295px auto, 
    189px auto;           
}
/* ──────────────────────────────────────────────────
   ▼ スマホ・タブレット用（画面横幅が960px以下のとき）
   ────────────────────────────────────────────────── */
@media screen and (max-width: 960px) {.riyou{height: 100hw;}}

@media screen and (max-width: 960px) {
  .riyou {
    /* 2つ目の画像サイズを「50% auto（要素の横幅に対して50%）」に変更 */
    background-size: 
      90px auto,
      150px auto,
	  90px auto;
	background-position: 
    right 5% top 10%,
	left 0% bottom 0%,
	left 5% top 0;
  }
}

.riyou p{text-align:center;color:#5d3523;font-size:1.3em;padding:20px;line-height: 180%;}

@media screen and (max-width: 960px) {.riyou p{font-size:1.1em;}}

/*ご利用について*/
.h_shop_box{width:1200px; margin:0 auto; margin-top:50px;}
.h_shop_box_left{float:left; width: 40%; border-right: 1px solid #5d3523; text-align: right; padding-right: 20px;}
.h_shop_box_right{float:right; width: 55%; text-align: left; padding-left: 20px;color:#5d3523; font-weight: bold; line-height: 180%;}
h_shop_box_right a{color:#5d3523;}
@media screen and (max-width: 767px){.h_shop_box{width:100%; margin:0 auto; margin-top:50px;}
.h_shop_box_left{float:left; width: 100%;}
.h_shop_box_right{float:left; width: 100%;}}