@charset "UTF-8";
/* =======================================================
　スライドメニュー＋固定ヘッダ
========================================================== */
#SlideToggle {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 40px;
    background: center no-repeat;
    text-indent: -9999px;
    background-image: url(../img/header/btn-toggle.png);
    background-size: 57px 15px;
}
.header_call {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: center no-repeat;
    background-size: contain;
    text-indent: -9999px;
    border-left: 1px solid #cccccc;
    background-image: url(../../common/img/header/btn-call.png);
    right: 60px;
}
#SlideBase { overflow: hidden; }
#SlideMenu { width: 250px; }

@media print, screen and (min-width: 768px) { /**/
#ContentsBase {
    min-height: inherit !important;
    box-shadow: none !important;
    transform: translate3d(0, 0, 0) !important;
}
#SlideMenu,
#SlideToggle,
.header_call { display: none; }
}

@media screen and (max-width: 767px) { /**/
#ContentsBase {
    background: #ffffff;
    padding-top: 40px;
}
#SlideMenu {
    display: block;
    background: #fafafa;
    padding-top: 45px;
}
#SlideHeader {
    display: none !important;
    background: #cccccc;
    text-align: center;
}
#SlideHeader a {
    border-bottom: 1px solid #cccccc;
    height: 40px;
    line-height: 40px;
    color: #333333;
}
#SlideContent {
    background: #fafafa;
    padding-bottom: 60px;
}
#SlideContent ul a {
    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #cccccc;
    padding: 13px 13px;
    color: #333333;
    font-size: 13px;
    text-align: left;
}
#SlideContent ul ul a {
    padding: 10px 20px;
    font-size: 11px;
}
#SlideContent ul ul a:before { content: " - "; }
#Header,
header {
    position: fixed !important;
    z-index: 100 !important;
    background: #feb900 !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 40px !important;
    top: 0;
    margin: 0 !important;
    padding: 0 !important;
}
header.fixed { position: fixed; }
header ul,
header p { display: none; }
header .call {
    position: absolute;
    display: inline-block;
    top: 0;
    font-size: 0px;
}
}
@media print, screen and (min-width: 768px) { /**/
    #SlideContent li.pc {display:block;}
    #SlideContent li.sp {display:none;}
}
@media screen and (max-width: 767px){ /**/
    #SlideContent li.pc {display:none;}
    #SlideContent li.sp {display:block;}
}

/* =======================================================
　テキスト
========================================================== */
strong.marker {
    position: relative;
    z-index: 0;
    font-weight: normal;
}
strong.marker:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0.2em;
    left: 0;
    background: #f00;
    width: 100%;
    height: 0.5em;
}
.contents .link { }
.contents .link a { text-decoration: underline; }
.contents .link:before {
    display: inline-block;
    margin-right: 0.25em;
    content: "\f105 \f105";
    font-family: FontAwesome;
}

span.iblock {display:inline-block;}

@media print, screen and (min-width: 768px) {
.contents .link:before { font-size: 16px; }
.contents .link a:hover { text-decoration: none; }
}

@media screen and (max-width: 767px) {
.contents .link:before { font-size: 13px; }
}

/* ====================================================
　改行・表示設定
==================================================== */
@media print, screen and (min-width: 768px) {
span.sp { display: none; }
span.pc { display: inline; }
br.sp { display: none; }
br.pc { display: inline; }
img.sp { display: none; }
img.pc { display: inline; }
}

@media screen and (max-width: 767px) {
span.sp { display: inline; }
span.pc { display: none; }
br.sp { display: inline; }
br.pc { display: none; }
img.sp { display: inline; }
img.pc { display: none; }
}
/* ====================================================
　左見出しのテーブルテーブル horizon_colBlock（スマホは縦並び）
==================================================== */
.borderHorizon { border-top-width: 1px; }
.borderHorizon th,
.borderHorizon td { border-bottom-width: 1px; }
.borderBox th,
.borderBox td { border-width: 1px; }
.borderSolid { border-style: solid; }
.borderSolid th,
.borderSolid td { border-style: solid; }
.borderDotted { border-style: dotted; }
.borderDotted th,
.borderDotted td { border-style: dotted; }
.borderDashed { border-style: dashed; }
.borderDashed th,
.borderDashed td { border-style: dashed; }
.borderHorizon,
.borderBox,
.borderDotted,
.borderDashed { border-color: #c7c7c7; }
.borderHorizon th,
.borderHorizon td,
.borderBox th,
.borderBox td,
.borderDotted th,
.borderDotted td,
.borderDashed th,
.borderDashed td { border-color: #c7c7c7; }
.borderHorizon,
.borderBox {
    width: 100%;
    margin-bottom: 2em;
}
.borderHorizon th,
.borderBox th {
    text-align: left;
    font-weight: normal;
}
.borderHorizon td,
.borderBox td { font-weight: normal; }

@media print, screen and (min-width: 768px) {
.borderHorizon,
.borderBox { /**/ margin: 0 auto 1em; }
.borderHorizon th,
.borderBox th {
    width: 20%;
    padding: 10px 10px;
    font-size: 13px;
    vertical-align: top;
}
.borderHorizon td,
.borderBox td {
    width: 80%;
    padding: 10px 10px;
    font-size: 13px;
}
}

@media screen and (max-width: 767px) {
.borderHorizon,
.borderBox { /**/ }
.borderHorizon th,
.borderBox th {
    padding: 5px 15px;
    background: #f7f7f7;
}
.borderHorizon td,
.borderBox td { padding: 15px; }
}

@media screen and (max-width: 767px) { /**/
table.spBlock {
    display: block;
    width: 100%;
    margin: 0 auto 1em;
}
table.spBlock tbody,
table.spBlock tr,
table.spBlock th,
table.spBlock td { display: block; }
table.spBlock.borderHorizon { border-top: none; }
table.spBlock.borderHorizon th { border-top-width: 1px; }
table.spBlock.borderHorizon td { margin-bottom: 1em; }
table.spBlock.borderBox th { border-bottom: none; }
table.spBlock.borderBox td { margin-bottom: 1em; }
}
.BorderTable th,
.BorderTable td {
    border: solid #ffffff;
    border-width: 2px 1px;
    padding: 5px 10px;
    text-align: center;
}
.BorderTable th {
    background: #5a8ede;
    font-weight: bold;
    color: #ffffff;
}
.BorderTable tr td { background: #dddddd; }
.BorderTable tr:nth-child(odd) td { background: #eeeeee; }

@media screen and (max-width: 767px) {
.BorderTable { /**/ width: 100%; }
}
/* =======================================================
　リストの頭に■をつける
========================================================== */
.list_style_cube li {
    position: relative;
    padding-left: 1.5em;
    line-height: 1.5;
}
.list_style_cube li:before {
    content: "■";
    display: inline-block;
    position: absolute;
    top: -0.1em;
    left: 0;
    color: #333333;
}
.list_style_check li {
    position: relative;
    padding-left: 40px;
    line-height: 1.5;
}
.list_style_check li:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: -0.1em;
    left: 0;
    background: url(/products/4k8k/support/img/ico_check.png);
    width: 27px;
    height: 22px;
}
/*
*/
/* =======================================================
	メインイメージ　mainImg
========================================================== */
.mainImg { text-align: center; }

@media print, screen and (min-width: 768px) {
.mainImg { background: #f0f0f0; }
.mainImg .sp { display: none; }
.mainImg .pc { display: block; }
}

@media screen and (max-width: 767px) {
.mainImg .sp {
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}
.mainImg .pc { display: none; }
}
.mainImg .contents { position: relative; }
.mainImg .pc,
.mainImg .sp {
    font-size: 0;
    margin: 0 auto;
}
.mainImg .pc img,
.mainImg .sp img {
    width: 100%;
    height: auto;
}

@media print, screen and (min-width: 768px) {
.mainImg .innerButton {
    position: absolute;
    top: 70%;
    left: 4%;
    width: 20%;
}
}
.mainImg .innerButton .button { display: block; }

@media screen and (max-width: 767px) {
.mainImg .innerButton .button { margin-top: 5px; }
}
/* =======================================================
	パンくずリスト　topicPath
========================================================== */
.topicPath {
    clear: both;
    line-height: 1;
    margin: 0 auto;
}
.topicPath ol {
    width: 100%;
    max-width: 900px;
    display: block;
    text-align: left;
}
.topicPath ol li {
    display: inline-block;
    font-size: 12px;
}
.topicPath ol li:before {
    content: ">";
    display: inline-block;
    padding: 0 0.5em;
}
.topicPath ol li:first-child:before { display: none; }
.topicPath ol li a {
    color: #2666C6;
    text-decoration: underline;
}

@media print, screen and (min-width: 768px) {
.topicPath { display: block; }
.topicPath ol { margin: 0 auto; }
.topicPath ol li a:hover { text-decoration: underline; }
}

@media screen and (max-width: 767px) {
.topiPath {
    display: none;
    padding: 0 15px;
}
}
.topicPath {
    position: relative;
    background: url(../../common_res/img/header/wall-header.png) bottom repeat-x;
    padding: 0.7em 0;
}
.topicPath ol li {
    position: relative;
    font-size: 11px;
}
.topicPath ol:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: url(../../common_res/img/header/wall-text_top.png);
}

@media screen and (max-width: 767px) {
.topicPath { display: none; }
}
/* ====================================================
　ボタンスタイル
==================================================== */
/* =======================================================
	ボタン
========================================================== */
input[type=reset],
input[type=submit],
input[type=button],
.button {
    display: inline-block;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 3px;
    background: #cccccc;
    font-weight: bold;
    font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    font-size: 12px;
    color: #333333;
    display: inline-block;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
}
input[type=reset].block,
input[type=submit].block,
input[type=button].block,
.button.block {
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}
input[type=reset] img,
input[type=submit] img,
input[type=button] img,
.button img { vertical-align: middle; }
input[type=reset],
input[type=submit],
input[type=button] { line-height: 0.9; }

@media print, screen and (min-width: 768px) {
input[type=reset],
input[type=submit],
input[type=button],
.button { padding: 16px; }
input[type=reset]:hover,
input[type=submit]:hover,
input[type=button]:hover,
.button:hover { opacity: 0.9; }
input[type=reset].sp,
input[type=submit].sp,
input[type=button].sp,
.button.sp { display: none; }
input[type=reset].pc,
input[type=submit].pc,
input[type=button].pc,
.button.pc { display: inline; }
input[type=reset].pc.image,
input[type=submit].pc.image,
input[type=button].pc.image,
.button.pc.image { padding: 0; }
input[type=reset].pc.block,
input[type=submit].pc.block,
input[type=button].pc.block,
.button.pc.block { display: block; }
}

@media screen and (max-width: 767px) {
input[type=reset],
input[type=submit],
input[type=button],
.button {
    font-weight: bold;
    padding: 12px;
}
input[type=reset].pc,
input[type=submit].pc,
input[type=button].pc,
.button.pc { display: none; }
input[type=reset].sp,
input[type=submit].sp,
input[type=button].sp,
.button.sp { display: inline; }
input[type=reset].sp.block,
input[type=submit].sp.block,
input[type=button].sp.block,
.button.sp.block { display: block; }
}
/* ====================================================
	ボタンボックス
==================================================== */
.buttonBox.narrow { margin: 15px 0; }
.buttonBox p { text-align: center; }
.buttonBox ul {
    text-align: center;
    font-size: 0;
}
.buttonBox li { display: inline-block; }
.buttonBox li .button {
    display: block;
    font-size: 12px;
}
.buttonBox .col1 li { width: 100%; }
.buttonBox .col2 li { width: 50%; }
.buttonBox .col3 li { width: 33.333%; }
.buttonBox .col4 li { width: 25%; }
.buttonBox .col5 li { width: 20%; }
.buttonBox li { padding: 0 5px; }

@media print, screen and (min-width: 768px) {
.buttonBox { margin: 60px 0; }
.buttonBox .col1.pcBlock li,
.buttonBox .col2.pcBlock li,
.buttonBox .col3.pcBlock li,
.buttonBox .col4.pcBlock li,
.buttonBox .col5.pcBlock li {
    width: 100%;
    margin: 10px 0;
}
}

@media screen and (max-width: 767px) {
.buttonBox { margin: 30px 0; }
.buttonBox .col1.spBlock li,
.buttonBox .col2.spBlock li,
.buttonBox .col3.spBlock li,
.buttonBox .col4.spBlock li,
.buttonBox .col5.spBlock li {
    width: 100%;
    margin: 10px 0;
}
}
.button.siteSearch {
    padding: 0.5em 0.6em;
    background: #5a8ede;
    font-size: 11px;
    color: #ffffff;
}
.button.thin_round {
    box-shadow: none;
    background: #5a8ede;
    padding: 4px 30px;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
}
/* =======================================================
	タイトル
========================================================== */
h2 {
    margin-bottom: 30px;
    line-height: 1.25;
    font-size: 40px;
}
h3 {
    margin-bottom: 23px;
    line-height: 1.25;
    font-size: 30px;
}
h4 {
    margin-bottom: 15px;
    line-height: 1.25;
    font-size: 20px;
}
h5 {
    margin-bottom: 12px;
    line-height: 1.25;
    font-size: 16px;
}
h6 {
    margin-bottom: 12px;
    line-height: 1.25;
    font-size: 12px;
}
/* =======================================================
	黒帯ページタイトル
========================================================== */
.pageTitleBlackBelt {
    background: #000000;
    padding: 0;
    text-align: center;
}
.pageTitleBlackBelt * {
    margin: 0;
    padding: 0;
    font-size: 0;
}

@media print, screen and (min-width: 768px) { /**/
.pageTitleBlackBelt {
}
.pageTitleBlackBelt img {
    width: 100%;
    height: auto;
    max-width: 980px;
}
}

@media screen and (max-width: 767px) { /**/
.pageTitleBlackBelt {
    padding-top: 20px;
    padding-bottom: 20px;
}
.pageTitleBlackBelt img {
    width: 100%;
    height: auto;
    max-width: 228px;
}
}
/* =======================================================
	黒帯タイトル（市松ライン＋オレンジライン）
========================================================== */
.titleBlackBelt {
    position: relative;
    border-bottom: 3px solid #feb900;
    background: #000000;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    text-align: center;
    line-height: 1;
    font-weight: normal;
    color: #ffffff;
}
.titleBlackBelt:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/contents/wall-check_BW.png);
    width: 100%;
    height: 2px;
}

@media print, screen and (min-width: 768px) { /**/
.titleBlackBelt { font-size: 32px; }
}

@media screen and (max-width: 767px) { /**/
.titleBlackBelt {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 26px;
}
}
/* =======================================================
	キャプション付タイトル
========================================================== */
.titleWithCaption {
    margin-bottom: 0.75em;
    color: #000000;
    text-align: center;
    font-weight: normal;
    line-height: 1.25;
}
.titleWithCaption small {
    display: block;
    margin-top: 0.75em;
    color: #E59700;
}

@media print, screen and (min-width: 768px) { /**/
.titleWithCaption { font-size: 40px; }
.titleWithCaption small { font-size: 17px; }
}

@media screen and (max-width: 767px) { /**/
.titleWithCaption { font-size: 20px; }
.titleWithCaption small { font-size: 10px; }
}
/* =======================================================
	ボックスタイトル
========================================================== */
.titleBorderBox {
    margin-bottom: 1.75em;
    text-align: center;
}
.titleBorderBox span {
    display: inline-block;
    position: relative;
    border-radius: 4px;
    background: #fffae8;
    margin: 0 auto;
    font-weight: normal;
    color: #E59700;
    padding: 0.75em;
}
.titleBorderBox span:before {
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -3px;
    left: -3px;
    border-radius: 4px;
    background: url(../img/contents/wall-check_OW.png);
    width: 100%;
    height: 100%;
    padding: 3px;
}

@media print, screen and (min-width: 768px) { /**/
.titleBorderBox span {
    font-size: 28px;
    min-width: 560px;
}
}

@media screen and (max-width: 767px) { /**/
.titleBorderBox span { font-size: 16px; }
}
/* =======================================================
	タイトル○○でできること
========================================================== */
.titleAble {
    position: relative;
    margin-bottom: 0.75em;
    padding: 0 0.4em 0.4em;
    text-align: center;
    font-weight: normal;
}
.titleAble:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #DDDDDD;
    width: 260px;
    height: 3px;
}
.titleAble small {
    display: block;
    margin-bottom: 0.2em;
}
.titleAble small img {
    width: auto;
    height: 0.95em;
}

@media print, screen and (min-width: 768px) { /**/
.titleAble { font-size: 40px; }
}

@media screen and (max-width: 767px) { /**/
.titleAble { font-size: 20px; }
}
/* =======================================================
	タイトル○○でできること
========================================================== */
.titleBorderTopBottom {
    position: relative;
    margin-bottom: 1.5em;
    padding: 1em 0 0.8em;
    text-align: center;
    line-height: 1;
    font-weight: normal;
}
.titleBorderTopBottom:before,
.titleBorderTopBottom:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    background: url(../img/contents/wall-check_OW.png);
    width: 100%;
}
.titleBorderTopBottom:before { top: 0; }
.titleBorderTopBottom:after { bottom: 0; }

@media print, screen and (min-width: 768px) { /**/
.titleBorderTopBottom { font-size: 32px; }
.titleBorderTopBottom:before,
 .titleBorderTopBottom:after { height: 2px; }
}

@media screen and (max-width: 767px) { /**/
.titleBorderTopBottom { font-size: 13px; }
.titleBorderTopBottom:before,
 .titleBorderTopBottom:after { height: 3px; }
}
/* ====================================================
　帯背景
==================================================== */
.wallBelt.gray { background: #f8f8f8; }
.wallBelt.orange { background: #ffeab2; }
.wallBelt.orange + .gray { border-top: 2px solid #ffffff; }

@media print, screen and (min-width: 768px) { /**/
.wallBelt {
    padding: 60px 0;
    overflow: hidden;
}
.wallBelt.narrow { padding: 30px 0; }
}

@media screen and (max-width: 767px) { /**/
.wallBelt { padding: 30px 0; }
.wallBelt.narrow { padding: 15px 0; }
}

@media print, screen and (min-width: 768px) {
.wallBelt:first-child { padding-top: 0; }
}
.wallBelt.white { background: #ffffff; }
.wallBelt.black { background: #000000; }