@charset "UTF-8";


/*=================================================*
 * base style
 *=================================================*/
* {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  text-align: left;
  -o-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

html,
body {
  background-color: #fff !important;
  color: #333 !important;
  display: block !important;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif !important;
  font-size: 16px;
  line-height: 1.6em;
  letter-spacing: 0;
  width: 100%;
}

a {
  color: rgba(18, 83, 164, 1.0);
}

img {
  border: none;
  display: block;
  float: none;
  height: auto;
  max-width: 100%;
  width /***/:auto;
}

iframe {
  width: 100%;
}

input,
button {
  line-height: 1.0em;
}

ul,
li,
dl,
dt,
dd {
  padding: 0;
}

aside {
  padding: 0;
}


/*=================================================*
 * design style
 *=================================================*/
/*--------------------*
 * float
 *--------------------*/
.clearfix:after { clear: both; content: ""; display: block; }
.fL { float: left; }
.fR { float: right; }


/*--------------------*
 * display
 *--------------------*/
.dsp-blk { display: block; }
.dsp-non {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 0 !important;
}


/*--------------------*
 * text-align
 *--------------------*/
.tL { text-align: left; }
.tR { text-align: right; }
.tC { text-align: center; }


/*--------------------*
 * overflow: hidden;
 *--------------------*/
.of-hdn { overflow: hidden; }


/*--------------------*
 * font-size
 *--------------------*/
.f80  { font-size: 80%; }
.f85  { font-size: 85%; }
.f90  { font-size: 90%; }
.f95  { font-size: 95%; }
.f100 { font-size: 100%; }
.f105 { font-size: 105%; }
.f110 { font-size: 110%; }
.f115 { font-size: 115%; }
.f120 { font-size: 120%; }
.f125 { font-size: 125%; }
.f130 { font-size: 130%; }
.f135 { font-size: 135%; }
.f140 { font-size: 140%; }
.f145 { font-size: 145%; }
.f150 { font-size: 150%; }

.normal { font-weight: 400; }
.bold   { font-weight: 700; }


/*--------------------*
 * Padding
 *--------------------*/
.pd0 { padding: 0; }
.pd5 { padding: 5px; }
.pd10 { padding: 10px; }
.pd15 { padding: 15px; }
.pd20 { padding: 20px; }
.pd25 { padding: 25px; }
.pd30 { padding: 30px; }

/*--------------------*
 * Padding not top
 *--------------------*/
.pd5nt { padding: 0 5px 5px; }
.pd10nt { padding: 0 10px 10px; }
.pd15nt { padding: 0 15px 15px; }
.pd20nt { padding: 0 20px 20px; }
.pd25nt { padding: 0 25px 25px; }
.pd30nt { padding: 0 30px 30px; }

/*--------------------*
 * Padding not bottom
 *--------------------*/
.pd5nb { padding: 5px 5px 0; }
.pd10nb { padding: 10px 10px 0; }
.pd15nb { padding: 15px 15px 0; }
.pd20nb { padding: 20px 20px 0; }
.pd25nb { padding: 25px 25px 0; }
.pd30nb { padding: 30px 30px 0; }

/*--------------------*
 * Padding Left
 *--------------------*/
.pd0l { padding-left: 0; }
.pd5l { padding-left: 5px; }
.pd10l { padding-left: 10px; }
.pd15l { padding-left: 15px; }
.pd20l { padding-left: 20px; }
.pd25l { padding-left: 25px; }
.pd30l { padding-left: 30px; }

/*--------------------*
 * Padding Right
 *--------------------*/
.pd0r { padding-right: 0; }
.pd5r { padding-right: 5px; }
.pd10r { padding-right: 10px; }
.pd15r { padding-right: 15px; }
.pd20r { padding-right: 20px; }
.pd25r { padding-right: 25px; }
.pd30r { padding-right: 30px; }

/*--------------------*
 * Padding Top
 *--------------------*/
.pd0t { padding-top: 0; }
.pd5t { padding-top: 5px; }
.pd10t { padding-top: 10px; }
.pd15t { padding-top: 15px; }
.pd20t { padding-top: 20px; }
.pd25t { padding-top: 25px; }
.pd30t { padding-top: 30px; }

/*--------------------*
 * Padding Bottom
 *--------------------*/
.pd0b { padding-bottom: 0; }
.pd5b { padding-bottom: 5px; }
.pd10b { padding-bottom: 10px; }
.pd15b { padding-bottom: 15px; }
.pd20b { padding-bottom: 20px; }
.pd25b { padding-bottom: 25px; }
.pd30b { padding-bottom: 30px; }

/*--------------------*
 * Margin
 *--------------------*/
.mg0  { margin: 0; }
.mg5  { margin: 5px; }
.mg10 { margin: 10px; }
.mg15 { margin: 15px; }
.mg20 { margin: 20px; }
.mg25 { margin: 25px; }
.mg30 { margin: 30px; }

/*--------------------*
 * Margin Left
 *--------------------*/
.mg0l  { margin-left: 0; }
.mg5l  { margin-left: 5px; }
.mg10l { margin-left: 10px; }
.mg15l { margin-left: 15px; }
.mg20l { margin-left: 20px; }
.mg25l { margin-left: 25px; }
.mg30l { margin-left: 30px; }

/*--------------------*
 * Margin Right
 *--------------------*/
.mg0r  { margin-right: 0; }
.mg5r  { margin-right: 5px; }
.mg10r { margin-right: 10px; }
.mg15r { margin-right: 15px; }
.mg20r { margin-right: 20px; }
.mg25r { margin-right: 25px; }
.mg30r { margin-right: 30px; }

/*--------------------*
 * Margin Top
 *--------------------*/
.mg0t  { margin-top: 0; }
.mg5t  { margin-top: 5px; }
.mg10t { margin-top: 10px; }
.mg15t { margin-top: 15px; }
.mg20t { margin-top: 20px; }
.mg25t { margin-top: 25px; }
.mg30t { margin-top: 30px; }

/*--------------------*
 * Margin Bottom
 *--------------------*/
.mg0b  { margin-bottom: 0; }
.mg5b  { margin-bottom: 5px; }
.mg10b { margin-bottom: 10px; }
.mg15b { margin-bottom: 15px; }
.mg20b { margin-bottom: 20px; }
.mg25b { margin-bottom: 25px; }
.mg30b { margin-bottom: 30px; }

/*--------------------*
 * Font Color
 *--------------------*/
.cl-blk { color: #333; }
.cl-wht { color: #fff; }
.cl-gbr { color: #dcdcdc; }
.cl-red { color: #ff0000; }
.cl-wht-smk { color: #f5f5f5; }
.cl-org { color: #f8823c; }
.cl-dgr { color: #696969; }

/*--------------------*
 * font size
 *--------------------*/
.f60  { font-size: 60%; }
.f65  { font-size: 65%; }
.f70  { font-size: 70%; }
.f75  { font-size: 75%; }
.f80  { font-size: 80%; }
.f85  { font-size: 85%; }
.f90  { font-size: 90%; }
.f95  { font-size: 95%; }
.f100 { font-size: 100%; }
.f105 { font-size: 105%; }
.f110 { font-size: 110%; }
.f115 { font-size: 115%; }
.f120 { font-size: 120%; }
.f125 { font-size: 125%; }
.f130 { font-size: 130%; }
.f135 { font-size: 135%; }
.f140 { font-size: 140%; }
.f145 { font-size: 145%; }
.f150 { font-size: 150%; }
.f155 { font-size: 155%; }
.f160 { font-size: 160%; }
.f165 { font-size: 165%; }
.f170 { font-size: 170%; }
.f175 { font-size: 175%; }
.f180 { font-size: 180%; }

/*=================================================*
 * contents style
 *=================================================*/
#wrapper {
  background-color: #fff;
  padding: 0;
  width: 100%;
}

#contents {
  background-color: #fff;
  padding: 0;
  white-space: normal;
  width: 100%;
  word-wrap: break-word;
  border: 1px solid #dcdcdc;
  padding: 0 0 30px;
}

h1 {
  background-color: #000;
  text-align: center;
  font-size: 16px;
  line-height: 16px;
  padding: 10px;
  color: #fff;
}

.text-box {
  border: 1px solid #dcdcdc;
  width: 80%;
  padding: 10px;
}

.text-box p {
  padding-top: 10px;
}

.dl dt,
.dl dd {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dl dt {
  float: left;
  width: 25%;
  padding-right: 8px;
}

.dl dd {
  float: left;
  width: 75%;
}




/*=================================================*
 * media query
 *=================================================*
 * BREAK POINT (mobile first)
 *    [SP/TB/PC]    0px ~ x  (SP {縦})
 *    [SP/TB/PC]  320px ~ x  (SP {縦})
 *    [SP/TB/PC]  480px ~ x
 *    [   TB/PC]  768px ~ x
 *    [      PC]  1024px ~ x
 *=================================================*/
/* --------------------- *
 * SP / TB / PC
 * width : 1px - x
 * --------------------- */
@media screen and (min-width: 1px) {

  /**
   * base style
   */
  html,
  body {
    font-size: 100%;
  }

}


/* --------------------- *
 * SP / TB / PC
 * width : 320px - x
 * --------------------- */
@media screen and (min-width: 320px) {

}


/* --------------------- *
 * SP / TB / PC
 * width : 480px - x
 * --------------------- */
@media screen and (min-width: 480px) {


}


/* --------------------- *
 * TB / PC
 * width : 768px - x
 * --------------------- */
@media screen and (min-width: 768px) {


}


/* --------------------- *
 * PC
 * width : 1024px - x
 * --------------------- */
@media screen and (min-width: 1024px) {

  /**
   * base
   */
  body {
    padding: 20px 0 0; /* header(height) + 20 */
  }

  #contents {
    max-width: 920px;
  }
}