@import url('./base.css');
/*基本要素スタイル*/
@import url('./layout.css');
/*共通レイアウト*/

/*--------------------------------------
  見出し・タイトル
--------------------------------------*/

#header{
  background-color: #fdf9f5;
}

/*--------------------------------------
  情報ボックス
--------------------------------------*/

dl#info {
  display: block;
  /* 縦並び */
  font-size: 1.2em;
  border-top: 2px solid #fff;
  margin: 1em 0;
  padding: 0 2.5em;
  padding: 0 0em;
}

dl#info dt {
  background-color: #eeb255;
  color: #fff;
  padding: 0.8em 1em;
  /* 上下少し広め */
  border: 2px solid #fff;
  margin: 0;
  display: block;
  font-weight: bold;
  border-radius: 6px;
  /* 少し丸みをつけて柔らかい印象 */
}

dl#info dd {
  padding: 0.8em 5em;
  margin: 0 0 1.2em 0;
  border: 2px solid #fff;
  border-top: none;
  display: block;
  border-radius: 0 0 6px 6px;
  background-color: #f9f9f9;

}


/*--------------------------------------
  ナビゲーション
--------------------------------------*/
#nav {
  text-align: right;
  font-size: 1.1em;
  margin: 10px 0;
}

#nav a {
  text-decoration: none;
  margin-left: 15px;
}

#nav a:visited {
  color: #999;
}

#nav a:hover {
  color: #C3B071;
  opacity: 0.6;
}

/*--------------------------------------
  円形の料金ラベル
--------------------------------------*/
#fee {
  position: fixed;
  /* ← スクロールしても固定 */
  top: 300px;
  right: 20px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #88a868;
  color: #FFF;
  text-align: center;
  line-height: 30px;
  /*line-height: 120px;*/
  font-size: 1.2em;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0.9;

    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#fee span{
  font-size:small;
}
/*--------------------------------------
  チラシ画像
--------------------------------------*/
#chirashi {
  text-align: center;
  margin: 20px 0;
}

#chirashi img {
  width: 60%;
  max-width: 300px;
}

/*--------------------------------------
  小さな注記
--------------------------------------*/
.hp {
  font-size: small;
  color: #FFF;
  background-color: #999;
  text-decoration: none;
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

a.hp:link {
  color: #FFF;
}

/*--------------------------------------
  レスポンシブ
--------------------------------------*/
@media screen and (max-width: 768px) {
  #wrapper {
    margin: 10px;
    padding: 10px;
    box-sizing: border-box
  }

  #fee {
    margin-top:-150px;

  }

  #nav {
    text-align: center;
    font-size: 1em;
    margin: 10px 0;
  }

  dl#info {
    display: flex;
    flex-direction: column; /* 縦並び */
    margin: 1em 0;
    box-sizing: border-box; /* 幅の計算に padding を含める */
  }

  dl#info dt,
  dl#info dd {
    display: block;
    width: 100%;
    flex: unset;
    border-left: none;
    border-radius: 6px;
    padding: 0.6em 1em;   /* 左右の余白 */
    margin-bottom: 0.5em;
    box-sizing: border-box; /* 幅計算に含める */
  }

  dl#info dd {
    padding-left: 1em;      /* 左スペース */
    background-color: #f9f9f9;
    border-top: none;
  }


}