@charset "UTF-8";
/******************************************************************
WEBフォント設定
******************************************************************/
@import url("../webfonts/kozmin-m/stylesheet.css");
@import url("../webfonts/kozmin-h/stylesheet.css");
@import url("../webfonts/kozgo-r/stylesheet.css");
@import url("../webfonts/kozgo-m/stylesheet.css");
@import url("../webfonts/kozgo-b/stylesheet.css");
@import url("../webfonts/c_code/stylesheet.css");
@import url("../webfonts/s_code/stylesheet.css");
@import url("../webfonts/f66p-e/stylesheet.css");

/******************************************************************
基本設定
******************************************************************/
html {}
body {}
div {}
h1 {}
h2 {}
h3 {}

ul {}
.list {
  margin-bottom: 1rem;
  line-height: 1.6rem;
}

caption {
  line-height: 120%;
}

/******************************************************************
テキスト文や文字列の背景
******************************************************************/
.textbox {
  background-color: ghostwhite;
  margin: 0;
  line-height: 140%;
  border: 1px solid #52626A;
  border-radius: 5px;
  padding: 20px;
}

.pshell {
  color: white;
  font-weight: normal;
  background-color: #012456;
  padding: 20px;
  border-radius: 10px;
}

.wterm {
  color: white;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.4rem;
  background-color: #0c0c0c;
  padding: 1.2rem;
  border-radius: 10px;
}

.uterm {
  color: white;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.4rem;
  background-color: #310821;
  padding: 1.2rem;
  border-radius: 10px;
}

.markup {
  color: white;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.6rem;
  background-color: #2a2222;
  padding: 1.6rem;
  border-radius: 10px;
}

/******************************************************************
定型ブロック
******************************************************************/

/*** ダウンロードアイコン ***/
/* 標準サイズ */
.dli {
  width: 4rem;
  vertical-align: middle;
  margin: 0 1rem 0 0;
}
/* ミニサイズ */
.dlis {
  width: 3rem;
  vertical-align: middle;
  margin: 0 1rem 0 0;
}

/*** 注釈 ***/
.markred {
  color: red;
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  line-height: 1.4rem;
}
.markblue {
  color: blue;
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  line-height: 1.4rem;
}

/*---------------------------------------------
標準テーブル
---------------------------------------------*/
.tbl-std {
  width: 100%;
  border: 1px solid;
  border-collapse: collapse;
  border-spacing: 0;
  border-color: rgba(0, 120, 212, 0.7); /*#0078d4*/
  margin: 2rem 0 2rem 0;
}
.tbl-std th {
  width: 100%;
  padding: 5px;
  line-height: 1.6rem;
  font-weight: normal;
  font-size: 1rem;
  border: 1px solid;
  border-color: rgba(0, 120, 212, 0.7); /*#0078d4*/
  background-color: rgba(0, 120, 212, 1); /*#0078d4*/
  text-align: center;
  color: white;
}
.tbl-std td {
  padding: 5px 5px 5px 10px;
  line-height: 2.4rem;
  font-weight: normal;
  font-size: 1em;
  border: 1px solid;
  border-color: rgba(0, 120, 212, 0.7); /*#0078d4*/
}
.tbl-std tr:hover td {
  background-color:rgba(0,120,212,0.2);
}

/*---------------------------------------------
横線だけのテーブル
---------------------------------------------*/
.tbl-line {
  width:80%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.tbl-line tr {
  border-color: gray;
  border-style: solid;
  border-width: 1px 0;
  line-height: 1.8rem;
}

/******************************************************************
調整
******************************************************************/
/*---------------------------------------------
background-color
---------------------------------------------*/
.bgcblue {background-color: blue;}

/*---------------------------------------------
border
---------------------------------------------*/
.bdrlblue {border: 1px lightskyblue solid;}

/*---------------------------------------------
border-radius
---------------------------------------------*/

/*---------------------------------------------
color
---------------------------------------------*/
.cpeco {color: #400051;}
.cblack {color: black;}
.cwhite {color: white;}
.cred {color: red;}
.cred2 {color: #dd0000;}
.cgreen {color: green;}
.cgreen2 {color: #049F46;} /*見出し用緑色文字*/
.cblue {color: blue;}
.cyellow {color: yellow;}
.corange {color: orange;}
.cbrown {color: brown;}
.cgray {color: gray;}
.climegreen {color: limegreen;}
.cslategray {color: slategray;}
.csteelblue {color: steelblue;}
.cr {color: rgb(255, 0, 0);}
.cg {color: lime;}
.cb {color: rgb(0, 0, 255);}

/*---------------------------------------------
display
---------------------------------------------*/
.dpb {display: block;}
.dpi {display: inline;}
.dpib {display: inline-block;}
.dpn {display: none;}

/*-----------------------------------------------------------------
flex
-----------------------------------------------------------------*/
.fbox {
  display: flex;
  align-items: flex-start;
}
.fboxr {
  display:flex;
  flex-direction: row;
  align-items: flex-start;
}
.fboxw {
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
}
/*---------------------------------------------
float
---------------------------------------------*/
.fl {float: left;}
.fn {float: none;}
.fr {float: right;}

/*---------------------------------------------
font-size rem
---------------------------------------------*/
.fs080e {font-size: 0.8rem;}
.fs085e {font-size: 0.85rem;}
.fs090e {font-size: 0.9rem;}
.fs100e {font-size: 1rem;}
.fs110e {font-size: 1.1rem;}
.fs120e {font-size: 1.2rem;}
.fs130e {font-size: 1.3rem;}
.fs140e {font-size: 1.4rem;}
.fs150e {font-size: 1.5rem;}
.fs200e {font-size: 2.0rem;}

/*---------------------------------------------
font-weight
---------------------------------------------*/
.fwb {font-weight: bold;}
.fwn {font-weight: normal;}

/*---------------------------------------------
height
---------------------------------------------*/
.h100 {height: 100px;}

/*---------------------------------------------
img関連
---------------------------------------------*/
.imgl {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  text-align:left;
}
.imgc {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  float: none;
}
.imgr {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  text-align:right;
}

/*---------------------------------------------
leter-spacing
---------------------------------------------*/
.ls05 {letter-spacing: 0.05rem;}

/*---------------------------------------------
line-height
---------------------------------------------*/
.lh120e {line-height: 1.2rem;}

/*---------------------------------------------
margin
---------------------------------------------*/
.mgnt100e {margin-top: 1rem;}
.mgnt400e {margin-top: 4rem;}
.mgnr100e {margin-right: 1rem;}
.mgnb100e {margin-bottom: 1rem;}
.mgnb200e {margin-bottom: 2rem;}
.mgnl100e {margin-left: 1rem;}
.mgnl200e {margin-left: 2rem;}

/*---------------------------------------------
opacity
---------------------------------------------*/
.opa30 {opacity: 0.3;}
.opa60 {opacity: 0.6;}
.opa90 {opacity: 0.9;}

/*---------------------------------------------
padding
---------------------------------------------*/
.pdd0 {padding: 0px 0px 0px 0px;}

/*---------------------------------------------
text-align
---------------------------------------------*/
.tal {text-align: left;}
.tac {text-align: center;}
.tar {text-align: right;}

/*---------------------------------------------
vertical-align
---------------------------------------------*/
.va {vertical-align: baseline;}
.vat {vertical-align: top;}
.vam {vertical-align: middle;}
.vab {vertical-align: bottom;}

/*---------------------------------------------
width %
---------------------------------------------*/
.w3 {width: 3%;}
.w4 {width: 4%;}
.w5 {width: 5%;}
.w6 {width: 6%;}
.w7 {width: 7%;}
.w8 {width: 8%;}
.w10 {width: 10%;}
.w12 {width: 12.5%;}
.w15 {width: 15%;}
.w16 {width: 16%;}
.w20 {width: 20%;}
.w25 {width: 25%;}
.w30 {width: 30%;}
.w33 {width: 33.3333%;}
.w40 {width: 40%;}
.w50 {width: 50%;}
.w60 {width: 60%;}
.w65 {width: 65%;}
.w66 {width: 66%;}
.w70 {width: 70%;}
.w75 {width: 75%;}
.w80 {width: 80%;}
.w82 {width: 82%;}
.w88 {width: 87.5%;}
.w90 {width: 90%;}
.w92 {width: 92%;}
.w94 {width: 94%;}
.w96 {width: 96%}
.w98 {width: 98%;}
.w100 {width: 100%;}

/*---------------------------------------------
width rem
---------------------------------------------*/
.w25e {width: 2.5rem;}
.w30e {width: 3rem;}
.w35e {width: 3.5rem;}
.w40e {width: 4rem;}
.w45e {width: 4.5rem;}
.w50e {width: 5rem;}