@charset "UTF-8";

/* body { color:#202020; font-family:sans-serif; font-size:0.8em; } */

html {
  font-size: 62.5%;
}

body {
  font-size: 1.4em;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
   Header Section PC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.head { margin-bottom:0; }
.head:after { content:''; display:block; clear:both; height:0; }
.headInner { width:98%; max-width:1004px; margin:0 auto; padding-bottom:0px; }
.header { margin-bottom:10px; }
.header:after { content:''; display:block; clear:both; height:0; }
.HeadLogo { float:left; width:18%; padding-top:10px; }
.HeadLogo .SP { display:none; }
.SPNav { display:none; }
.HeadLogo h1 {margin-bottom: 0vh;text-align: center;font-weight: 700;font-size: 1.8em;margin-top: 0;}
.HeadAside { float:left; width:82%; }
.HeadAsideTranslate { margin-bottom:10px; }
.HeadAsideTranslate:after { content:''; display:block; clear:both; height:0; }
.HeadAsideTranslate ul { float:right; }
.HeadAsideTranslate li { float:left; }
.HeadAsideTranslate li a:hover { opacity:0.85; }
.HeadAsideTranslate li:nth-child(1) { margin-right:1px; margin-top:10px; }
.HeadAsideTranslate li:nth-child(2) { margin-right:1px; margin-top:10px; }
.HeadAsideTranslate li:nth-child(3) { margin-right:1px; margin-top:10px; }
.HeadAsideTranslate li:nth-child(4) { margin-top:10px; }

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
   Header Section Tablet
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 729px) and (max-width: 950px) {
.HeadLogo img { display:none; }
.HeadLogo .SP { display:block; width:auto; height:40px; }
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
   Header Section Smartphone
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 320px) and (max-width: 728px) {
.head { margin-bottom:0px; }
.head:after { content:''; display:block; clear:both; height:0; }
.headInner { width:100%; margin:0; padding-bottom:0px; }
.header { margin-bottom:10px; }
.header:after { content:''; display:block; clear:both; height:0; }
.HeadLogo { position:relative; float:left; width:50%; margin:0 auto; padding:10px 0 0 3%; box-sizing:border-box; }
.HeadLogo img { display:none; }
.HeadLogo .SP { display:block; width:auto; height:40px; }
.HeadLogo.active { display:block; position:fixed; top:0; left:0; z-index:200; width:100%; height:60px; padding:10px; background:rgba(255,255,255,0.9); }
.HeadAside { float:right; width:100%; margin:-50px auto -10px auto; }
.HeadAsideTranslate { /*margin-right:50px;*/ padding:0 3% 0 0 ; }
.HeadAsideTranslate:after { content:''; display:block; clear:both; height:0; }
.HeadAsideTranslate ul { float:none; }
.HeadAsideTranslate li { float:right; }
.HeadAsideTranslate li a:hover { opacity:0.85; }
.HeadAsideTranslate li:nth-child(1) { display:none; /*margin-right:5px; padding-top:5px;*/ }
.HeadAsideTranslate li:nth-child(2) { display:none; margin-right:1px; }
.HeadAsideTranslate li:nth-child(2) a { display:block; padding:0 20px; color:#fff; line-height:32px; font-size:0.9em; text-decoration:none; background:#ff7300; }
.HeadAsideTranslate li:nth-child(2) a span { display:inline-block; margin-left:0.4em; padding-left:16px; font-size:1.25em; font-weight:600; background:url('/assets/img/common/icon_head_login.png') no-repeat 0  center; background-size:auto 0.85em; }
.HeadAsideTranslate li:nth-child(3) { display:none; margin-right:1px; }
.HeadAsideTranslate li:nth-child(3) a { display:block; padding:0 20px; color:#fff; line-height:33px; font-size:1.15em; font-weight:600; text-decoration:none; background:#14a83b; }
.HeadAsideTranslate li:nth-child(3) a span { display:inline-block; padding-left:18px; background:url('/assets/img/common/icon_head_contact.png') no-repeat 0 center; background-size:auto 0.85em; }
.HeadAsideTranslate li:nth-child(4) { display:none; margin-right:1px; }
.HeadAsideSNS { position:relative; overflow:auto; width:100%; height:30px; margin-top:25px; display:none;}
.HeadAsideSNS:after { content:''; display:block; clear:both; height:0; }
.HeadAsideSNS ul { float:none; font-size:0.85em; }
.HeadAsideSNS li { float:left; }
.HeadAsideSNS li:nth-child(1) { display:none; margin-right:10px; padding-top:0.55em; }
.HeadAsideSNS li:nth-child(1) a { display:block; padding-left:18px; color:#666; text-decoration:none; background:url('/assets/img/common/icon_head_sitemap.png') no-repeat; background-size:auto 0.9em; }
.HeadAsideSNS li:nth-child(2) { width:110px; margin-top:2px; margin-left:5px; }
.HeadAsideSNS li:nth-child(2) iframe { width:100% !important; height:30px !important; }
.HeadAsideSNS li:nth-child(3) { margin-top:2px; margin-right:2px; }
.HeadAsideSNS li:nth-child(4) { position:relative; width:64px; margin-top:0; }
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
   Header Section Gloabl MENU PC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {  box-sizing: border-box;}
a {  color: #666;}
a:hover {  color: #ccc!important;}
.description {position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);}
.menu-container {width: 100%;margin: 0 auto;background: #000000;text-align: left;}
.menu {width:100%;max-width: 1004px;margin: 0 auto;}
.menu-mobile {display: none;padding: 20px;/*font-size: 120%;*/font-weight: 600;}
/* .menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);} */
.menu-mobile:after {
    content: url(/assets/img/common/menu.svg);
    width: 25px;
    height:25px;
    float: right;
    position: relative;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-mobile:hover:after{
    content: url(/assets/img/common/menu2.svg);
}
.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;}
.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
    font-size: 95%!important;
}
.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}
.menu > ul:after {
    clear: both;
}
.menu > ul > li {
    float: left;
    text-align: center;
    background: #000000;
    width: calc(100% / 5);
    /* width: calc(1004px / 6); */
    /* padding-top: 5px;
    padding-bottom: 5px; */
    margin: 0;
    border-left: 1px solid #666;
}
.menu > ul > li:last-child {border-right: 1px solid #666;}
.menu > ul > li a {text-decoration: none;padding: 1.7em 3em;display: block;color: #fff;}
.menu > ul > li:hover {background: #000000;}
.menu > ul > li > ul {
    display: none;
    width: 1004px;
    background: #000000;
    padding: 10px;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0 0 0 0px;
    /* margin: 0; */
    list-style: none;
    box-sizing: border-box;}
.menu > ul > li > ul:after {
  content: "";
  display: table;
}
.menu > ul > li > ul:after {clear: both;}
.menu > ul > li > ul > li {
    margin: 0;
    padding-bottom: 0;
    /* padding-left: 25px; */
    text-align: left;
    list-style: none;
    width: 25%;
    padding: 0.5em 0;
    background: none;
    float: left;
}
.menu > ul > li > ul > li img {padding-left: 0;}
.menu > ul > li > ul > li a {
    color: #fff;
    padding: .2em 0;
    /* width: 95%; */
    display: block;
    border-bottom: 1px solid #999;
}
.menu > ul > li > ul > li a::before {
 content: url(/assets/img/common/menuarrow.svg);
 width:5px;
  float: left;
  padding: 0 0.5em 0.5em 0.5em;
  background: #000;
  color: #fff;
}
.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    margin: 10px 5px 0 5px;
    list-style: none;
    box-sizing: border-box;
}
.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {content: "";display: table;}
.menu > ul > li > ul > li > ul:after {clear: both;}
.menu > ul > li > ul > li > ul > li {
    float: left;
    width: 100%;
    padding: 10px 0;
    margin: 10px 0 0 0;
    font-size: 1.0em;
    border-bottom: 1px solid #333;
    height: 42px;
}
.menu > ul > li > ul > li > ul > li a {  border: 0;}

.menu > ul > li > ul.normal-sub {
    width: 220px;
    /* width: calc(1004px / 5); */
    left: auto;
    padding: 10px 10px;
    margin-left: -10px;
}
.menu > ul > li > ul.normal-sub > li {  width: 100%;border-bottom: 1px solid #333;}
.menu > ul > li > ul.normal-sub > li a {  border: 0;padding: 1em 0;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
   Header Section Gloabl MENU Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 896px) {
  .menu-container {width: 100%;}
  .menu-mobile {display: block;}
  .menu-dropdown-icon:before {display: block;}
  .menu > ul {display: none;}
  .menu > ul > li {width: 100%;float: none;display: block;}
  .menu > ul > li a {
      text-align: left;
      padding: 1.5em;
      width: 100%;
      display: block;
  }
  .menu > ul > li > ul {position: relative;width: 100%;margin: 0;}
  .menu > ul > li > ul.normal-sub {width: 100%;margin-left: 0;}
  .menu > ul > li > ul > li {float: none;width: 100%;margin-top: 20px;padding-left: 0;}
  .menu > ul > li > ul > li:first-child {margin: 0;}
  .menu > ul > li > ul > li > ul {position: relative;}
  .menu > ul > li > ul > li > ul > li {float: none;}
  .menu .show-on-mobile {display: block;}
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
   Footer Section PC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.foot {padding-top:40px;padding-bottom: 40px;}
.foot:after { content:''; display:block; clear:both; height:0; }
.footInner {width: 100%;max-width: 1004px;margin: 0px auto;}

.footNav {margin-bottom:30px;padding: 30px 0;border-bottom:#eee 1px solid;border-top: #eee 1px solid;font-size: 95%;}
.footNav ul { float:none; width:100%; }
.footNav ul:after { content:''; display:block; clear:both; height:0; }
.footNav > ul > li { display:block; float:left; width:14%; }
.footNav > ul > li:first-child,
.footNav > ul > li:last-child,
.footNav > ul > li.home { width:8%; overflow:hidden; text-align: left;}
.footNav > ul > li.products { width:21%; overflow:hidden; text-align: left;margin: 0 0.75em 1.0em 0;padding-left: 10px;}
.footNav > ul > li.news { width:14%; overflow:hidden; text-align: left;}
.footNav > ul > li.support { width:18%; overflow:hidden; text-align: left;}
.footNav > ul > li.about { width:18%; overflow:hidden; text-align: left;}
.footNav > ul > li.document { width:20%; overflow:hidden; text-align: left;}
.footNav > ul > li a { display:inline-block; position:relative; margin:0 0.75em 1.0em 0; padding-left:10px; color:#666; font-weight:bolder; text-decoration:none; }
/*.footNav > ul > li a small { display:inline-block; margin:0 0.75em; color:#666; font-size:0.6em; font-weight:normal; }*/
.footNav > ul > li a small { /*display:inline-block;*/ margin:0 0 2 1em; color#999; font-size:0.5em; font-weight:normal; }
.footNav > ul > li a:before { content:''; display:block; position:absolute; top:0.3em; left:0; border:transparent 3px solid; border-left:#999 3px solid; }
.footNav > ul > li > ul { padding-left:1.0em; font-size:0.85em; }
.footNav > ul > li > ul li { margin-bottom:0.25em; }
.footNav > ul > li > ul li a { font-weight:normal; }

.footCopyright {  }
.footCopyright:after { content:''; display:block; clear:both; height:0; }
.footCopyright small { display:block; color:#666; font-family:Arial; font-size:0.85em; text-align:center; }

.sns{text-align: center;/* text-align: left; */width: 100%;margin-top: 1em;margin-bottom: -20px;display: flex;justify-content: center;/* float: left; */}
.sns span.tw{/* color: rgba(0, 172, 237, 1); *//* font-size: 2.3em; *//* margin-right: -0.7em; *//* margin-left: -0.7em; */}
.sns span.fb{/* color: rgba(30, 50, 97, 1); *//* font-size: 2.3em; *//* margin-right: .3em; */}
.sns span.is{/* color: rgba(0, 0, 0, 1); font-size: 2.3em; margin-right: 0;*/}
.sns a:hover{opacity:.8;}

.snsicon{
	padding-top: 2px;
	float:left;
	display:brock;
	margin-left:4px;
	width: 26px;
	}
.snsicon:first-child{margin-left:10px;}
.snsicon:first-child{margin-left:10px;}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
   Footer Section SP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 320px) and (max-width: 728px) {
	.foot { min-width:320px; padding-top:20px; }
	.foot:after { content:''; display:block; clear:both; height:0; }
	.footInner { width:94%; margin:0 auto 20px; }
	.footNav { margin-bottom:10px; padding-bottom:0; border-bottom:0; }
	.footNav ul { float:none; width:100%; text-align:center; }
	.footNav ul:after { content:''; display:block; clear:both; height:0; }
	.footNav > ul > li { display:inline-block; float:none; width:auto; }
	.footNav > ul > li.home,
	.footNav > ul > li.products,
	.footNav > ul > li.news,
	.footNav > ul > li.support,
	.footNav > ul > li.about,
	.footNav > ul > li.document { display:inline; float:none; width:auto; }
	.footNav > ul > li:first-child,
	.footNav > ul > li:last-child { width:auto; display:inline;}
	.footNav > ul > li a { display:inline-block; position:relative; margin:0 0.5em 1.0em 0; padding-left:10px; color:#666; font-size:0.8em; font-weight:normal; text-decoration:none; }
	.footNav > ul > li a small { display:none; margin:0 0.75em; color:#666; font-size:0.6em; font-weight:normal; }
	.footNav > ul > li a:before { content:''; display:block; position:absolute; top:0.3em; left:0; border:transparent 3px solid; border-left:#999 3px solid; }
	.footNav > ul > li > ul { display:none; padding-left:1.0em; font-size:0.85em; }
	.footNav > ul > li > ul li { margin-bottom:0.25em; }
	.footNav > ul > li > ul li a { font-weight:normal; }
	.footCopyright {  }
	.footCopyright:after { content:''; display:block; clear:both; height:0; }
	.footCopyright small { display:block; color:#666; font-family:Arial; font-size:0.8em; text-align:center; }
	.sns{text-align: center;width: 100%;margin-top: 1em;margin-bottom: 1em;}
}

/*-------------------------------------
	Pagetop
-------------------------------------*/
.pagetop { display:block; position:fixed; bottom:0px; right:0; z-index:199; width:50px; height:50px; background:rgba(0,0,0,0.1); }
.pagetop:before { content:''; display:block; position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-3px 0 0 -7px; border-top:rgba(255,255,255,1.0) 2px solid; border-right:rgba(255,255,255,1.0) 2px solid; transform:rotate(-45deg); }
/* SP */
@media (min-width: 320px) and (max-width: 728px){
.pagetop { display:block; position:fixed; bottom:0px; right:0; z-index:199; width:50px; height:50px; background:rgba(0,0,0,0.1); }
}

/*-------------------------------------
ハードウェア用サイドナビ
-------------------------------------*/
/*Chrome Hack*/
@media screen and (-webkit-min-device-pixel-ratio:0) {#h_gnav .Ttl{font-size: 1.1em;}}
/*IE Hack*/
@media all and (-ms-high-contrast: none){#h_gnav .Ttl{font-size: 1.1em;}}
/*Edge Hack*/
@supports (-ms-accelerator:true) {#h_gnav .Ttl{font-size: 1.1em;}}
/* PC */
.side .Ttl{padding-bottom: .5em;font-weight: bold;font-size: 1.14em;color:#474747;}
ul.side{display:flex;}
.side li{display:block;border-bottom: 1px solid #d6d5d5;}
.side li:nth-child(1){border-top: 1px solid #d6d5d5;}
.side li:last-child{/*border-bottom:none;*/}
.side li a{display:block;/* background: #eeeeee; */padding: 1em 0em 1em 2em;}
.side li a:hover{background:#247ba0; color:#ffffff;}
.side li a:hover:before{content:"\f061"; font-family:fontawesome; margin-right:1em;}
/* SP */
@media (min-width: 320px) and (max-width: 728px) {
.side .Ttl{background: #f9f9f9;padding: .5em 0 0 .5em;}
.side li a{padding:.5em 1.5em;}
.side li a:before{content:"\f0a9"; font-family:fontawesome; margin-right:1em;}
.side ul{margin-bottom:1em;}
.side li{display:block;border-bottom: 1px solid #eceaea;}
.side li:nth-child(1){border-top: 1px solid #eceaea;}
}
a{text-decoration:none; color:#444444;}
a:hover{color:#09F;}


/*追記??*/
.notes,.notes h3{line-height:2em;}
.notes h4{font-weight:bold;margin-top: 2em;margin-bottom: 2em;border-bottom: 1px solid #cecdcd;padding-bottom: .5em;width: 95%;font-size: 1em;color:#474747;}
.notes h5{padding: 1em;font-weight: bold;font-size: 1.24em;border-radius:4px;margin-bottom: 2em;text-align:left;background: #fafff7;box-shadow:0 0 3px 0 rgba(0,0,0,0.15);}
.notes h6{border-left: 6px solid #006600;padding-left: 1em;border-bottom:1px solid #999999;padding-bottom: .5em;}