@charset "UTF-8";
/* リセットCSS
----------------------------------------*/
h1, h2, h4, h4, h5, h6, div, p, ul, li, dl, dt, dd, table, tr, td, img {
  margin: 0;
  border: 0;
  padding: 0;
}

/* コンテナ
----------------------------------------*/
div#wrap-container {
  padding: 0;
  width: 100%;
}

div#container {
  width: 100%;
  height: 100%;
  position: relative;
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  margin: 0 0 80px;
}

/* SP非表示
----------------------------------------*/
.sp {
  display: none;
}

/* タイトル
----------------------------------------*/
span.space {
  margin-left: 1em;
}

#container h1 {
  border-bottom: 1px solid #cccccc;
  font-size: 1.7em;
  line-height: 1.2;
  margin: 0 auto 20px;
  padding-bottom: 0;
  width: 980px;
}

div.title-banner {
  position: relative;
  margin: 0 auto;
  background-color: #FFE944;
}

div.bannertop {
  width: 980px;
  margin: 0 auto;
}

div.bannerbot {
  width: 100%;
  height: 30px;
  background: url(/static/images/seihin_joho/setsuden/parts_kanban.png) repeat-x 0 0;
}

/* リード文 */
div#read {
  background-color: #FFFACA;
}

div#read-inner {
  font-size: 1.1em;
  width: 980px;
  margin: 0 auto 20px;
  padding: 80px 30px 0;
  line-height: 1.7;
  background-color: #FFFACA;
  text-align: center;
}

div#read img {
  margin: 0 0 3.5%;
}

/* メニュー */
div#menu {
  width: 980px;
  margin: 30px auto 0;
  padding: 0 0 50px;
  text-align: center;
}

div#menu a {
  display: inline-block;
  float: left;
}

div#menu a:nth-of-type(1) {
  margin: 0 2% 0 0;
}

div#menu-inner {
  width: 980px;
  margin: 0 auto;
  text-align: center;
}

div#menu a:hover {
  opacity: 0.6;
  text-decoration: none;
}

div#menu a:hover img {
  opacity: 1 !important;
}

div#menu a span {
  display: block;
  text-align: center;
}

/* 各カテゴリの見出しとメニュー */
div#detail-area h3 {
  font-size: 3.3em;
  text-align: center;
  margin: 0 0 4%;
}

div#detail-area h3 span {
  font-size: 0.8em;
}

div#detail-area h3 img {
  width: 6%;
  margin: 0 1.5% 0 0;
  vertical-align: -19px;
}

div#detail-area.teiden h3 img {
  width: 8%;
  margin: 0 1.5% 0 0;
  vertical-align: -19px;
}

p.mokuteki {
  text-align: center;
  font-size: 1.65em;
  font-weight: bold;
  margin: 0 0 2.3%;
}

div.teiden p.mokuteki {
  margin: 10% 0 2.3%;
}

div.submenu {
  display: flex;
}

div.submenu a {
  display: inline-block;
  margin: 0 1% 0 0;
  width: 24.3%;
}

div.submenu a:nth-last-of-type(1) {
  margin: 0;
}

div.submenu a img {
  width: 100%;
}

/* 各対策 */
div#thunder p {
  font-size: 1.15em;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 3%;
  padding: 0 5.5%;
}

div.thunder-inner {
  background-color: #FFFFFF;
  border-radius: 1em;
  padding: 3% 6% 6%;
}

div#thunder div.thunder-inner p {
  font-size: 1.9em;
  text-decoration: underline;
  line-height: 1;
  margin: 0 0 2.8%;
  font-weight: bold;
  letter-spacing: 0.08em;
}

div#thunder div.thunder-inner p img {
  vertical-align: -19px;
  margin: 0 1.3% 0 0;
}

div.thunder-inner span {
  display: block;
  font-size: 1.15em;
  line-height: 1.6;
  margin: 0 0 3.5%;
}

div.thunder-inner ul {
  display: flex;
  padding: 0 1%;
  margin: 7% 0 0;
}

div.thunder-inner ul li:nth-of-type(1) {
  margin: 0 2% 0 0;
}

div.detail-inner {
  width: 980px;
  margin: 0 auto;
}

div#detail-area.setsuden div#protect {
  background-color: #C1E65D;
  padding: 110px 0 100px;
}

div#detail-area.teiden div#connect {
  background-color: #9FDAFC;
  padding: 110px 0 100px;
}

div.detail-box {
  background-color: #FFFFFF;
  margin: 8% 0 2%;
  padding: 0 0 0.1%;
}

div.detail-inner div.fst {
  margin: 3% 0 2%;
}

div.detail-list div.detail-sepa {
  padding: 0 5% 4%;
}

div.setsuden div.detail-list h4 {
  background-color: #40AF04;
  font-size: 2.5em;
  text-align: center;
  color: #FFFFFF;
  padding: 1.6% 0 1.2%;
}

div.teiden div.detail-list h4 {
  background-color: #036BD3;
  font-size: 2.5em;
  text-align: center;
  color: #FFFFFF;
  padding: 1.6% 0 1.2%;
}

div.detail-list dl {
  display: flex;
}

div.detail-list dl dt {
  display: inline-block;
  width: 50%;
  padding: 5% 3% 0 0;
  font-size: 1.1em;
  line-height: 1.8;
}

div.detail-list dl dd {
  display: inline-block;
  width: 49%;
  text-align: right;
}

div.detail-list dl dd img {
  width: 93%;
}

div.detail-sepa div.detail-note {
  position: relative;
  border: 2px solid #40AF27;
  padding: 5% 4%;
  margin: 10% 0 0;
}

div.teiden div.detail-sepa div.detail-note {
  position: relative;
  border: 2px solid #036BD3;
  padding: 5% 4%;
  margin: 8% 0 0;
}

div.setsuden div.detail-sepa div.detail-note:nth-of-type(1),
div.teiden div.detail-sepa div.detail-note:nth-of-type(1) {
  margin: 0;
}

div.detail-note img.topleft {
  position: absolute;
  top: -38px;
  left: -26px;
}

div.detail-note h5.detail-note-title {
  text-align: center;
  font-size: 1.7em;
}

div.use h5.detail-note-title {
  text-align: center;
  font-size: 1.7em;
  margin: 0 0 3%;
}

div.detail-note h5.detail-note-title span,
div.use h5.detail-note-title span {
  display: inline-block;
  border-bottom: 3px solid #333333;
  padding: 0 0 0.5%;
}

div.detail-note p.detail-note-read {
  padding: 0 2%;
  font-size: 1.1em;
  line-height: 1.8;
  margin: 4% 0 0;
}

div.detail-note div.detail-note-image {
  text-align: center;
  margin: 3% 0 0;
}

div.detail-note div.detail-note-image img {
  width: 37%;
  border: 1px solid #EAEAEA;
}

div.detail-note div.detail-note-image img:nth-of-type(1) {
  margin: 0 4% 0 0;
}

div.detail-note div.detail-note-image.kvm img {
  width: 92%;
  display: block;
  margin: 0 auto;
  border: none;
}

div.detail-note p.detail-link,
div.use p.detail-link {
  text-align: center;
  margin: 4% 0 0;
}

div.detail-note p.detail-link a,
div.use p.detail-link a {
  display: inline-block;
  width: 40%;
  border: 2px solid #333333;
  border-radius: 2em;
  background-color: #FFE944;
  background-image: url(/static/images/seihin_joho/setsuden/yaji_1018_bk.png);
  background-repeat: no-repeat;
  background-position: 95% 50%;
  background-size: 3%;
  padding: 1.5% 0;
  font-weight: bold;
  color: #333333;
  opacity: 1;
  transition: 0.2s;
}

div.use p.detail-link a {
  padding: 1% 0;
}

div.detail-note p.detail-link a:nth-last-of-type(1) {
  margin: 0 0 0 2%;
}

div.detail-note p.detail-link a:hover,
div.use p.detail-link a:hover {
  text-decoration: none;
  opacity: 0.6;
  transition: 0.2s;
}

div.detail-other {
  background-color: #F6F6F6;
  padding: 4.5%;
  margin: 6% 0 5%;
}

div.detail-other:nth-last-of-type(1) {
  background-color: #F6F6F6;
  padding: 4.5%;
  margin: 0;
}

div.detail-other div.other-l {
  font-size: 1.1em;
  line-height: 1.7;
  display: inline-block;
  width: 51%;
  padding: 0 1% 0 0;
}

div.detail-other div.other-l strong {
  display: block;
  background: url(/static/images/seihin_joho/setsuden/check.png) no-repeat 0 35%;
  background-size: 6.5%;
  font-size: 1.45em;
  padding: 1% 0 1% 8.3%;
}

div.detail-other div.other-r {
  display: inline-block;
  width: 47%;
  text-align: center;
}

div.detail-other div.other-r img {
  width: 100%;
}

div.detail-other.other div.other-r img {
  width: 73%;
}

div.use {
  background-color: #FFF8B9;
  border: 2px solid #9F9F9F;
  padding: 2% 4% 3%;
  margin: 0 5% 4%;
  text-align: center;
}

div.use img:nth-of-type(1) {
  margin: 0 0 3%;
}

div.use img:nth-of-type(2) {
  margin: 3% 0 0;
}

div.use p {
  font-size: 1.1em;
  line-height: 1.7;
  text-align: left;
  padding: 0 5%;
}

div.link-other {
  padding: 0 0 4%;
  text-align: center;
}

div.all-detail {
  text-align: center;
  margin: 8% 0 0;
}

div.all-detail p {
  font-size: 1.35em;
  font-weight: bold;
  margin: 0 0 1.5%;
}

div.all-detail a {
  display: inline-block;
  margin: 1%;
}

div #relation-outer {
  width: 100%;
  margin: 0 0 5%;
}

div .relation {
  width: 980px;
  margin: 100px auto 0;
}

.relation h3 {
  font-size: 1.6em;
  text-align: center;
  padding: 13px 0;
  color: #fff;
  background-color: #004DA2;
}

.relation img {
  width: 230px;
  height: 153px;
  margin: 20px 14px 0 0;
}

.link-img li {
  display: inline;
}

.link-img li:nth-child(4n) img {
  margin-right: 0;
}

/* 注意事項 */
p.att {
  width: 820px;
  margin: 8px auto 0;
  font-size: 0.8rem;
}

/* バナーエリア */
div.banner {
  width: 980px;
  text-align: center;
  margin: 40px auto 0;
}

/* メニュー固定 */
#menu-fix {
  display: none;
}

div#read #menu-fix img {
  margin: 0;
  width: 370px;
}

#menu-fix.open {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  background: #FFFACA;
  text-align: center;
  padding: 18px 0 11px;
  box-shadow: 0 1px 6px #333;
}

#menu-fix.close {
  display: none;
}