/* ============================================================
   RELI.STYLE サイト共通スタイル ── layout2
   ------------------------------------------------------------
   使っているサイト：
     reli-style.com ／ tsuitachi-coffee-and-tea.com

   2026-10-12 自社で書き起こし。
   layout1 と役割は同じ。違うのは段落まわりの余白の取り方で、
   こちらは「段落の上に余白を置く」組み方。文章量の多いページで
   行間が詰まって見えないようにするため。
   土台は Bootstrap（MITライセンス）。
   ============================================================ */




/* 使っている色と寸法（控え）
     --h1-sm                36px
     --h1-md                40px
     --h1-lg                46px
     --h2-sm                30px
     --h2-md                32px
     --h2-lg                35px
     --h3-sm                25px
     --h3-md                25px
     --h3-lg                27px
     --h4-sm                21px
     --h4-md                21px
     --h4-lg                21px
     --container            980px
     --container-nav        1010px
     --btn-primary          #51a8dd
     --btn-primary-hover    #7cbde5
     --btn-info             #78c2c4
     --btn-info-hover       #9bd2d4
     --btn-success          #7ba23f
     --btn-success-hover    #95bd57
     --btn-warning          #f7c242
     --btn-warning-hover    #f9d273
     --btn-default-line     #ababab
     --btn-default-hover    #eeeeee
 */

/* ── 1. 見出しの大きさ ────────────────────── */
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h4 { font-size: 21px; }

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h3 { font-size: 25px; }
  h4 { font-size: 21px; }
}

@media (min-width: 992px) {
  h1 { font-size: 46px; }
  h2 { font-size: 35px; }
  h3 { font-size: 27px; }
  h4 { font-size: 21px; }
}


/* ── 2. 本文と画像 ────────────────────────
   layout1 と違い、段落は「上に30px・下に15px」。
   見出しの直後だけは詰める（下の 3. 参照）。 */
p   { font-size: 14px; margin-top: 30px; margin-bottom: 15px; }
p + p { margin-top: 30px; }
img { max-width: 100%; }


/* ── 3. 見出しと本文の間 ─────────────────── */
h2 + h2,
h2 + h3,
h2 + h4,
h3 + h3,
h3 + h4,
h4 + h4 { margin-top: -15px; }      /* 見出しが続くときは詰める */

h1 + p,
h2 + p,
h3 + p,
h4 + p { margin-top: -5px; }        /* 見出しの直後の本文も詰める */

div[class*="qhm-align-"] h1 + div[class*="qhm-align-"] > p:first-child,
div[class*="qhm-align-"] h2 + div[class*="qhm-align-"] > p:first-child,
div[class*="qhm-align-"] h3 + div[class*="qhm-align-"] > p:first-child,
div[class*="qhm-align-"] h4 + div[class*="qhm-align-"] > p:first-child { margin-top: -5px; }

.img_margin + p,
.img_margin + div[class*="qhm-align-"] > p:first-child { margin-top: 5px; }

p + h1,
ul + h1,
ol + h1,
.row + h1,
p + div[class*="qhm-align-"] h1,
ul + div[class*="qhm-align-"] h1,
ol + div[class*="qhm-align-"] h1,
.row + div[class*="qhm-align-"] h1 {
  margin-top: 70px;
}

p + h2,
ul + h2,
ol + h2,
.row + h2,
p + div[class*="qhm-align-"] h2,
ul + div[class*="qhm-align-"] h2,
ol + div[class*="qhm-align-"] h2,
.row + div[class*="qhm-align-"] h2 {
  margin-top: 65px;
}

p + h3,
ul + h3,
ol + h3,
.row + h3,
p + div[class*="qhm-align-"] h3,
ul + div[class*="qhm-align-"] h3,
ol + div[class*="qhm-align-"] h3,
.row + div[class*="qhm-align-"] h3 {
  margin-top: 50px;
}

p + h4,
ul + h4,
ol + h4,
.row + h4,
p + div[class*="qhm-align-"] h4,
ul + div[class*="qhm-align-"] h4,
ol + div[class*="qhm-align-"] h4,
.row + div[class*="qhm-align-"] h4 {
  margin-top: 20px;
}

div[class*="qhm-align-"] + div[class*="qhm-align-"] h1,
div[class*="qhm-align-"] + h1 {
  margin-top: 70px;
}

div[class*="qhm-align-"] + div[class*="qhm-align-"] h2,
div[class*="qhm-align-"] + h2 {
  margin-top: 65px;
}

div[class*="qhm-align-"] + div[class*="qhm-align-"] h3,
div[class*="qhm-align-"] + h3 {
  margin-top: 50px;
}

div[class*="qhm-align-"] + div[class*="qhm-align-"] h4,
div[class*="qhm-align-"] + h4 {
  margin-top: 20px;
}

/* ── 4. 枠の端の余白 ─────────────────────── */
.qhm-block > p:first-child,
.qhm-block > h1:first-child,
.qhm-block > h2:first-child,
.qhm-block > h3:first-child,
.qhm-block > h4:first-child,
.qhm-block > div[class*="qhm-align-"]:first-child > p:first-child,
.qhm-block > div[class*="qhm-align-"]:first-child > h1:first-child,
.qhm-block > div[class*="qhm-align-"]:first-child > h2:first-child,
.qhm-block > div[class*="qhm-align-"]:first-child > h3:first-child,
.qhm-block > div[class*="qhm-align-"]:first-child > h4:first-child,
.qhm-block > ul:first-child,
.qhm-block > ol:first-child {
  margin-top: 15px;
}

.qhm-block > ul:last-child,
.qhm-block > ol:last-child {
  margin-bottom: 15px;
}

.qhm-bs-block > p:first-child,
.qhm-bs-block > h1:first-child,
.qhm-bs-block > h2:first-child,
.qhm-bs-block > h3:first-child,
.qhm-bs-block > h4:first-child,
.qhm-bs-block > div[class*="qhm-align-"]:first-child > p:first-child,
.qhm-bs-block > div[class*="qhm-align-"]:first-child > h1:first-child,
.qhm-bs-block > div[class*="qhm-align-"]:first-child > h2:first-child,
.qhm-bs-block > div[class*="qhm-align-"]:first-child > h3:first-child,
.qhm-bs-block > div[class*="qhm-align-"]:first-child > h4:first-child,
.qhm-bs-block > ul:first-child,
.qhm-bs-block > ol:first-child {
  margin-top: 0;
}

.qhm-bs-block > p:last-child,
.qhm-bs-block > h1:last-child,
.qhm-bs-block > h2:last-child,
.qhm-bs-block > h3:last-child,
.qhm-bs-block > h4:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > p:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > h1:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > h2:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > h3:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > h4:last-child,
.qhm-bs-block > ul:last-child,
.qhm-bs-block > ol:last-child {
  margin-bottom: 0;
}

.container-fluid > p:first-child,
div[class^="col-sm-"] > p:first-child {
  margin-top: 15px;
}


/* ── 5. 中身の幅 ──────────────────────────── */
.container     { max-width: 980px; }
nav .container { max-width: 1010px; }

@media (min-width: 768px) {
  .container { width: inherit; }
}


/* ── 6. トップの大きな見出し ───────────────── */
.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h1,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h1 {
  color: inherit;
  font-size: 36px;
  font-weight: normal;
  line-height: 1.7em;
  margin: 15px 0;
}

@media (min-width: 768px) {
.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h1,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h1 {
  font-size: 40px;
}
}

@media (min-width: 992px) {
.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h1,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h1 {
  font-size: 46px;
}
}

.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h2,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h2 {
  color: inherit;
  font-size: 32px;
  font-weight: normal;
  line-height: 1.7em;
  margin: 15px 0;
}

@media (min-width: 992px) {
.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h2,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h2 {
  font-size: 35px;
}
}

.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h3,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h3 {
  color: inherit;
  font-size: 27px;
  font-weight: normal;
  line-height: 1.7em;
  margin: 15px 0;
}

.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h1 > small,
.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h2 > small,
.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h3 > small,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h1 > small,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h2 > small,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h3 > small {
  color: inherit;
  font-weight: normal;
  line-height: 1.7em;
  margin: 15px 0;
}

.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid p,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid p {
  font-size: 18px;
}


/* ── 7. ボタン ────────────────────────────── */
.btn    { border-radius: 0; padding: 10px 35px; overflow: hidden; }
.btn-lg { padding: 16px 35px; }
.btn-sm { padding: 8px 20px; }
.btn-round { border-radius: 4px; }

.btn-default { color: #000000; background-color: #ffffff; border: 1px solid #ababab; }
.btn-default:hover,
.btn-default:focus { background-color: #eeeeee; }

.btn-primary { background-color: #51a8dd; border: 1px solid #51a8dd; }
.btn-primary:hover,
.btn-primary:focus { background-color: #7cbde5; border: 1px solid #7cbde5; }

.btn-info { background-color: #78c2c4; border: 1px solid #78c2c4; }
.btn-info:hover,
.btn-info:focus { background-color: #9bd2d4; border: 1px solid #9bd2d4; }

.btn-success { background-color: #7ba23f; border: 1px solid #7ba23f; }
.btn-success:hover,
.btn-success:focus { background-color: #95bd57; border: 1px solid #95bd57; }

.btn-warning { background-color: #f7c242; border: 1px solid #f7c242; }
.btn-warning:hover,
.btn-warning:focus { background-color: #f9d273; border: 1px solid #f9d273; }


/* ── 8. ナビの中のボタン ─────────────────── */
nav.navbar-default { line-height: normal; }
.navbar-btn > .btn { padding: 6px 12px; font-size: inherit; }
.navbar-btn > .btn.btn-ghost,
.navbar-btn > .btn.btn-ghost-w { padding: 6px 20px; }

@media (min-width: 768px) {
  .navbar-btn { padding-left: 15px; padding-right: 15px; }
}


/* ── 9. こまごまとしたもの ───────────────── */
.handline { background-image: url(hatch.png); background-repeat: repeat; }
.label    { padding: .4em .6em .3em; }


/* ============================================================
   追補 ── ほかのサイトが使っている部品
   ------------------------------------------------------------
   2026-10-13 追加。木と本では使っていないが、ROUTii BASE などが
   使っているため、共通ファイルからは外さない。
   （ROUTii で .btn-danger が385か所使われていた。木と本で未使用
     だからといって消すと、他店の見た目が崩れる）
   ============================================================ */

/* ── ボタンの色違い（danger） ── */
.btn-danger {
  background-color: #eb7a77;
  border: 1px solid #eb7a77;
}
.btn-danger:hover,
.btn-danger:focus {
  background-color: #f2a5a3;
  border: 1px solid #f2a5a3;
}
.btn-danger.btn-ghost {
  color: #eb7a77;
  border-color: #eb7a77;
}
.btn-danger.btn-ghost:hover,
.btn-danger.btn-ghost:focus {
  background-color: #eb7a77;
  color: #fff;
}
.btn-default.btn-ghost-w,
.btn-primary.btn-ghost-w,
.btn-info.btn-ghost-w,
.btn-success.btn-ghost-w,
.btn-warning.btn-ghost-w,
.btn-danger.btn-ghost-w {
  color: #fff;
  border-color: #fff;
}
.btn-default.btn-ghost-w:hover,
.btn-default.btn-ghost-w:focus,
.btn-primary.btn-ghost-w:hover,
.btn-primary.btn-ghost-w:focus,
.btn-info.btn-ghost-w:hover,
.btn-info.btn-ghost-w:focus,
.btn-success.btn-ghost-w:hover,
.btn-success.btn-ghost-w:focus,
.btn-warning.btn-ghost-w:hover,
.btn-warning.btn-ghost-wfocus,
.btn-danger.btn-ghost-w:hover,
.btn-danger.btn-ghost-w:focus {
  background-color: #fff;
  color: #666 ;
}
.btn-danger.btn-gradient {
  background: -moz-linear-gradient(top,#EB7A77 0%,#E53030);
  background: -webkit-gradient(linear, left top, left bottom, from(#EB7A77), to(#E53030));
  background: linear-gradient(#EB7A77,#E53030);
  border-color: #E53030;
  color:#fff;
}
.btn-danger.btn-gradient:hover {
  background: -moz-linear-gradient(top,#EB7A77 0%,#EB7A77);
  background: -webkit-gradient(linear, left top, left bottom, from(#EB7A77), to(#EB7A77));
  background: linear-gradient(#EB7A77,#EB7A77);
}

/* ── ボタンの枠線だけ版（ghost） ── */
.btn.btn-ghost,
.btn.btn-ghost-w {
  background-color: transparent;
  border-radius: 30px;
  border-width: 3px;
  border-style: solid;
}
.btn-default.btn-ghost {
  color: #ababab;
  border-color: #ababab;
}
.btn-default.btn-ghost:hover,
.btn-default.btn-ghost:focus {
  background-color: #ababab;
  color: #fff;
}
.btn-primary.btn-ghost {
  color: #51a8dd;
  border-color: #51a8dd;
}
.btn-primary.btn-ghost:hover,
.btn-primary.btn-ghost:focus {
  background-color: #51a8dd;
  color: #fff;
}
.btn-info.btn-ghost {
  color: #78c2c4;
  border-color: #78c2c4;
}
.btn-info.btn-ghost:hover,
.btn-info.btn-ghost:focus {
  background-color: #78c2c4;
  color: #fff;
}
.btn-success.btn-ghost {
  color: #7ba23f;
  border-color: #7ba23f;
}
.btn-success.btn-ghost:hover,
.btn-success.btn-ghost:focus {
  background-color: #7ba23f;
  color: #fff;
}
.btn-warning.btn-ghost {
  color: #f7c242;
  border-color: #f7c242;
}
.btn-warning.btn-ghost:hover,
.btn-warning.btn-ghost:focus {
  background-color: #f7c242;
  color: #fff;
}

/* ── ボタンのグラデーション版 ── */
.btn.btn-gradient {
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
}
.btn-default.btn-gradient {
  background: -moz-linear-gradient(top,#fff 0%,#eee);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background: linear-gradient(#fff,#eee);
  border-color: #DDD;
  color:#000;
}
.btn-default.btn-gradient:hover {
  background: -moz-linear-gradient(top,#fff 0%,#fff);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
  background: linear-gradient(#fff,#fff);
}
.btn-primary.btn-gradient {
  background: -moz-linear-gradient(top,#51a8dd 0%,#006DDB);
  background: -webkit-gradient(linear, left top, left bottom, from(#51a8dd), to(#006DDB));
  background: linear-gradient(#51a8dd,#006DDB);
  border-color: #006DDB;
  color:#fff;
}
.btn-primary.btn-gradient:hover {
  background: -moz-linear-gradient(top,#51a8dd 0%,#51a8dd);
  background: -webkit-gradient(linear, left top, left bottom, from(#51a8dd), to(#51a8dd));
  background: linear-gradient(#51a8dd,#51a8dd);
}
.btn-info.btn-gradient {
  background: -moz-linear-gradient(top,#8FE3E8 0%,#00ACBF);
  background: -webkit-gradient(linear, left top, left bottom, from(#8FE3E8), to(#00ACBF));
  background: linear-gradient(#8FE3E8,#00ACBF);
  border-color: #00ACBF;
  color:#fff;
}
.btn-info.btn-gradient:hover {
  background: -moz-linear-gradient(top,#8FE3E8 0%,#8FE3E8);
  background: -webkit-gradient(linear, left top, left bottom, from(#8FE3E8), to(#8FE3E8));
  background: linear-gradient(#8FE3E8,#8FE3E8);
}
.btn-success.btn-gradient {
  background: -moz-linear-gradient(top,#62c462 0%,#51a351);
  background: -webkit-gradient(linear, left top, left bottom, from(#62c462), to(#51a351));
  background: linear-gradient(#62c462,#51a351);
  border-color: #51a351;
  color:#fff;
}
.btn-success.btn-gradient:hover {
  background: -moz-linear-gradient(top,#62c462 0%,#62c462);
  background: -webkit-gradient(linear, left top, left bottom, from(#62c462), to(#62c462));
  background: linear-gradient(#62c462,#62c462);
}
.btn-warning.btn-gradient {
  background: -moz-linear-gradient(top,#F4CA66 0%,#F4AB00);
  background: -webkit-gradient(linear, left top, left bottom, from(#F4CA66), to(#F4AB00));
  background: linear-gradient(#F4CA66,#F4AB00);
  border-color: #F4AB00;
  color:#fff;
}
.btn-warning.btn-gradient:hover {
  background: -moz-linear-gradient(top,#F4CA66 0%,#F4CA66);
  background: -webkit-gradient(linear, left top, left bottom, from(#F4CA66), to(#F4CA66));
  background: linear-gradient(#F4CA66,#F4CA66);
}

/* ── ボタンのいちばん小さい版 ── */
.btn-xs {
  padding: 4px 13px;
}
input.btn {
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ── 枠・ナビ・入力欄の下地 ── */
ins {
  text-decoration: none;
  border-bottom: 1px solid;
  padding-bottom: 2px;
}
[data-plugin=search2] > div.input-group::before {
  top: 9px!important;
}
[data-plugin=search2] > div.form-group::before {
  top: 5px!important;
}
.form-control {
  font-weight: normal;
  border-radius: 0;
  box-shadow: none;
}

/* ── 検索語のハイライト ── */
strong.word0 {
  background-color:#FFFF66;
}
strong.word1 {
  background-color:#A0FFFF;
}
strong.word2 {
  background-color:#99FF99;
}
strong.word3 {
  background-color:#FF9999;
}
strong.word4 {
  background-color:#FF66FF;
}
strong.word5 {
  background-color:#880000;
  color:white;
}
strong.word6 {
  background-color:#00AA00;
  color:white;
}
strong.word7 {
  background-color:#886800;
  color:white;
}
strong.word8 {
  background-color:#004699;
  color:white;
}
strong.word9 {
  background-color:#990099;
  color:white;
}

/* ── そのほか ── */
.qhm-bs-block > p:last-child,
.qhm-bs-block > h1:last-child,
.qhm-bs-block > h2:last-child,
.qhm-bs-block > h3:last-child,
.qhm-bs-block > h4:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > p:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > h1:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > h2:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > h3:last-child,
.qhm-bs-block > div[class*="qhm-align-"]:last-child > h4:last-child,
.qhm-bs-block > ul:last-child,
.qhm-bs-blocl > ol:last-child {
  margin-bottom: 0;
}
blockquote > p:first-child {
  margin-top: 0;
}
.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h1 > small,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h1 >small,
.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h2 > small,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h2 >small,
.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid h3 > small,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid h3 > small {
  color: inherit;
  font-weight: normal;
  line-height: 1.7em;
  margin: 15px 0;
}
dd,
dt {
  line-height: 2em;
}
ul.nav-tabs > li {
  padding: 0;
}