﻿@charset "utf-8";
@-ms-viewport {width: device-width;}
/* =======================================

	カラー定義

======================================= */
:root {
/*SHARP color*/
	--turquoise: #12a7bb;		/*SHARP Turquoise blue*/
	--pale-turquoise: #dcf2f5;	/*Pale Turquoise blue*/
	--lightgray: #dcdfe1;		/*SHARP Lightgray*/
	--gray: #848687;			/*SHARP Gray*/
	--darkgray: #727672;		/*SHARP Darkgray*/
	--orange:#e47e13;		/*SHARP Orange*/
	--red:#e6000d;			/*SHARP Logo Red*/
/*HTML color*/
	--black: #303331;			/*Text color*/
	--white: #fff;			/*White color*/
	--basegray: #ccc;		/*System Basegray*/
	--palegray: #f0f0f0;		/*System Palegray*/
	--midiumgray: #555;		/*System Midiumgray*/
	--link: #0000ff;			/*Def Linkcolor (blue) */
}

/* =======================================

	書体定義 Font/JP

======================================= */
body {
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

/* =======================================

	基本定義 Base

======================================= */
html {
	font-size: 62.5%;
}
body {
	font-size: 1.4rem;
	color: #303331;
	/*IE*/
	text-rendering: optimizeLegibility;
	-webkit-font-kerning: normal;
	   -moz-font-kerning: normal;
	        font-kerning: normal;               
	-webkit-font-variant-ligatures: common-ligatures contextual;               
	        font-variant-ligatures: common-ligatures contextual;
	-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
	        font-feature-settings: "kern", "liga", "clig", "calt";
}
a {
	display: inline;
	/*display: inline-block; 20210729 上記修正*/
	text-decoration: underline;
	color: #0000ff;
}
dl {
	font-size: 0px;
}
dt, dd {
	margin: 0;
	padding: 0;
}
.separate {
	display: block;
	margin-top: 2em;
	margin-bottom: 2em;
	border-top: dotted 1px #848687;
	border-left: none;
	border-right: none;
	border-botom: none;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

/* =======================================

	基本レイアウト

======================================= */
#wrapper {
	max-width: 1280px;
	margin: 0 auto;
}
#mnHead {
	margin: 0 auto;
}
#headWrap {
	max-width: 1280px;
	margin: 0 auto;
}
#mnSidebar {
}
#mnContent {
	padding-top: 20px;
}
#navContent {
}
#gmenu {
	background-color: #12a7bb;
}
#mnFoot {
	margin-top: 5em;
	padding: 0;
}
/* iPad and Mobile */
@media screen and ( max-width:991px) {
	#mnContent {
		padding: 20px 15px 0 15px;
	}
	#mnFoot {
	margin-top: 0em;
	}
}

/* =======================================

	Base-H　タイトル系基本定義/JP

======================================= */
h1 {
	font-size: 3rem;
	font-weight: 600;
}
h2 {
	font-size: 2.4rem;
}
h3 {
	font-size: 2rem;
}
h4 {
	font-size: 1.8rem;
}
h5 {
	font-size: 1.4rem;
}

/* =======================================

	Header

======================================= */
#logoArea {
	width: 124px;
	height:43px;
}
#logoArea img {
	width: 100%;
	height:100%;
}
#siteTitle a {
	color: #303331;
	font-size: 1.6rem;
	line-height: 1.4em;
	text-decoration: none;
}
#mnHead p, #gmenu p {
	margin-bottom: 0;
}
#headWrap {
	height: 72px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
div#siteTitle {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	padding-left: 3em;
}

element.style {
}
#gmenuWrapper {
	max-width: 1280px;
	height: 50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0 auto;
	padding-right: 15px;
	padding-left: 15px;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

/* ヘッダ調整：モバイル480px以下でロゴ＆フォントサイズ調整 */
@media only screen and (max-width : 480px) {
	#logoArea img {
		max-width: 90px;
	}
	#siteTitle a {
		font-size: 1.4rem;
		line-height: 1.1em;
	}
	div#siteTitle {
		-webkit-box-flex: 1;
		    -ms-flex-positive: 1;
		        flex-grow: 1;
		padding-left: 15px;
	}
}
/* =======================================

	言語選択ボックス

======================================= */
.langMenu {
	height: 32px;
	vertical-align: middle;
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 0;
}
.langMenu div {
	display: inline-block;
	margin-right: 5px;
}
.langMenu select {
	display: inline-block;
	background-color: #727672;
	color: #fff;
	border-radius: 5px;
}
.langMenu option {
	width:130px;
	background-color: #727672;
	color: #fff;
	padding: 0.5em;
}
.langMenu span::before {
	content: '\f0ac';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 5px;
	font-size: 1.2em;
	vertical-align: middle;
}
.langMenu select:focus {
	outline: none;
}
.langMenu {
	font-size: 1.2rem;
}

/* iPad and Mobile */
@media only screen and (max-width : 991px) {
	.langMenu {
		border-top: dotted 1px #ccc;
		margin-top: 2em;
		margin-bottom: 5em;
		padding-left: 0.5em;
		padding-top: 2em;
	}
	.langMenu select {
		padding: 1em 2em;
	}
}
div.langMenu.mobile {
	text-align: center;
}

/* =======================================

	BreadList

======================================= */
.breadList ul {
	list-style-type: none;
	margin: 0;
	padding: .5em 0;
}
.breadList li {
	display: inline;
}
.breadList li a {
	font-size: 1.2rem;
	padding:0 .5em 0;
	vertical-align: middle;
	text-decoration: none;
	color: #303331;
}
.breadList li a:hover {
	color: #0000ff;
}
.breadList li:after {
	content: '\003e'; /* > */
	margin-left: 3px;
	margin-right: 3px;
}
.breadList li:last-child:after {
  content: ""; /* 最後のliの後ろには区切り文字を表示しない */
}
.bhome:before {
	content: '\f015';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 5px;
	font-size: 1.3em;
	vertical-align: middle;
}
.breadList.mobile {
	margin-top: 5em;
}
/* =======================================

	Page Navigation

======================================= */
.pnArea {
	border-top: dotted 1px #727672;
	margin-top: 3em;
	padding-top: 3em;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.backPage, .nextPage {
	display:inline-block;
	vertical-align: middle;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 7px;
	white-space: nowrap;
}
.backPage a, .nextPage a {
	color: #303331;
	text-decoration: none;
}
.backPage a:hover, .nextPage a:hover {
	color: #0000ff;
}
.backPage:before {
	content: '\f100'; /*angle-double-right*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 5px;
	font-size: 1.5em;
	vertical-align: middle;
	color: #848687;
}
.nextPage:after {
	content: '\f101'; /*angle-double-right*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: 5px;
	font-size: 1.5em;
	vertical-align: middle;
	color: #848687;
}
ul.pageNavi {
	display: inline-block;
	margin: 0;
	padding: 0;
}
.pageNavi li {
	display: inline-block;
	list-style: none;
	margin: 3px auto;
}
.pageNavi li a {
	padding:.5em 1em;
	border: solid 1px #848687;
	color: #303331;
	background-color: #fff;
	text-decoration: none;
}
.pageNavi li a:hover {
	background-color: #f0f0f0;
}

/* =======================================

	Footer

======================================= */
#mnFoot {
	background-color: #dcdfe1;
}
.nameWrap {
	margin: auto;
}
.modelName {
	font-size: 1.2rem;
	line-height: 1.6em;
	margin: auto;
	padding: 2.5em 0 2em 0;
	text-align: center;
}
.version {
	font-size: 1.0rem;
	line-height: 1em;
	text-align:right;
}
.footModel {
	margin: 0;
	padding: 0;
	font-size: 1.3rem;
	text-align: center;
	background-color: #727672;
}
.footWrap {
	background-color: #303331;
}
.footArea {
	max-width: 1280px;
	margin: auto;
	padding-top: .5em;
}
ul.footMenu {
	text-align: left;
	margin: 0;
	padding: 0 0 0 15px;
}
.footMenu li {
	display: inline-block;
	font-size: 1.1rem;
	list-style: none;
}
.footMenu li a {
	text-decoration: none;
	color: #dcdfe1;
}
.footMenu li a:hover {
	color: #dcdfe1;
}
.footMenu li:after {
	content: '|';
	color: #727672;
	font-size: 1.1rem;
	color: #dcdfe1;
	margin-left: .25em;
	margin-right: .25em;
	vertical-align: middle;
}
.footMenu li:last-child::after {
	content: none
}
#copyright {
	color: #dcdfe1;
	font-size: 1.1rem;
	padding-top: 5px;
	text-align: right;
}
/* PC*/
@media screen and ( max-width: 1199px) {
	ul.footMenu {
		text-align: center;
		padding-bottom: .5em;
	}
	.version {
	text-align: center;
	}
	#copyright {
		border-top: solid 1px #727672;
		text-align: center;
	}
}
/* =======================================

	drawer menu

======================================= */
i.drawButton {
	font-size: 2.8rem;
	color: #fff;
	display: none;
}
.closeBox {
	font-size: 2.8rem;
	color: #727672;
	text-align:right;
	padding: 5px;
	display: none;
	}
.sidebar {
	margin-top:20px;
}
/*iPad & Mobile*/
@media screen and ( max-width: 991px) {
	i.drawButton {
		display: block;
	}
	.closeBox {
		display: block;
	}
	.sidebar {
		margin-top:0;
		width: 350px;/*最大幅*/
		position: fixed;
		height: 100vh;
		background-color: #fff;
		top: 0;
		left: -350px;
		z-index: 99999;
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
		box-sizing: border-box;
		display: none;
		overflow-y: auto;
	}
	.sidebarWrap {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.sidebar::-webkit-scrollbar {
		width: 5px;
	}
	.drawBg {
		background-color: #000;
		width: 100vw;
		height: 100vh;
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: none;
	}
}

/* =======================================

	Sidemenu

======================================= */
ul#accordionBox {
	margin: 0;
	padding: 0;
}
ul#accordionBox li{
	list-style-type: none;
}

#accordionBox p {
	font-size: 1.4rem;
	color: #fff;
	background-color: #555;
	margin: 0;
	padding: 1em;
	border-bottom: solid 1px #fff;
	cursor: pointer;
 	position: relative;
}
#accordionBox p:hover{
	background-color: #848687;
}
#accordionBox img {
	width:32px;
}
#accordionBox p:after {
	content: '\f0fe'; /*plus-square*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	color: #dcdfe1;
	top: 50%;
	margin-top: -.5em;
	right: 10px;
}
#accordionBox p img {
	margin-right: .5em;
}
#accordionBox p a {
	color: #fff;
	text-decoration: none;
}
/*Menu Open Icon*/
#accordionBox p.mainOpened:after{
	content: '\f146'; /*minus-square*/
	font-family: "Font Awesome 5 Free";
}
#accordionBox p.smenuButton:after {
	content: none;
}
#accordionBox dt, #accordionBox dl {
	font-size: 1.4rem;
}
dt.subTrigger {
	font-weight: normal;
	border-bottom: dotted 1px #848687;
	padding: 1em;
	cursor: pointer;
}
dt.subTrigger:before {
	content: '\f105'; /*angle-right*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: .5em;
}
dt.subTrigger:hover {
	background-color: #dcf2f5;
}
dl.subList dd{
}
dl.subList dt {
	position: relative;
}
ul.sidem2 {
	padding: 0;
	margin-left: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}
.sidem2 li {
	font-size: 1.3rem;
	line-height: 1.4em;
	margin-bottom: 5px;

}
.sidem2 li a {
	text-decoration:none;
	color: #010608;
	display:block;
	padding: .5em 0.5em 0.5em 1em;
	margin-left:0.5em;
  	text-indent:-1.1em;
}
.sidem2 li:hover {
	background-color: #dcf2f5;
}
.sidem2 li a:before {
	content: '- ';
}
.subOpened {
	background-color: #dcf2f5;
}
.smenuTitle {
	font-size: 1.4rem;
	line-height: 1.4rem;
	font-weight: 900;
	background-color: #555;
	color: #fff;
	padding: .5em 1em;
	margin: 0 0 1px 0;
}
.menu_b1 a {
	display: block;
	border: solid 1px #dcdfe1;
	margin-bottom: 5px;
	padding: .5em;
}
.menu_b2 a {
	display: block;
	border: solid 1px #12a7bb;
	margin-bottom: 5px;
	padding: .5em;
}
ul.sideButton {
	margin: 2em 0 0 0;
	padding: 0;
}

.sideButton li {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}
.sideButton li a {
	display:block;
	padding: 1.5em 1em;
	margin-top: .5em;
	border: solid 1px #12a7bb;
	line-height: 1.4em;
        padding-left: 4em;
	text-decoration: none;
	color: #12a7bb;
}
.sbFaq a::before {
	content: '\f059'; /*question-circle*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: .5em;
	margin-right: .5em;
	font-size: 2em;
	color: #12a7bb;
	position: absolute;
	top: 35%;
	left: 0%;
}
.sbDownload a::before {
	content: '\f019'; /*download*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: .5em;
	margin-right: .5em;
	font-size: 2em;
	color: #12a7bb;
	vertical-align: middle;
	position: absolute;
	top: 35%;
	left: 0%;
}
.sideButton li a:hover {
	background-color: #dcf2f5;
}
/* iPad & Mobile */
@media screen and ( max-width:991px) {
	ul.sideButton {
		margin-left: 15px;
		margin-right: 15px;
	}
}

/* =======================================

	Contents: Process/System/H

======================================= */
.process h1, .system h1 {
	font-size: 2rem;
	line-height: 1.6em;
	color: #fff;
	background-color: #555;
	padding: 1.5em;
	border-radius: 6px;
	margin-top: 4em;
	margin-bottom: .5em;
}
.process h1:first-child, .system h1:first-child {
	margin-top: 0;
}
.process h2 {
	font-size: 1.3em;
	line-height: 1.4em;
	border-top: solid 1px #848687;
	border-bottom: solid 1px #848687;
	padding: 1em .8em;
	margin-top: 2em;
	margin-bottom:.5em;
	min-height: 52px;
}
.process h3 {
	font-size: 1.3em;
	line-height: 1.4em;
	background-color: #dcdfe1;
	padding: .5em .8em;
	margin-top: 2em;
}
.process h4 {
	font-size: 1.4rem;
	line-height: 1.4em;
	border-bottom: solid 1px #848687;
	padding: .5em .8em .3em .8em;
	margin-top: 2em;
}
.process h5 {
	font-size: 1.4rem;
	line-height: 1.4em;
	padding: .5em .8em .3em 0;
	margin-top: 2em;
	font-weight: 600;
}
.process h5::before {
	content: '■';
}
.process p {
	line-height:1.8em;
	margin-bottom: 1em;
}
/* =======================================

	Contents: Process/accordion

======================================= */
h2.accTitle {
	line-height: 1.4em;
	border-top: solid 1px #848687;
	border-bottom: solid 1px #848687;
	padding: 0 1em 0 .8em;
	vertical-align: middle;
	margin: 0;
}
h2.accTitle span {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 50px;
	min-height: 52px;
	 /* 縦方向中央揃え */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; /* 縦方向中央揃え（Safari用） */
	 -webkit-box-align: center;
	  -ms-flex-align: center;
	      align-items: center; /* 縦方向中央揃え */
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, h2.accTitle span { height: 52px; } /* IE11 */
}
.accWrap .accTitle {
	font-size: 1.3em;
	position: relative;
	margin: 2em 0 .5em 0;
	font-weight: normal;
	cursor: pointer;
}
.accWrap .accTitle:hover,
.accWrap .accTitle:active,
.accTitle.open { 
	/*background-color:#f0f0f0;*/
}
.accWrap .accTitle::before {
	font-size: 2em;
	content: '\f054'; /*chevron-right*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	background-color: #f0f0f0;
	position: absolute;
	height:100%;
	color: #848687;
	padding: 0 22px;
	text-align: center;
	top: 0;
	right:0;
	 /* 縦方向中央揃え */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; /* 縦方向中央揃え（Safari用） */
	 -webkit-box-align: center;
	  -ms-flex-align: center;
	      align-items: center; /* 縦方向中央揃え */
}
.accWrap .accTitle::after {
	content: '';
	font-size: 2.5em;
  	position: absolute;
	width: 100px;
	top: 50%;
	right: 25px;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.accWrap .accTitle.open::before {
	content: '\f078'; /*chevron-down*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding: 0 17px;
  /*transform: rotate(90deg);*/
}

.accWrap .accTitle.open::after {
  opacity: 0;
}
.accCont {
	padding-bottom: 3em;
}

/* =======================================

	Contents: Process/system

======================================= */
.procedure p, system p {
	margin-left: 4rem;
}
p.at {
	font-size: 1.6rem;
	line-height: 1.4em;
	margin-left: 4rem;
	font-weight: 600;
	margin-bottom: .5em;
	margin-top: 3em;
  	text-indent: -4rem;
}
.procedure {
	counter-reset: number 0;
}
.proText {
}
.procedure .at:before {
	counter-increment: number 1;
	content: counter(number) " ";
  	text-indent: 0em;
	font-size: 2rem;
	width: 3.5rem;
	line-height: 2.6rem;
	text-align: center;
	display: inline-block;
	height: 2.6rem;
	margin-right: .2em;
	background: #727672;
	color: #fff;
	border-radius: 20%;
	-webkit-transform: scale(.9);
	    -ms-transform: scale(.9);
	        transform: scale(.9);
}
p.noneStep {
	font-size: 1.6rem;
	line-height: 1.4em;
	margin-left: 0rem;
	font-weight: 600;
	margin-bottom: .3em;
	margin-top: 3em;
  	text-indent: 0rem;
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .procedure .at:before { line-height: 1.4; } /* IE11 */
}
.proImg img {
	border: solid 0px #727672;
	border-radius: 5px;
}
.proImg {
	max-width: 450px;
	margin-left: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.qaImg img {
	border: solid 0px #727672;
	border-radius: 5px;
}
.qaImg {
	min-width: 100px;
	/*max-width: 450px;*/
	margin-left: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.proImg2 img {
	border: solid 2px #848687;
	border-radius: 5px;
}
.proImg2 {
	margin-bottom: 3em;
	max-width: 450px;
}
.procedure .memoBox,
.procedure .sysBox,
.procedure .attentBox,
.procedure .warningBox,
.procedure .howtoBox {
	margin-left: 3em;
}

/* =======================================

	Contents: Box

======================================= */
.memoBox {
	font-size:1.4rem;
	background: url("../img/ic_memo.png")  no-repeat 1em 1em;
	margin: 1em 0;
	background-color: #f0f0f0;
	padding: 3.5em 1em .5em 1em;
}
.memoBox ul,
.attentBox ul,
.warningBox ul,
.howtoBox ul {
	padding-left: 20px;
}
/*.memoBox li, .howtoBox li, .sysBox li {
	margin-bottom: .5em;
}*/
.procedure .memoBox p,
.procedure .attentBox p,
.procedure .warningBox p,
.procedure .howtoBox p {
	margin-left: 0;
}
.howtoBox h3, .sysBox h3 {
	color: #727672;
	margin-top:1em;
}
.attentBox {
	color: #e6000d;
	margin: 1em 0;
	border: solid 1px #e6000d;
	padding: .5em 1em;
}
p.attentTitle {
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: 0;
}
.attentTitle::before {
	font-size: 2rem;
	content: '\f06a'; /*exclamation-triangle*/
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	margin-right: .25em;
}
.howtoBox {
	font-size: 1.4rem;
	background: url("../img/ic_howto.png")  no-repeat 0.5em 0.5em;
	margin: 2em 0 2em 0;
	padding: 1em 1em 1em 3.5em;
	background-color: #dcf2f5;
}
.sysBox {
	font-size:1.4rem;
	background: url("../img/ic_system.png")  no-repeat 0.5em 0.5em;
	margin: 2em 0 2em 0;
	padding: 1em 1em 1em 3.5em;
	padding-top: 1em;
	background-color: #dcf2f5;
}
.warningBox {
	color: #e6000d;
	margin: 1em 0;
	border: solid 1px #e6000d;
	padding: .5em 1em;
}
p.warningTitle {
	font-size: 1.8rem;
	font-weight: 600;
	margin-bottom: 0;
}
.warningTitle::before {
	font-size: 2rem;
	content: '\f071'; /*exclamation-triangle*/
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	margin-right: .25em;
}

/* =======================================

	各部の名称

======================================= */
.nameTitle {
	font-weight:bold;
	margin: 2em 0 0 0;
	font-size: 1.2em;
	padding: 1em;
	border: solid 1px #dcdfe1;
	border-radius: 5px 5px 0 0;
}
dl.nameBox {
	margin-top: 30px;
}
.nameBox dt {
	/*border-bottom: dotted 1px #848687;*/
	padding-top: .7em;
	padding-bottom: .7em;
}
.nameBox span {
	font-size: .9em;
}
.nameBox dd {
	font-size: 1.4rem;
	margin-left: 2em;
	padding-bottom: 1em;
}
p.pageLinks {
	margin-top: -1em;
}
p.pageLinks a {
	color: #0000ff;
}
p.pageLinks::before {
	content: '\f061'; /*arrow-right*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	padding-right: .5em;
}
/*名称用丸数字リスト*/
.nameBox {
	padding: 1em;
	counter-reset: my-counter;
	list-style: none;
	margin: 0;
}
.nameBox dt {
	font-size: 1.6rem;
	line-height: 1.5em;
	padding-left: 2em;
	padding-top: .5em;
	position: relative;
	margin-bottom: .5em;
}
.nameBox dt .toolTip { font-weight: 400; }
.nameBox dt:before {
	content: counter(my-counter);
	counter-increment: my-counter;
	background-color: #fff;
	border: 1px solid #848687;
	border-radius: 50%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 22px;
	width: 22px;
	color: #848687;
	font-size: 85%;
	line-height: 1;
	position: absolute;
	top: .7em;
	left: 0;
}

/* =======================================

	Contents: Zoomer

=======================================*/
.zoomer_wrapper{
     border-bottom: 1px solid #dcdfe1;
     border-left: 1px solid #dcdfe1;
     border-right: 1px solid #dcdfe1;
   border-radius: 0 0 5px 5px;
    height: 450px;
    margin: 0;
    overflow: hidden;
    width: 100%;
		background:#fff;
}
/*for mobile*/
@media screen and ( max-width:580px) {
	.zoomer_wrapper{
	    height: 300px;
	}
}

/* =======================================

	Table

======================================= */

/*hyouDef スマホ時横スクロール表示*/
table.hyouDef {
	width:100%;
	font-size: 1.4rem;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	margin-bottom: 2em;
}
.hyouDef th {
	white-space: nowrap;
	padding: .8em;
	font-weight: 600;
	text-align: left;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	background-color: #f0f0f0;
}
.hyouDef td {
	padding: .8em;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
td.hyouDefsub {
	background-color: #f0f0f0;
	z-index:99;
}
/*hyouDef スマホのみ：横スクロールの仕込み*/
@media screen and ( max-width:580px) {
	table.hyouDef {
		white-space: nowrap;
		display: block;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.hyouDef tbody th {
		width: 150px;
		min-width: 150px;
		white-space: normal;
	}
	.hyouDef th {
		/*position: -webkit-sticky;*/
		/*position: sticky;*/
		z-index: 9999;
		left: 0;
		border-right: solid 1px #ccc;
	 }
	th.hyouDefsub, td.hyouDefsub {
		background-color: #f0f0f0;
	  	position: relative;
		z-index: 1;
	}
}

/*hyouDef スマホ時横スクロール表示*/
table.hyouDefCus {
	width:100%;
	font-size: 1.4rem;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	margin-bottom: 2em;
}
.hyouDefCus th {
	padding: .8em;
	font-weight: 600;
	text-align: left;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	background-color: #f0f0f0;
}
.hyouDefCus td {
	padding: .8em;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
td.hyouDefCussub {
	background-color: #f0f0f0;
	z-index:99;
}
/*hyouDef スマホのみ：横スクロールの仕込み*/
@media screen and ( max-width:580px) {
	table.hyouDefCus {
		white-space: nowrap;
		display: block;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.hyouDefCus tbody th {
		width: 150px;
		min-width: 150px;
		white-space: normal;
	}
	.hyouDefCus th {
		position: -webkit-sticky;
		position: sticky;
		z-index: 9999;
		left: 0;
		border-right: solid 1px #ccc;
	 }
	th.hyouDefCussub, td.hyouDefsub {
		background-color: #f0f0f0;
	  	position: relative;
		z-index: 1;
	}
}

/*hyouDef_qa */

table.hyouDef_qa {
	width:100%;
	font-size: 1.4rem;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	margin-bottom: 2em;
}
.hyouDef_qa th {
	width:30%;
	padding: .8em;
	font-weight: 600;
	text-align: left;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	background-color: #f0f0f0;
}
.hyouDef_qa td {
	width:70%;
	padding: .8em;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
td.hyouDef_qasub {
	background-color: #f0f0f0;
	z-index:99;
}


@media screen and ( max-width:580px) {
	table.hyouDef_qa {
		/*white-space: nowrap;*/
		display: block;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.hyouDef_qa tbody th {
		width: 150px;
		min-width: 150px;
		white-space: normal;
	}
	.hyouDef_qa th {
		position: -webkit-sticky;
		position: sticky;
		z-index: 9999;
		left: 0;
		border-right: solid 1px #ccc;
	 }
	th.hyouDef_qasub, td.hyouDef_qasub {
		width: 300px;
		background-color: #f0f0f0;
	  	position: relative;
		z-index: 1;
	}
}

/*hyouSort スマホ時並べ替え*/
table.hyouSort {
	font-size: 1.4rem;
	width: 100%;
	border-space: 0;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	margin-bottom: 2em;
}
.hyouSort th {
	font-weight: 400;
	text-align: left;
	background-color: #f0f0f0;
	white-space: nowrap;
	padding: .8em;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
.hyouSort td {
	padding: .8em;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}
/*スマホのみ：項目並び替え*/
@media screen and ( max-width:580px) {
	.hyouSort th, .hyouSort td {
		display: block;
	}
	.hyouSort td {
		padding-left: 1.5em;
		border-left: none;

	}
	.hyouSort th:before {
		content:'■';
	}
}

/* =======================================

	注釈ツールチップ

======================================= */

a.clickTT {
	font-weight: 900;
	font-size: 1.2rem;
	margin: 0;
	padding: .3em .8em;
	background-color: #848687;
	border-radius: 6px;
	text-decoration: none;
	color: #fff;
	position: relative;
	margin-left: .5em;
	cursor: pointer;
	top: -1px;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
a.clickTT:hover {
	color: #fff;
}
a.clickTT::before {
	content: '\f4ad'; /*download*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	vertical-align: middle;
	margin-right: .5em;
	font-size: 1.6em;
}
p.toolTip {
	font-size:1.3rem;
	font-weight: normal;
	line-height:1.4em;
	margin: 0;
	padding: 10px;
	width: 300px;
	min-height: 30px;
	background-color: #000;
	opacity: .7;
	border-radius: 5px;
	color: #fff;
	position: absolute;
	z-index: 9999999;
	white-space: normal;
}
.toolTip p {
	position: relative;
}


/* =======================================

	pagetop UI

======================================= */
#pageTop a {
	position: fixed;
	position: fixed;
	bottom: 100px;
	right: 20px;
	opacity: .3;
	z-index:9999;
}
#pageTop a:hover {
	opacity: .6;
}

/* =======================================

	SearchBox UI

======================================= */
.sbSearch {
	height: 44px;
	float: right;
	border-radius:5px;
	background-color: #fff;
}
.sbSearch-input {
	display: inline-block;
	font-size: 1.4rem;
	border: none;
	outline: none;
	width: 30em;
	margin: 0;
	z-index: 10;
	padding: 10px 50px 10px 10px;
	vertical-align: middle;
}
input[type="search"].sbSearch-input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}
.sbSearch-input::-webkit-input-placeholder {
    color: ver(--lightgray);
}
.sbSearch-input:-moz-placeholder {
    color: ver(--lightgray);
}
.sbSearch-input::-moz-placeholder {
    color: ver(--lightgray);
}
.sbSearch-input:-ms-input-placeholder {
    color:  ver(--lightgray);
}
.sbSearch-submit {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	vertical-align: middle;
	font-size: 2.4rem;
	color: #fff;
	display: inline-block;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	text-align: center;
	cursor: pointer;
	border: solid 1px #fff;
	border-radius:5px;
	z-index: -999999;
	background: #12a7bb;
	z-index: 90;
	vertical-align: middle;
}

/* Only Mobile */
@media only screen and (max-width : 580px) {
	.sbSearch-input {
		width: 18em;
	}
}
/* =======================================

	Only Index CSS

======================================= */
#indexModelname {
	width: 100%;
	font-size: 2.6rem;
	line-height: 1.6em;
	margin: 1em 15px 0 15px;
	text-align: center;
	border: solid 1px #12a7bb;
	color: #12a7bb;
	padding: 1em 2em;
	border-radius: 10px;
}
#indexModelname span {
	display: block;
	font-size: 2.2rem;
}
#indexCont {
}

/*Accordion Menu*/
#indexSide h2, #indexCont h2 {
	font-size: 1.6rem;
	font-weight: 900;
	margin-top: 2em;
	margin-bottom: .5em;
}
#indexSide h2::before, #indexCont h2::before {
	content: '■ ';
	font-weight: 900;
}
#indexSide #accordionBox p {
	font-size: 1.8rem;
	border-radius: 5px;
	padding: 1em 1em;
	margin-bottom: .5em;
}
#indexSide #accordionBox img {
	width: 42px;
}
#indexSide #accordionBox dt {
	font-size: 1.6rem;
}
#indexSide .sidem2 li {
	font-size: 1.4rem;
}

/*Quick Menu*/
ul.quickMenu {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border-left: solid 1px #555;
	border-top: solid 1px #555;
}
.quickMenu li {
	font-size: 1.5rem;
	list-style: none;
	width: calc(100% / 3) ;
	font-weight: 600;
	background-color: #fff;
	border-right: solid 1px #555;
	border-bottom: solid 1px #555;
}
.quickMenu li a {
  	width: 100%;
	display:block;
	text-align: center;
	padding: 1.2em 2em;
	color: #555;
	text-decoration: none;
}
.quickMenu li:hover {
	background-color: #f0f0f0;
}
li.quickBlank {
	background-color: #f0f0f0;
}

/*Pickup Menu*/
ul.pickupMenu {
	margin: 1em 0 0 0;
	padding: 0;
}
.pickupMenu li {
	list-style: none;
	font-size: 1.5rem;
	background-color: #fff;
	border: solid 1px #555;
	margin-bottom: .5em;
}
.pickupMenu li img {
	margin-right: .5em;
}
.pickupMenu li a {
	display: block;
	padding: 1em 1.5em;
	color: #555;
	text-decoration: none;
}
.pickupMenu li a:hover {
	background-color: #f0f0f0;
}
/* iPad and Mobile */
@media screen and ( max-width:991px) {
	.quickMenu li {
		width: calc(100% / 2) ;
		font-size:1.3rem;
	}
	.quickBlank {
		display:none;
	}
	#indexSide #accordionBox p {
		font-size:1.6rem;
	}
	.tbFaq a::before, .tbDownload a::before {
		display: block;
	}
	.download li {
		text-align:center;
		padding: 1em;
	}
	.quickMenu img {
		width:80%;
	}
}
/* Only Mobile */
@media only screen and (max-width : 580px) {
	#indexModelname {
		font-size: 1.8rem;
		line-height: 1.4em;
		margin: 20px 15px 0 15px;
		padding: 10px 5px;
	}
	#indexModelname span {
		font-size: 1.2rem;
	}
	#indexSide h2, #indexCont h2 {
		font-size: 1.4rem;
		margin-top: 1em;
	}
	#indexSide #accordionBox p {
		font-size: 1.6rem;
		border-radius: 5px;
		padding: .8em 1em;
		margin-bottom: 1px;
	}
	#indexSide #accordionBox dt {
		font-size: 1.4rem;
	}
	#indexSide .sidem2 li {
		font-size: 1.4rem;
	}
	.quickMenu li {
		width: calc(100% / 2) ;
		font-size:1.3rem;
	}
	.quickMenu li a {
		padding: 1em  1.5em;
	}
	.quickMenu li img {
		width: 100px;
	}
	.quickWrap {
		background-color: #dcdfe1;
		padding:5px 15px 20px 15px;
		margin-top: 2em;
		border-radius: 5px;
	}
	ul.pickupMenu {
		margin: 20px 0;
	}
	.pickupMenu li a {
		padding: .8em 1em;
	}
}
ul.download {
	display: flex;
	justify-content: center;
	padding-top: 4em;
	margin-top: 3em;
	margin-left: 0;
	padding-left: 0;
	border-top: dotted 1px #848687;
}
.download li {
	list-style: none;
	background-color: #12a7bb;
	color: #fff;
	border-radius:5px;
	padding: .5em 2em;
	margin:0 .5em;
}
.download li:hover  {
	background-color: #29c1d5;
}
.download li a  {
	color: #fff;
	text-decoration: none;
}
.tbFaq a::before {
	content: '\f059'; /*question-circle*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	vertical-align: middle;
	margin-right: .5em;
	font-size: 1.6em;
}
.tbDownload a::before {
	content: '\f019'; /*download*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	vertical-align: middle;
	margin-right: .5em;
	font-size: 1.6em;
}
/* Only Mobile */
@media only screen and (max-width : 580px) {
	ul.download {
		display: block;
		margin-left: 0;
		padding-left: 0;
	}
	.download li {
		display: block;
		margin: 0 0 .5em 0;
		padding: 1em 2em;
	}
}

/* =======================================

	表示表示Switch（最下部に配置のこと）

======================================= */
/*PC*/
@media screen and (min-width: 991px) {
	.mobile {
		display:none;
	}
	.pc {
		display:block;
	}
}
/*iPad & Mobile*/
@media screen and (max-width: 991px) {
	.pc {
		display:none;
	}
	.mobile {
		display:block;
	}
}
/*Only Mobile*/
@media screen and (max-width: 580px) {
	.pc {
		display:none;
	}
	.mobile {
		display:block;
	}
}


#ref-show {
  display: none;
}

/* =======================================
	検索結果
======================================= */
.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 150%;
  overflow:auto; 
  -webkit-overflow-scrolling:touch;
  border:2px solid #ccc;
background-color:#ebeef0;
	border-radius:20px;
}
.iframe-wrap iframe {
    position:absolute;
    top:0;
    left:0;
    width:90%;
    height:98%;
    border:none;
    display:block;
	margin-top:-170px;
}

