@charset "utf-8";
/* ==========================================================================
   うさぎのミルキー  サイト共通スタイル
   旧サイト（幅900px固定）の見た目を引き継ぎ、スマートフォンに対応させたもの
   PC / スマホの切り替えは 768px
   ========================================================================== */

/* 基本
---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, address, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; border: 0; }
body {
  color: #362e2b; background: #daeba4 url(/img/background.jpg) repeat-x;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  font-size: 13px; line-height: 1.7;
}
a { color: #330000; text-decoration: underline; }
a:hover { color: #999966; }
em { font-style: normal; }
p { margin-bottom: .5em; }
h1, h2, h3, h4, h5, h6 { font-size: 13px; font-weight: normal; }
.notext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clear { clear: both; display: block; height: 0; overflow: hidden; }
.anchor { display: block; position: relative; top: -10px; }

#container { max-width: 900px; margin: 0 auto; }

/* ヘッダー
---------------------------------------------------------------------- */
#header { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: 98px; }
#header .logo { line-height: 0; font-size: 0; }
#header .header_info { margin: 0 0 5px; line-height: 0; }
.tabnavi { position: absolute; top: 4px; right: 0; display: flex; }
.tabnavi li { margin-left: 10px; padding: 5px 0 5px 16px; background: url(/img/arrow.png) no-repeat left center; font-weight: bold; }
.tabnavi a { text-decoration: none; color: #330000; }

/* メインメニュー（PCは旧サイトと同じ画像ボタン） */
#navi ul { display: flex; }
#navi a {
  display: block; width: 180px; height: 36px; overflow: hidden; text-indent: -9999px;
  background: url(/img/navi.png) no-repeat;
}
#navi .navi01 { background-position: 0 0; }
#navi .navi02 { background-position: -180px 0; }
#navi .navi03 { background-position: -360px 0; }
#navi .navi04 { background-position: -540px 0; }
#navi .navi05 { background-position: -720px 0; }
#navi .navi01:hover, #navi .navi01[aria-current] { background-position: 0 -36px; }
#navi .navi02:hover, #navi .navi02[aria-current] { background-position: -180px -36px; }
#navi .navi03:hover, #navi .navi03[aria-current] { background-position: -360px -36px; }
#navi .navi04:hover, #navi .navi04[aria-current] { background-position: -540px -36px; }
#navi .navi05:hover { background-position: -720px -36px; }

/* その他のコンテンツ */
#submenu { margin: 3px 0 5px; }
#submenu ul { display: flex; flex-wrap: wrap; }
#submenu li { border: 1px solid #eee; background: #fff; }
#submenu a { display: block; padding: 2px 6px; text-decoration: none; }
#submenu a:hover, #submenu a[aria-current] { background: #0099ff; color: #fff; }

/* 本文＋サイド
---------------------------------------------------------------------- */
#main { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 20px; padding-bottom: 30px; }
#maincontents { flex: 0 1 680px; min-width: 0; background: #fff; }
#sidebox { flex: 0 0 200px; }

/* 本文の部品（旧サイトのクラスをそのまま使う） */
.contents { background: #fff; margin-bottom: 5px; padding: 0 10px 5px 20px; }
.contents::after { content: ""; display: block; clear: both; }
.contents a:hover img, .imgbox a:hover img { opacity: .5; }
.contents img.fig { display: block; margin: 0; }
.contents p.toptext { margin-top: 0; padding: 20px; border: 1px solid #84c40a; border-top: 0; }
.imgbox { margin-bottom: 6px; }
.imgbox_right { text-align: right; }
.box_f { position: relative; margin-top: 1.4em; padding: 1.5em 2em .5em; border: 1px solid #ccc; }
.box_f::after { content: ""; display: block; clear: both; }
.box_f h6 { position: absolute; top: -.75em; left: 1em; padding: 0 .5em; background: #fff; color: #0055bb; font-size: 105%; line-height: 1.4; }
.mb30 { margin-bottom: 30px; }
span.red { color: red; font-weight: bold; border-bottom: 1px solid red; }
span.bold, .bold { font-weight: bold; }
p.cution { color: red; font-weight: bold; border: 1px solid red; text-align: center; margin: 6px auto 10px; padding: 4px; }
p.cution2 { color: red; font-weight: bold; margin: 6px auto 10px; }
span.Submit { background: #f00; color: #fff; font-weight: bolder; padding: 0 4px; }
p.Center { text-align: center; font-weight: bold; }
p.right { text-align: right; }
img.right { float: right; margin: 0 0 8px 10px; }

/* お店のご案内 */
ul.info-shop { max-width: 600px; margin: 0 auto; text-align: center; }
ul.info-shop li { margin-bottom: 1em; }
ul.info-shop img { width: 100%; }

/* スターターキット */
#kitCont { max-width: 646px; margin: 0 auto; border-left: 2px solid #d7477a; border-right: 2px solid #d7477a; }
h2.kit-title { margin: 20px 0 0; }
.kitinner { padding: 0 15px; }
span.kit { padding-left: 15px; background: url(/img/sq_arrow.gif) no-repeat left 4px; color: #A73445; font-size: 16px; font-weight: bold; }
p.kit-item { margin: 0; color: #3076BE; font-size: 14px; font-weight: bold; }
p.kit { margin: 0 0 0 10px; padding-left: 65px; background: url(/img/kit_icon.gif) no-repeat left top; color: #A73445; }

/* ウチのうさ自慢 */
.usajimaninner { margin: 0; padding: 0 15px; border-left: 2px solid #d7477a; border-right: 2px solid #d7477a; }
.usajiman_h, .usajiman_e { height: 93px; background: url(/img/usajiman_h.gif) no-repeat left; }
.usajiman_e { background-image: url(/img/usajiman_e.gif); }
.usajimaninner .imgbox img { width: 100% !important; max-width: 550px; height: auto !important; padding: 0 0 10px !important; display: block; }
ul.usa { margin-left: 12px; }
ul.usa li { padding: 4px 10px 4px 20px; background: url(/img/sq_arrow.gif) no-repeat left center; }
p.usa { margin: 12px 0 0 12px; padding: 4px 10px 4px 20px; background: url(/img/sq_arrow_l.gif) no-repeat left top; }

/* ページ送り */
ul.pageNav01 { margin: 20px 0 10px; padding: 10px 10px 5px; background: #DAEBA4; text-align: center; }
ul.pageNav01 li { display: inline; margin: 0 2px; color: #76B244; }
ul.pageNav01 li span, ul.pageNav01 li a { display: inline-block; margin-bottom: 5px; padding: 4px 12px; background: #fff; border: 1px solid #76B244; text-decoration: none; }
ul.pageNav01 li a:hover { color: #fff; background: #76B244; }

/* 表 */
#maincontents table { max-width: 100%; }

/* トップページ
---------------------------------------------------------------------- */
.home #maincontents > .imgbox img { display: block; width: 100%; }
#news { float: right; width: 300px; margin: 0 0 10px; padding-bottom: 6px; background: #fff; }
#news .headline { margin-bottom: 6px; border-bottom: 1px solid #333; }
#news .headline h4 { font-weight: bold; text-align: center; }
#news .headline img { width: 20px; vertical-align: middle; margin-right: 4px; }
#news .block { height: 370px; overflow: auto; padding: 1em 6px 0; }
#news dl { margin-bottom: 10px; border-bottom: 1px solid #ccc; }
#news dt { font-size: 11px; }
#news dd { margin-bottom: .5em; }

#feature-area { float: left; width: 350px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
#feature-area .feature { display: block; aspect-ratio: 170 / 210; overflow: hidden; }
#feature-area .feature img { display: block; width: 100%; max-width: none; }
#feature-area a.feature:hover img { transform: translateY(-50%); opacity: 1; }

/* サイド
---------------------------------------------------------------------- */
#sidebox .imgbox { margin-bottom: 6px; }
#sidebox .side_bnr { margin: 0; padding: 5px 0; text-align: center; }
#sidebox .side_bnr img { width: 100%; max-width: 200px; }
.calendarbox { margin-bottom: 10px; background: #fff; border: 1px solid #362e2b; }
.calendarbox h2 { margin: 0 20px; border-bottom: 1px solid #362e2b; font-weight: bold; text-align: center; }
.calendarbox h2 img { width: 24px; vertical-align: middle; margin-right: 4px; }
p.calendar_right { text-align: right; padding: 3px 20px; margin: 0; }

/* フッター
---------------------------------------------------------------------- */
#footer { clear: both; background: #fff url(/img/foot.gif) no-repeat right center; padding-top: .6em; font-size: 12px; }
#footer ul { padding: .8em 1em 0; }
#footer ul li { display: inline-block; margin-right: 1em; }
#footer a { color: #000; text-decoration: none; }
#footer address { font-style: normal; padding: .2em 1em .8em; }
#footer .copyright { margin: 3px 0 0; padding: 5px; background: #333; color: #fff; text-align: center; }

/* ======================================================================
   スマートフォン（767px以下）
   ====================================================================== */
@media screen and (max-width: 767px) {
  body { font-size: 15px; background-size: auto 300px; }
  h1, h2, h3, h4, h5, h6 { font-size: 15px; }

  #header { display: block; min-height: 0; padding: 6px 8px 0; }
  #header .logo img { width: 180px; }
  #header .header_info { margin: 4px 0 0; }
  .tabnavi { top: 8px; right: 8px; }
  .tabnavi li { font-size: 12px; margin-left: 4px; }

  #navi ul { flex-wrap: wrap; gap: 4px; padding: 6px 8px 0; }
  #navi li { flex: 1 1 calc(50% - 4px); }
  #navi li:last-child { flex-basis: 100%; }
  #navi a {
    width: auto; height: auto; text-indent: 0; padding: 9px 4px; text-align: center; font-weight: bold; font-size: 14px;
    color: #4b7a12; text-decoration: none; background: #fff; border: 1px solid #b8d86b; border-radius: 4px;
  }
  #navi a:hover, #navi a[aria-current] { background: #8cc63f; color: #fff; }

  #submenu { margin: 6px 8px; }
  #submenu ul { gap: 4px; }
  #submenu li { border: 0; background: none; }
  #submenu a { padding: 4px 10px; background: #fff; border: 1px solid #cfe3a0; border-radius: 14px; font-size: 13px; }

  #main { display: block; padding: 0 8px 20px; }
  #maincontents { border-radius: 6px; overflow: hidden; }
  #sidebox { margin-top: 15px; display: grid; gap: 6px; justify-items: center; }

  .contents { padding: 0 10px 8px; }
  .contents p.toptext { padding: 12px; }
  .box_f { padding: 1.4em 1em .5em; }
  .box_f h6 { font-size: 15px; }
  img.right { float: none; display: block; margin: 8px auto; }

  #news { float: none; width: auto; margin-top: 10px; }
  #news .block { height: 260px; }
  #feature-area { float: none; width: auto; margin-bottom: 10px; }

  #kitCont, .usajimaninner { border-width: 1px; }
  .usajiman_h, .usajiman_e { height: 60px; background-size: contain; }
  .usajimaninner { padding: 0 8px; }

  #footer { background-image: none; }
  #footer ul li { display: block; }
}

/* 振込先 */
table.furikomi { width: 100%; max-width: 420px; margin: 10px auto; border-collapse: collapse; }
table.furikomi th, table.furikomi td { padding: 8px 10px; border: 1px solid #ddd; text-align: left; vertical-align: top; }
table.furikomi tr.bank th, table.furikomi tr.bank td { background: #F3D856; }
table.furikomi tr.post th, table.furikomi tr.post td { background: #FECFFB; }
table.furikomi th { width: 7.5em; white-space: nowrap; }