@charset "utf-8";

/* =========================================================
   ERAMINAN.jp / Index common 2-column base
   Based on: eraminan_default.css (2026-08-15)
   ========================================================= */

/* ===== Page base ===== */

body {
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 14px;
  font-style: normal;
  color: #444444;
  background-color: #FFFAF0;

  /*
   * Background images from the original eraminan_default.css are not
   * carried here because this stylesheet now lives in /common_css/ and
   * those relative paths are ERAMINAN-page-specific. They will be handled
   * by the appropriate page/section stylesheet after the asset locations
   * are confirmed.
   */
}

a {
  color: #0000CC;
  text-decoration: none;
}

a:active,
a:hover {
  color: #FF7700;
  text-decoration: none;
}

/* ===== Site frame ===== */

#container {
  width: 950px;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0 auto;
  border: 1px solid #999999;
  background-color: #F5F5F5;

  display: flex;
  flex-direction: column;
}

header {
  width: 880px;
  margin: 0 auto 30px auto;
  height: 100px;
}

#main {
  width: 930px;
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  align-items: flex-start;
  flex: 1;
}

/* ===== Header / breadcrumb ===== */

#head_title h1 {
  padding: 15px 15px 0 50px;
}

#head_title h1 a {
  color: #444444;
  font-size: 20px;
}

#head_title p {
  margin: -10px auto 25px 70px;
  font-size: 13px;
}

#menu {
  width: 95%;
  margin: 0 auto 15px auto;
  padding: 10px 0 0 0;
  border-top: 1px solid #777777;
  border-bottom: 1px solid #777777;
  height: 37px;
}

#menu a,
#menu span {
  position: relative;
  top: 8px;
  color: #444444;
  font-size: 13px;
}

#menu a:hover {
  color: #FF7700;
}

/* ===== Two-column layout ===== */

#column_R {
  order: 2;
  flex: 0 0 570px;
  margin: 30px 20px 30px 10px;
  padding: 20px 0 20px 10px;
}

#column_L {
  order: 1;
  flex: 0 0 290px;
  margin: 30px 10px 30px 20px;
}

/* ===== Footer / attribution ===== */

#add {
  text-align: right;
  padding-right: 40px;
  font-size: small;
}

footer {
  width: 880px;
  margin: 0 auto;
  border-top: 1px solid #777777;
  font-size: 13px;
}

#copyright {
  margin-top: 10px;
  margin-bottom: 15px;
  text-align: center;
  line-height: 120%;
}

#copyright a {
  color: #00008B;
  font-weight: bold;
}

#site_history {
  text-align: center;
}

/* ===== Mobile menu base ===== */

#menu_toggle {
  display: none;
}

/*
 * The original eraminan_default.css contains responsive rules that
 * currently collapse the two columns at max-width: 959px.
 * The site specification is now:
 *   960px and above : 2 columns
 *   959px and below : narrow 2 columns
 *   800px and below : 1 column + hamburger menu
 *
 * Responsive behavior will therefore be rebuilt separately rather than
 * carrying the old max-width: 959px rules into this base file.
 */

/*
 * The following declarations existed in eraminan_default.css but are not
 * part of the 2-column page frame and are intentionally not carried here:
 *
 * form fieldset / form legend
 * blockquote
 * hr
 *
 * They will be reviewed separately when their actual usage is confirmed.
 */


/* =========================================================
   Responsive
   960px以上   : 2カラム
   959px～801px: 狭い2カラム
   800px以下   : 1カラム + ハンバーガーメニュー
   ========================================================= */

/* ---------------------------------------------------------
   959px～801px : narrow two-column
   --------------------------------------------------------- */

@media (max-width: 959px) and (min-width: 801px) {

  #container {
    width: 100%;
    max-width: 950px;
  }

  header {
    width: calc(100% - 40px);
    max-width: 880px;
    box-sizing: border-box;
  }

  #main {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 10px 0 10px;
  }

  #column_R {
    flex: 1 1 64%;
    min-width: 0;
    margin: 25px 10px 30px 5px;
    padding: 20px 0 20px 10px;
    box-sizing: border-box;
  }

  #column_L {
    flex: 1 1 32%;
    min-width: 0;
    margin: 25px 5px 30px 10px;
    box-sizing: border-box;
  }

  footer {
    width: calc(100% - 40px);
    max-width: 880px;
    box-sizing: border-box;
  }

}

/* ---------------------------------------------------------
   800px以下 : one-column + hamburger menu
   --------------------------------------------------------- */

@media (max-width: 800px) {

  #container {
    width: 100%;
    max-width: 950px;
  }

  header {
    width: calc(100% - 30px);
    max-width: 880px;
    height: auto;
    margin-bottom: 20px;
    box-sizing: border-box;
  }

  #main {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px 0 15px;
    flex-direction: column;
  }

  /*
   * 固定表示するハンバーガーメニューと本文が重ならないよう、
   * 右側に操作ボタン分の余白を確保する。
   */
  #column_R {
    order: 1;
    flex: none;
    width: 100%;
    box-sizing: border-box;
    margin: 20px 0;
    padding: 20px 50px 20px 10px;
  }

  #column_L {
    order: 2;
    flex: none;
    width: 100%;
    box-sizing: border-box;
    margin: 20px 0;
  }

  footer {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
  }

  #menu_toggle {
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 7px;
    border: 1px solid #777777;
    background-color: #F5F5F5;
    cursor: pointer;
  }

  #menu_toggle span:not(.menu_label) {
    display: block;
    width: 24px;
    height: 2px;
    margin: 4px auto;
    background-color: #444444;
  }

  #menu_toggle .menu_label {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    line-height: 1;
    color: #444444;
  }


/*
 * 800px以下では、#menu_toggle を header の直後に表示する。
 * HTML上も header → #menu_toggle → #main の順なので、
 * ボタンは通常フローで上部に配置される。
 */

  #column_L {
    display: none;
  }

  #column_L.is_open {
    display: block;
    order: 0;
  }

}

/*
 * 旧 eraminan_default.css のレスポンシヴ指定は、
 * max-width: 959px で1カラム化する内容だったため、
 * 現在のサイト仕様（959px以下は狭い2カラム、
 * 800px以下で1カラム）とは一致しない。
 *
 * 旧指定は削除せず、仕様変更の記録としてこのコメントに残す。
 */