/* ---------------------------------- */
/* Style001.css                       */
/* メイン スタイルシート              */
/* ---------------------------------- */
/* 全HTMLはこのCSSを参照し、          */
/* 子CSSを直接参照しない              */
/* ---------------------------------- */
@charset "utf-8";
@import url("Code.css");
@import url("Color_Background.css");
@import url("Color_Font.css");
@import url("FontSize.css");
@import url("Link.css");
@import url("List.css");
@import url("Table_Border.css");

/* ---------------------------------- */
/* 本体                               */
/* ---------------------------------- */
body {
  background:           #FFFFFF;
  margin-left:          90px;
  margin-right:         20px;
}

/* ---------------------------------- */
/* 目次(<div id="toc">)               */
/* ---------------------------------- */
div#toc ul
{
  margin-top:           0px;
  margin-bottom:        0px;
}

/* ---------------------------------- */
/* 見出し                             */
/* ---------------------------------- */
h1 {
  font-size:            255%;
  font-weight:          bold;
  color:                #FFFFFF;
  letter-spacing:       0.2em;
  margin-top:           24px;
  margin-bottom:        24px;
  margin-left:          -70px;
  padding:              12px;
  background-color:     #CC9999;
}

h2 {
  font-size:            210%;
  font-weight:          bold;
  letter-spacing:       0.07em;
  margin-top:           21px;
  margin-bottom:        21px;
  margin-left:          -55px;
  border-bottom-style:  double;
  border-bottom-width:  5px;
  border-bottom-color:  #CC9999;
}

h3 {
  font-size:            165%;
  font-weight:          bold;
  margin-top:           18px;
  margin-bottom:        15px;
  margin-left:          -40px;
  border-bottom-style:  solid;
  border-bottom-width:  3px;
  border-bottom-color:  #CC9999;
}

h4 {
  font-size:            135%;
  font-weight:          bold;
  margin-top:           15px;
  margin-bottom:        12px;
  margin-left:          -30px;
  border-bottom-style:  dashed;
  border-bottom-width:  2px;
  border-bottom-color:  #CC9999;
}

h5, summary.link {
  font-size:            120%;
  font-weight:          bold;
  margin-top:           12px;
  margin-bottom:        9px;
  margin-left:          -20px;
  border-bottom-style:  dotted;
  border-bottom-width:  1px;
  border-bottom-color:  #CC9999;
}

h6, summary {
  font-size:            105%;
  font-weight:          bold;
  margin-top:           9px;
  margin-bottom:        6px;
  margin-left:          -10px;
}

/* ---------------------------------- */
/* 画像                               */
/* ---------------------------------- */
img {
  margin:               10px;
}

/* ---------------------------------- */
/* 水平線                             */
/* ---------------------------------- */
hr {
  margin-top:           30px;
  margin-bottom:        30px;
  margin-left:          -70px;
  height:               6px;
  border:               none;
  background-color:     #CC9999;
  background-image:     url(https://raw.githubusercontent.com/Takaha-Q/Takaha-Q.github.io/main/_horizon.png);
}

/* ---------------------------------- */
/* 文字装飾                           */
/* ---------------------------------- */
/* ボールド (<#### class="b">, <b>, <#### class="strong">, <strong>) */
.b, b, .strong, strong {
  font-weight:          bold;
}

/* イタリック (<#### class="i">, <i>, <#### class="em">, <em>) */
.i, i, .em, em {
  font-style:           italic;
  padding-left:         -1px;
  padding-right:        3px;
}

/* 下線 (<#### class="u">, <u>) */
.u, u {
  text-decoration-line: underline;
}
  
/* 取り消し線 (<#### class="s">, <s>, <#### class="del">, <del>) */
.s, s, .del, del {
  text-decoration-line: line-through;
}

/* ---------------------------------- */
/* 段落                               */
/* 改行を記述通りに反映し、           */
/* 行頭の空白を削除する               */
/* ---------------------------------- */
/* 段落 (<#### class="pre">) */
.pre {
  white-space: pre-line;
}

/* ---------------------------------- */
/* 段組み                             */
/* ---------------------------------- */
/* 段組み (<#### class="container">) */
.container {
  column-count: 3;
}

/* ---------------------------------- */
/* 回り込み                            */
/* ---------------------------------- */
/* 左 (<#### class="f_l">) */
.f_l {
  float:                left;
  margin-right:         3em;
}

/* 右 (<#### class="f_r">) */
.f_r {
  float:                right;
  margin-left:          3em;
}

/* 解除 (<#### class="f_c">) */
.f_c {
  clear:                both;  
}

/* ---------------------------------- */
/* 文字配置 */
/* ---------------------------------- */
/* 左揃え (<#### class="left">) */
.left {
  text-align:           left;
}

/* 左右中央揃え (<#### class="center">) */
.center {
  text-align:           center;
}

/* 右揃え (<#### class="right">) */
.right {
  text-align:           right;
}

/* 上揃え (<#### class="top">) */
.top {
  vertical-align:       text-top;
}

/* 上下中央揃え (<#### class="middle">) */
.middle {
  vertical-align:       middle;
}

/* 下揃え (<#### class="bottom">) */
.bottom {
  vertical-align:       text-bottom;
}

/* 両端揃え (<#### class="justify">) */
.justify {
  text-align-last:      justify;
  text-justify:         inter-ideograph;  /* for MS-Edge */
}

/* ---------------------------------- */
/* インライン要素の回転               */
/* ---------------------------------- */
/* 左90度回転 (<#### class="rotate_left">) */
.rotate_left {
  display: inline-block;
  transform: rotate( -90deg );
}

/* 右90度回転 (<#### class="rotate_right">) */
.rotate_right {
  display: inline-block;
  transform: rotate( 90deg );
}

/* 180度回転 (<#### class="rotate_180">) */
.rotate_180 {
  display: inline-block;
  transform: rotate( 180deg );
}

/* 上下反転 (<#### class="rotate_ud">) */
.rotate_ud {
  display: inline-block;
  transform: rotateX( 180deg );
}

/* 左右反転 (<#### class="rotate_lr">) */
.rotate_ud {
  display: inline-block;
  transform: rotateY( 180deg );
}