@charset "utf-8";

/* =======================================

  Reset

======================================= */
/*! sanitize.css v4.0.0 | CC0 License | github.com/10up/sanitize.css */
/* Display definitions */
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary { display: block;}
audio, canvas, progress, video { display: inline-block;}
audio:not([controls]) { display: none; height: 0;}
template, [hidden] { display: none;}
/* Elements of HTML */
*, ::before, ::after {
  background-repeat: no-repeat;
  box-sizing: inherit;}
::before, ::after {
  text-decoration: inherit;
  vertical-align: inherit;}
html {
  overflow-y: scroll;
  box-sizing: border-box;
  cursor: default;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;}
/* Sections */
body { margin: 0; overflow-x: hidden;}
h1 { font-size: 2em; margin: .67em 0;}
/* Grouping content */
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;}
hr { height: 0; overflow: visible;}
ol, ul { list-style: none; margin: 0; padding: 0;}
/* Text-level semantics */
abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;}
b, strong { font-weight: bolder;}
dfn { font-style: italic;}
mark {
  background-color: #ffff00;
  color: #000000;}
progress { vertical-align: baseline;}
address { font-style: normal;}
small { font-size: 83.3333%;}
sub, sup {
  font-size: 83.3333%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;}
sub { bottom: -.25em;}
sup { top: -.5em;}
/* Embedded content */
audio, canvas, iframe, img, svg, video { vertical-align: middle;}
img {
  border: none;
  max-width:100%;
  vertical-align: bottom;
  font-size: 0;
  line-height: 0;}
svg { fill: currentColor;}
svg:not(:root) { overflow: hidden;}
/* Links */
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;}
:hover :focus { outline: none;}
/* Tabular data */
table {
  border-collapse: collapse;
  border-spacing: 0;}
/* transform-style */
button, input, select, textarea {
  background-color: transparent;
  border-style: none;
  color: inherit;
  font-size: 1em;
  margin: 0;}
button, input { overflow: visible;}
button, select { text-transform: none;}
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button;}
::-moz-focus-inner {
  border-style: none;
  padding: 0;}
:-moz-focusring { outline: 1px dotted ButtonText;}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em;}
legend {
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;}
textarea {
  overflow: auto;
  resize: vertical;}
[type="checkbox"], [type="radio"] { padding: 0;}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto;}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;}
::-webkit-search-cancel-button, ::-webkit-search-decoration { -webkit-appearance: none;}
::-webkit-input-placeholder {
  color: inherit;
  opacity: .54;}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;}
/* WAI-ARIA */
[aria-busy="true"] { cursor: progress;}
[aria-controls] { cursor: pointer;}
[aria-disabled] { cursor: default;}
/* User interaction */
a, area, button, input, label, select, textarea, [tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;}
[hidden][aria-hidden="false"] {
  clip: rect(0, 0, 0, 0);
  display: inherit;
  position: absolute;}
[hidden][aria-hidden="false"]:focus { clip: auto;}


/* =======================================

  Common

======================================= */
@font-face {
  font-family: "MyYuGothicM";
  font-weight: normal;
  src: local("Yu Gothic"), local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");}
@font-face {
  font-family: "MyYuGothicM";
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic");}
html {
  font-family: 'Inconsolata', MyYuGothicM, YuGothic, -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-style: normal;
  font-size: 62.5%; /*root=10px*/
  line-height: 1.8;}
body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #41210f;
  font-size: 16px;
  font-size: 1.6rem; /*base*/
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;}
a {
  color: #ff5a00;
  text-decoration: none;
  border-bottom: 1px dotted #ff5a00;}
a, a img, .ophover {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;}
a:visited { color: #ee4f09; text-decoration: none; border-bottom: 1px dotted #ee4f09;}
a:active, .pointer:active a { color: #d03b00; text-decoration: none; border-bottom: 1px dotted #d03b00;}
a:hover, .pointer:hover a { color: #d03b00; text-decoration: none; border-bottom: 1px dotted #d03b00;}
a:hover img, .ophover:hover { opacity: 0.8;}
::-moz-selection { background-color: #ccc; color: #603c2b;}
::selection { background-color: #ccc; color: #603c2b;}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

/* ---------------------------------------
  icon
--------------------------------------- */
[class^="fa-"]:before, [class*=" fa-"]:before, .btn:after,
#topicpath li:after, #content .li_ico li:before {
  font-family: FontAwesome;
  speak: none;
  display: inline-block;
  text-decoration: none;
  width: 1em;
  margin-right: .5em;
  margin-left: .5em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  text-decoration: inherit;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
i { font-style: normal;}

/* ---------------------------------------
  btn
--------------------------------------- */
.btn {
  position: relative;
  display: inline-block;
  padding: 1em 2.5em 1em 1.5em;
  text-indent: 0;
  text-align: center;
  text-decoration: none;
  background: #e35e00;
  font-size: inherit;
  font-weight: bold;
  line-height: 1.2;
  color: #fff !important;
  border-radius: 4px;
  border: none;
  box-shadow:rgba(109,80,67,0.1) 0px -5px 0px 0px inset;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;}
.btn:after {
  content: "\f061";
  position: absolute;
  top: 50%;
  right: 0.3em;
  margin: -0.5em 0.5em 0 0.5em;}
.btn:hover {
  color: #fff !important;
  opacity: 0.8;
  border: none;}


/* =======================================

  header

======================================= */
#header_wrap {
  position: relative;
  width: 100%;
  border-top: 5px solid #e35e00;
  background: #fff;}
#header { position: relative;}

/* ---------------------------------------
  topicpath
--------------------------------------- */
#topicpath {
  width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  color: #d03b00;}
#topicpath li {
  float: left;
  position: relative;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 50px;}
#topicpath li:before { margin: 0 10px 0 0;}
#topicpath li:after { content: "\f105";  margin: 0 10px 0 10px;}
#topicpath li:last-child:after { content: none;}
#topicpath a { font-weight: bold;}

/* ---------------------------------------
  h1
--------------------------------------- */
#h1_wrap {
  position: relative;
  width: 100%;
  background: #333;}
#h1_wrap h1 {
  width: 1000px;
  margin: 0 auto;
  padding: 8px 20px;
  color: #fff;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: normal;}


/* =======================================

  content

======================================= */

/* list
--------------------------------------- */
#content ul.li_ico { margin: 20px 0 30px 30px;}
#content ul.li_ico li {
  text-indent: -1.1em;
  margin-bottom: 0.5em;}
#content .li_ico li:before {
  content: "\f058";
  margin: 0 0.1em 0 0;}

/* table
--------------------------------------- */
#content .table {
  margin: 20px 5px 0 5px;
  table-layout: fixed;
  border-top: 1px dashed #c09480;
  text-align: left;
  width: 770px;}
#content .table th {
  position: relative;
  padding: 16px 10px;
  vertical-align: middle;
  color: #763415;}
#content .table tr { border-bottom: 1px dashed #c09480;}
#content .table td {
  padding: 16px 10px;
  vertical-align: middle;}
#content .table td ul, #content .table td li,
#content .table td p{ margin: 0;}

/* ---------------------------------------
  attention
--------------------------------------- */
#attention {
  position: relative;
  margin: 0;
  padding: 40px 50px 70px 50px;
  background: #eee;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: normal;}
#attention h2 {
  margin: 0;
  font-size: 24px;
  font-size: 2.4rem;}
#attention ul { margin-top: 20px;}
#attention li {
  text-indent: -1.1em;
  margin-bottom: 0.5em;}
#attention li:before {
  content: "\f058";
  margin: 0 0.1em 0 0;}
#attention .btns {
  margin-top: 20px;
  text-align: center;}
#attention .btn {
  width: 300px;
  margin: 0 5px;}
.btn_up:after { content: "\f062";}

/* =======================================

 pageTop

======================================= */
#pageTop {
  position: fixed;
  display: none;
  right: 20px;
  bottom: 50px;
  cursor: pointer;
  opacity: 0.95;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 1000;}
#pageTop img {
  width: 80px;
  height: 80px;
  border-radius: 12px;}
#pageTop:hover { opacity: 0.8;}


/* =======================================

 footer

======================================= */
#footer_wrap {
  position: relative;
  width: 100%;
  background: #e35e00;
  color: #fff;}
#footer {
  width: 1000px;
  margin: 0 auto;
  color: #f7ece4;
  font-size: 14px;
  font-size: 1.4rem;}
#footer a { color: #fff; border-bottom: 1px dotted #fff;}
#footer a:visited { color: #fff; border-bottom: 1px dotted #fff;}
#footer a:active { color: #f1c7b0; border-bottom: 1px dotted #f1c7b0;}
#footer a:hover { color: #f1c7b0; border-bottom: 1px dotted #f1c7b0;}

/* ---------------------------------------
  navi
--------------------------------------- */
#footer ul {
  margin: 0 20px 20px 20px;}
#footer li {
  float: left;
  margin-right: 1.5em;}
#fnavi {
  padding-top: 50px;
  font-size: 16px;
  font-size: 1.6rem;}

/* ---------------------------------------
  copy
--------------------------------------- */
#footer .copy {
  text-align: right;
  margin: 0;
  padding: 50px 20px 10px 0;}