@charset "UTF-8";

/*
 * Sales Report MarkII
 * basic_set.css
 * basic_set.css::[]
 * 2024/12/10 M2 INC.
 # Ver.2006
 * 
 * サイト全体を通しての基本的なセッティング
 * ---------------------------------------------- */

@page {
   size:    21.0cm 29.7cm;
   margin:  0.5cm;
}
@media print {
  body{ font-size: 9pt; }
}

/*
 * 要素の基本設定
 * ----------------------------------------------------------- */
html {
  font-size: 62.5%; /* 基本(1rem)を10px に設定する */
  scroll-behavior:  smooth;  /* smooth-scroll */
}


/* ----------------------------------------------------------- 
  【ベーシッククラス】の定義
 * ----------------------------------------------------------- */

/*
 * リンク色 文字色 素のタグのデフォルト
 * -------------------------------------------------- */
body {
  background-color: #fff;
  color:            #3c3c3c;
  font-family:      "メイリオ", "游ゴシック Medium", YuGothic, "游ゴシック体", Sans-Serif;
  text-align:       left;
  line-height:      1.5;
  font-size:        1.2rem;    /* 基本は 12px とする */
}

/* レスポンシブ化_202410 */

/* 横揺れ防止 */
@media all and (max-width: 800px) {

  body {
    overflow-x: hidden;
    overflow-y: scroll;
  }

}

/*
 * 基本的なパーツのスタイル定義
 * ------------------------------------------- */

/* CSS知識 メモ 後で削除
 * font-family はinput, textarea, select は継承しないこと注意
 * ---------------------------------------------------------- */
input, textarea, select {
  font-family: "メイリオ", "游ゴシック Medium", YuGothic, "游ゴシック体", Sans-Serif;
  font-weight: normal;
}


input[type="text"], input[type="password"] {
  height: 26px;
  line-height: 1.2;
  padding: 2px 4px 2px 4px;
  border: solid 1px #999;
  border-radius: 2px
}

/* --- input type="date" の共通レイアウト --- */
input[type="date"] {
  width: 120px;
  height: 24px;
  font-size: 1.2rem;
}

@media all and (max-width: 599px) {

  input[type="date"] { /* スマホではフォントサイズが大きいため */
    width: 140px;
    font-size: 1.4rem !important;
  }
  
}

textarea {
  padding: 4px;
  line-height: 1.6;
  overflow-y: auto;
  border: solid 1px #999;
  border-radius: 2px
}

select {
  height: 26px;
  border: 1px solid #999;
  border-radius: 2px;
}

ul, dl, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  box-sizing: border-box;
}

/*
 * スペースの無いアルファベットも改行する指定
 * -------------------------------------------- */
li, p, dt, dd {
  word-break: break-all; 
}

/*
 * 全体を通しての文字、リンク色全般デフォルト指定 
 * -------------------------------------------------- */
a {
  text-decoration: none;
}

a:visited     { color: #3c3c3c; text-decoration: none; }
a:hover       { color: #3c3c3c; }
a:active      { color: #3c3c3c; text-decoration: none; }
a:link        { color: #3c3c3c; text-decoration: none; }
a.now:link    { color: #3c3c3c; text-decoration: none; }
a.now:visited { color: #3c3c3c; text-decoration: none; }
a.now:hover   { color: #3c3c3c; }
a.now:active  { color: #3c3c3c; text-decoration: none; }

/*
 *  文字色
 * -------------------- */
.hp-red     { color: #E62727 !important;}
.hp-orange  { color: #ffa500 !important;}
.hp-yellow  { color: #ffd700 !important;}
.hp-green   { color: #91BD09 !important;}
.hp-blue    { color: #2981E4 !important;}
.hp-purple  { color: #9F4CE7 !important;}

a.hp-col_red    { color: #E62727 !important;}
a.hp-col_orange { color: #ffa500 !important;}
a.hp-col_yellow { color: #ffd700 !important;}
a.hp-col_green  { color: #91BD09 !important;}
a.hp-col_blue   { color: #2981E4 !important;}
a.hp-col_purple { color: #9F4CE7 !important;}

/* 背景色縞模様 */
.hp-even-col {
  background-color: #f3f3f3;
}

/* つなぎ */
.red     { color: #E62727 !important;}
.orange  { color: #ffa500 !important;}
.yellow  { color: #ffd700 !important;}
.green   { color: #91BD09 !important;}
.blue    { color: #2981E4 !important;}
.purple  { color: #9F4CE7 !important;}