@charset "UTF-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html, body {
  height: 100%;
  line-height: 1.5; }

body {
  color: #333333;
  background: #EDEDED;
  font-size: 100%;
  /* =16px */
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, Verdana, "ＭＳ Ｐゴシック", sans-serif;
  min-width: 300px;
  /*最小幅*/
  word-wrap: break-word;
  overflow-wrap: break-word;
  height: 100vh;
  /* fix IE11 */
  min-height: 100%;
  /* fix IE11 */
  display: flex;
  flex-direction: column;
  overflow-x: hidden; }

/*clearfix ie対策済み*/
.clearfix {
  zoom: 1; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

/*非表示*/
.disnon {
  display: none; }

a {
  text-decoration: none; }

a:link, a:active {
  color: #0066CC; }

a:visited {
  color: #003366; }

a:hover {
  color: #CC0066; }

/*--------------------------------------------*/
/*基本*/
/*--------------------------------------------*/
section {
  margin-bottom: 3em; }

img {
  border: none; }

h2 img,
h3 img,
h4 img {
  vertical-align: bottom; }

p {
  margin: 0 0 1.5em 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.3; }

h1 {
  font-size: 1.6rem;
  margin: 0 0 1em 0; }

h2 {
  font-size: 1.4rem;
  margin: 0 0 1em 0;
  padding: 0;
  /*color:#174E9D;*/
  border-bottom: 1px solid #174E9D; }

h3 {
  font-size: 1.2rem;
  margin: 0 0 1em 0;
  /*padding:0 5px;*/
  border-bottom: 1px solid #CCC; }

h4 {
  font-size: 1rem;
  background: #EEE;
  margin: 0 0 1em 0;
  padding: 3px 5px; }

h5 {
  font-size: 1rem;
  margin: 0 0 1em 0; }

h6 {
  font-size: 0.9rem;
  margin: 0 0 1em 0; }

ul {
  margin: 0 0 1.5em 1em;
  list-style: disc; }

ul ul {
  list-style: circle; }

ol {
  margin: 0 0 1.5em 1em; }

li {
  margin: 0 0 0.3em 0; }

ol.count {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0; }

ol.count ol {
  padding-left: 1em; }

ol.count li {
  text-indent: -1.6em;
  padding-left: 1.6em;
  margin-bottom: 1em; }

/*数字リストのマーカー*/
ol.count li:before {
  counter-increment: item;
  content: counter(item) ".";
  padding-right: .2em;
  font-size: 1.3rem;
  font-weight: 900;
  font-family: "Arial Black", Arial;
  color: #039; }

dl {
  margin: 0 0 1.5em 0; }

dt {
  font-weight: bold;
  margin: 0 0 0.3em 0;
  padding: 0px 2px; }

dd {
  margin: 0 0 1em 0; }

dd + dd {
  margin: -.7em 0 1em 0; }

strong {
  font-weight: bold;
  font-size: 1.1rem;
  font-style: normal; }

em {
  font-weight: normal;
  font-style: normal;
  color: #F00; }

/*特に強調*/
.strongstrong,
.faq div.strongstrong {
  border: 1px solid #F00;
  border-radius: 0;
  padding: 10px;
  color: #F00;
  background: #FFF;
  margin: 0 0 2em 0; }
  .strongstrong h3,
  .faq div.strongstrong h3 {
    background: #F00 !important;
    color: #FFF !important;
    border: none; }
  .strongstrong p,
  .faq div.strongstrong p {
    margin-bottom: 5px; }
  .strongstrong p:last-child,
  .strongstrong li:last-child,
  .faq div.strongstrong p:last-child,
  .faq div.strongstrong li:last-child {
    margin-bottom: 0; }
  .strongstrong ul,
  .faq div.strongstrong ul {
    margin: 0; }
  .strongstrong strong,
  .faq div.strongstrong strong {
    font-size: 1rem;
    color: #F00; }
  .strongstrong hr,
  .faq div.strongstrong hr {
    color: #F00; }
  .strongstrong .nonestrong,
  .faq div.strongstrong .nonestrong {
    color: #000; }

/*CFサポートページ　SE終了告知*/
.SupportTop h2 + .strongstrong {
  margin: 0 0 10px 0; }

hr {
  height: 1px;
  color: #CCC;
  background: #CCC;
  margin: 15px 0;
  padding: 0;
  border-width: 0;
  border-color: #CCC; }

p.description,
p.introtext {
  margin: 0 0 1em 0; }

.main_photo {
  text-align: center; }

/*注釈　見出し付き注釈*/
ul.note {
  list-style: none;
  margin: 0 0 2em 0;
  padding: 10px;
  background: #F6F6F6;
  border: 1px dashed #8BA6CE; }
  ul.note li {
    padding: 0 0 0 1em;
    text-indent: -1em; }
    ul.note li ul li {
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      text-indent: 0; }
  ul.note li:last-child {
    margin-bottom: 0; }
  ul.note ul {
    list-style: disc;
    margin: 0 0 0 1em; }

dl.note {
  margin: 0 0 2em 0;
  padding: 10px 10px 5px 10px;
  background: #F6F6F6;
  border: 1px dashed #8BA6CE; }
  dl.note dt {
    background: #DDD; }
  dl.note dd {
    text-indent: -2.5em;
    padding-left: 2.5em; }
  dl.note dd:last-child {
    margin-bottom: .3em; }

div.note {
  border: 1px solid #CCC;
  margin-bottom: 2em;
  padding: 10px 10px 0 10px; }
  div.note p {
    margin: 0 0 10px 0; }

p.note {
  text-indent: -1em;
  padding-left: 1em; }

/*--------------------------------------------*/
/*全体のコンテナ
/*--------------------------------------------*/
/*PC コンテンツ部*/
/*トップページ*/
/*その他のページ*/
main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px; }

.sitemain {
  display: table-cell;
  vertical-align: top; }

/*フッター部*/
footer {
  clear: both;
  width: 100%;
  height: auto;
  margin-top: 15px;
  padding-bottom: 10px;
  position: relative;
  background: #000; }

/*--------------------------------------------*/
/*ヘッダー*/
/*--------------------------------------------*/
header {
  display: flex;
  justify-content: space-between;
  background: #FFF;
  margin: 0;
  width: 100%;
  border-bottom: 8px solid #333; }
  header ul, header li {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  header > div:nth-of-type(2) {
    flex-grow: 2;
    display: flex;
    justify-content: flex-end;
    background: #174E9D; }
  header input {
    display: none; }
  header label {
    cursor: pointer; }
  header ul.header_menu {
    display: none; }

.homelinklogo {
  width: 110px; }
  .homelinklogo a {
    display: block;
    padding: 6px 5px; }
  .homelinklogo img {
    display: block;
    width: auto;
    max-height: 65px; }
  .homelinklogo a:hover img {
    filter: opacity(60%); }

/*shop search*/
.header_search {
  margin-right: 10px; }

.onlineshop a {
  color: #FFF; }
.onlineshop a:hover {
  /*color: #174E9D;*/
  color: #FFF; }
  .onlineshop a:hover div {
    /*background:#174E9D;*/
    background: #FFF; }
    .onlineshop a:hover div svg {
      /*fill:  #FFF;*/
      fill: #174E9D; }

.onlineshop,
.search__btn {
  font-size: 12px;
  line-height: 1;
  display: block;
  text-align: center;
  height: 100%;
  width: 60px;
  /*border-left: 1px solid #999;*/ }
  .onlineshop div,
  .search__btn div {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    margin: 10px auto 2px auto;
    transition: all .4s; }

.onlineshop svg,
.search__btn svg {
  width: 25px;
  margin: 8px auto 0 auto;
  /*fill: #999;*/
  fill: #FFF; }

/*検索パネル　div.header_search input#search__toggle*/
/*search開閉トグル radio*/
#search__toggle:checked ~ .search__btn {
  color: #FFF; }
#search__toggle:checked ~ .search__btn div {
  background: #174E9D;
  color: #FFF; }
#search__toggle:checked ~ .search__btn div > span:first-child, #search__toggle:checked ~ .search__btn div > span:nth-child(3) {
  display: block;
  height: 3px;
  width: 50%;
  position: absolute;
  left: 25%;
  top: calc(50% - 1.5px);
  filter: opacity(100%); }
#search__toggle:checked ~ .search__btn div > span:first-child {
  transform: rotate(-135deg);
  background: #FFF; }
#search__toggle:checked ~ .search__btn div > span:nth-child(2) {
  filter: opacity(0%); }
#search__toggle:checked ~ .search__btn div > span:nth-child(3) {
  transform: rotate(135deg);
  background: #FFF; }
#search__toggle:checked ~ .search__box {
  visibility: visible;
  left: 0;
  margin: 0; }
#search__toggle:checked ~ .bg_closebtn {
  display: block;
  position: fixed;
  top: 85px;
  left: 0px;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  transition: background .2s ease-in-out; }

/*search_btn label*/
.search__btn {
  z-index: 15;
  color: #FFF; }
  .search__btn > div {
    position: relative; }
    .search__btn > div span:first-child,
    .search__btn > div span:nth-child(3) {
      transition: all .4s;
      filter: opacity(0%); }
    .search__btn > div span:nth-child(2) {
      display: block;
      text-align: center;
      filter: opacity(100%);
      transition: all .4s; }

.search__btn:hover {
  color: #FFF; }
  .search__btn:hover div {
    background: #FFF; }
    .search__btn:hover div svg {
      fill: #174E9D; }

/*---------検索パネル内------------*/
.search__box {
  display: block;
  position: absolute;
  visibility: hidden;
  top: 80px;
  left: 0;
  width: 100%;
  border-top: 8px solid #333;
  margin-top: -1000px;
  padding: 0.6em 10px;
  text-align: center;
  background-color: #FFF;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  z-index: 14;
  transition-duration: 0.5s;
  color: #333; }
  .search__box form#ajaxSearch_form {
    width: 100%; }
    .search__box form#ajaxSearch_form input {
      display: block;
      font-size: 1.2rem; }
    .search__box form#ajaxSearch_form #ajaxSearch_input {
      /*入力*/
      padding: 10px;
      border: 1px solid #999;
      background: #FFF;
      width: 250px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px; }
    .search__box form#ajaxSearch_form #ajaxSearch_submit {
      /*検索ボタン*/
      padding: 10px 20px;
      background: #666;
      border: 1px solid #666;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      color: #FFF;
      text-align: center; }
    .search__box form#ajaxSearch_form #ajaxSearch_submit:hover {
      background: #174E9D;
      border-color: #174E9D; }
  .search__box fieldset {
    border: none;
    display: flex;
    justify-content: center; }
    .search__box fieldset label {
      display: block;
      padding: 15px 0; }

@media screen and (min-width: 640px) {
  #ajaxSearch_input {
    width: auto; } }
/*メニューパネル*/
.menu__box {
  position: absolute;
  visibility: hidden;
  top: 80px;
  left: 0;
  border-top: 8px solid #333;
  overflow: auto;
  width: 100%;
  /*max-height: calc(100vh - 21.3vw - 100px);*/
  max-height: 80vh;
  margin-top: -1000px;
  padding: 0;
  background-color: #FFF;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  z-index: 14;
  transition-duration: 0.5s; }
  .menu__box ul {
    list-style-type: none; }

/*menu開閉トグル radio*/
#menu__toggle {
  display: none; }
  #menu__toggle:checked ~ .menu__btn div > span:first-child {
    top: 38%;
    transform: rotate(-135deg); }
  #menu__toggle:checked ~ .menu__btn div > span:nth-child(2) {
    filter: opacity(0%); }
  #menu__toggle:checked ~ .menu__btn div > span:nth-child(3) {
    top: 38%;
    transform: rotate(135deg); }
  #menu__toggle:checked ~ .menu__box {
    visibility: visible;
    left: 0;
    margin: 0; }
  #menu__toggle:checked ~ .bg_closebtn {
    display: block;
    position: fixed;
    top: 85px;
    left: 0px;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: background .2s ease-in-out; }

/*menu三本線btn*/
.menu__btn {
  display: block;
  position: relative;
  top: 0;
  right: 0;
  z-index: 15; }
  .menu__btn > div {
    background: #000;
    position: relative;
    width: 80px;
    height: 80px;
    padding: 10px; }
    .menu__btn > div span {
      display: block;
      height: 3px;
      width: 50%;
      position: absolute;
      left: 25%;
      background: #FFF;
      transition: all .4s; }
    .menu__btn > div span:first-child {
      top: 20%; }
    .menu__btn > div span:nth-child(2) {
      top: 38%; }
    .menu__btn > div span:nth-child(3) {
      top: 56%; }
    .menu__btn > div div {
      position: relative;
      color: #FFF;
      font-size: 14px;
      text-align: center;
      top: 75%; }

/*パネル内*/
.menu__box a {
  display: block; }
.menu__box ul.menu {
  margin-bottom: 1em;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(1, 1fr);
  /*background: #FFF;*/ }
  .menu__box ul.menu > li > a {
    padding: 0.3em;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    border-bottom: 1px solid #DDD;
    background: #FFF;
    color: #333; }
    .menu__box ul.menu > li > a svg {
      height: 20px;
      fill: #333;
      padding-right: 5px; }
  .menu__box ul.menu > li > a:hover {
    color: #FFF; }
    .menu__box ul.menu > li > a:hover svg {
      fill: #FFF; }
  .menu__box ul.menu li.products > a:hover {
    background: #174E9D;
    border-bottom-color: #174E9D; }
  .menu__box ul.menu li.products ul li a:before {
    background: #174E9D; }
  .menu__box ul.menu li.support > a:hover {
    background: #21593D;
    border-bottom-color: #21593D; }
  .menu__box ul.menu li.products ul li a:hover {
    background: #174E9D; }
  .menu__box ul.menu li.support ul li a:hover {
    background: #21593D; }
  .menu__box ul.menu li.support ul li a:before {
    background: #21593D; }
  .menu__box ul.menu li.products ul li a:hover:before,
  .menu__box ul.menu li.support ul li a:hover:before {
    background-color: #FFF; }
  .menu__box ul.menu ul {
    margin: 0; }
    .menu__box ul.menu ul li {
      border-bottom: 1px solid #DDD;
      background: #EFEFEF; }
      .menu__box ul.menu ul li a {
        position: relative;
        padding: 0.2em 1em 0.2em 1.8em;
        color: #333; }
      .menu__box ul.menu ul li a:before {
        content: '';
        position: absolute;
        top: .7em;
        left: 1em;
        width: 6px;
        height: 6px;
        /*background-color:#0b254a;*/ }
      .menu__box ul.menu ul li a:hover {
        color: #FFF;
        /*border-radius: 1.4em;*/ }
      .menu__box ul.menu ul li a:hover:before {
        /*background-color: #FFF;*/ }
.menu__box ul.about {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, 1fr);
  font-size: 0.8rem;
  margin: 2em 10px 1em 10px;
  padding-top: 0.5em; }
  .menu__box ul.about li {
    border: 1px solid #DDD;
    border-radius: 1em;
    background: #FFF; }
    .menu__box ul.about li a {
      display: block;
      padding: 5px;
      text-align: center;
      color: #333; }
    .menu__box ul.about li a:hover {
      color: #FFF; }
  .menu__box ul.about li:hover {
    background: #0b254a; }

@media screen and (min-width: 640px) {
  .menu__box ul.menu {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr); }
    .menu__box ul.menu ul li {
      background: #FFF; }
  .menu__box ul.about {
    grid-template-columns: repeat(4, 1fr); } }
@media screen and (min-width: 640px) {
  header ul.header_menu {
    flex-grow: 2;
    display: flex;
    align-items: flex-end;
    padding-left: 2em; }
    header ul.header_menu li {
      padding: 5px;
      padding-right: 1.5em;
      position: relative;
      padding-left: .3em;
      font-weight: 800; }
    header ul.header_menu a {
      color: #FFF;
      display: block;
      font-size: 1rem;
      padding: 3px 10px;
      border-radius: 3px;
      /*border-top-right-radius: 1em;
      border-bottom-right-radius: 1em;*/
      transition: all .4s; }
    header ul.header_menu li:before {
      content: '';
      position: absolute;
      top: .5em;
      left: 0;
      width: 5px;
      height: 1.3em;
      background-color: #FFF;
      transform: rotate(45deg);
      border-radius: 3px;
      transition: all .4s; }
    header ul.header_menu a:hover {
      /*background-color: #174E9D;
      color: #FFF;*/
      color: #174E9D;
      color: #FC0; }
    header ul.header_menu li:hover:before {
      background-color: #FC0;
      /*background-color: #174E9D;*/
      transform: rotate(180deg); }
    header ul.header_menu li:nth-child(2) a:hover {
      /*color: #21593D;*/ }
    header ul.header_menu li:nth-child(2):hover:before {
      /*background-color: #21593D;*/ } }
nav.header_gmenu .language .languagelink {
  width: 300px;
  margin: 0.5em auto;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr; }
  nav.header_gmenu .language .languagelink a {
    font-size: 0.8rem;
    display: block;
    text-align: center;
    padding: 2px;
    margin-bottom: 5px;
    border-radius: 5px;
    background: #999;
    color: #FFF; }
  nav.header_gmenu .language .languagelink a.en:hover {
    background: #294aa6;
    /*background:#294ad7;*/ }
  nav.header_gmenu .language .languagelink a.jp:hover {
    background: #921c00;
    /*background:#b81c00;*/ }

/*パネル内閉じるボタン div.closebtn内*/
.closebtn label span {
  display: block;
  width: 5em;
  padding: 5px;
  text-align: center;
  margin: 10px auto;
  background: #CCC;
  color: #FFF;
  border-radius: 5px; }
.closebtn label span:hover {
  background: #666;
  color: #FFF; }

/*背景の閉じるボタン　div.bg_closebtn内*/
.bg_closebtn label {
  display: block;
  height: 100%; }

/*-コンテンツ内language切り替えボタン nav aria-labelledby="utilities" ul　アイコン小--*/
main .language {
  position: absolute;
  top: 25px;
  right: 25px;
  height: 20px; }
  main .language ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flow-root; }
    main .language ul li {
      margin: 0;
      padding: 0 2px;
      float: left; }
      main .language ul li a {
        border: none;
        padding: 0; }
        main .language ul li a img {
          vertical-align: bottom; }
      main .language ul li a:hover img {
        filter: brightness(1.3); }

.language + h1,
#ProductsBox .language + hgroup h1 {
  padding-right: 75px; }

/*google translate*/
.G_Translate {
  position: absolute;
  top: 80px;
  right: 0;
  /*top:0;
  left:110px;*/
  width: 170px;
  text-align: center;
  padding: 0 5px 5px;
  background: #333;
  border-bottom-left-radius: 5px;
  /*border-bottom-right-radius: 5px;*/
  z-index: 2;
  /*box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, .5);*/ }
  .G_Translate .flag a {
    display: inline-block;
    height: 19px; }
  .G_Translate select {
    border: 1px solid #DDD;
    background: #FFF;
    padding: 5px;
    cursor: pointer;
    width: 160px; }

/*checkboxドロワー*/
.G_Translate {
  /*開いたときに表示される部分*/
  /*▲*/
  /*▼*/ }
  .G_Translate input {
    display: none; }
  .G_Translate label {
    cursor: pointer;
    display: block;
    color: #999;
    height: 10px; }
  .G_Translate #open_content {
    height: 0;
    overflow-y: hidden;
    transition: all .4s; }
  .G_Translate input[type=checkbox]:checked ~ #open_content {
    height: 52px;
    filter: opacity(100%); }
  .G_Translate label span:first-child {
    display: block;
    font-size: 10px;
    color: #CCC;
    padding-left: 12px; }
  .G_Translate label:hover span {
    color: #FFF; }
  .G_Translate label span:last-child {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: #999 2px solid;
    border-right: #999 2px solid;
    transform: rotate(135deg);
    position: absolute;
    top: 0;
    left: 10px;
    /*left: calc(50% - 5px);*/ }
  .G_Translate input[type=checkbox]:checked + label span:last-child {
    transform: rotate(-45deg);
    top: 5px; }

/*--パンくず------------------------------------*/
.BCouter {
  margin: 15px auto 0 auto;
  padding: 0 10px;
  width: 100%;
  max-width: 1280px;
  font-size: 0.8rem; }
  .BCouter span span {
    padding: 0;
    display: inline; }
  .BCouter span.last,
  .BCouter span.current {
    background: none; }

/*--AjaxSearch.css-----------------------------*/
/*検索結果ページイントロのp*/
.ajaxSearch_resultsInfos span.ajaxSearch_highlight {
  font-size: 1.2rem;
  font-weight: 800; }

.ajaxSearch_highlight {
  background: #FBF9AA; }

/*検索結果ページ: 1 | 2　span　.ajaxSearch_paging　ditto paginateと同じ*/
/*検索結果　1件分のdiv*/
.ajaxSearch_result {
  border-bottom: 1px solid #DDD;
  padding: 10px 0 20px 0;
  margin: 15px 0; }

.ajaxSearch_result:last-of-type {
  border-bottom: none; }

/*検索結果のリンク a*/
.ajaxSearch_resultLink {
  display: block;
  font-size: 1.2rem;
  font-weight: 800; }

/*検索結果のpを囲むdiv*/
.ajaxSearch_resultExtract {
  margin: 1em 0;
  padding: 0; }
  .ajaxSearch_resultExtract p {
    margin: 0;
    padding: 0; }

/*Descriptionがあったとき span*/
.ajaxSearch_resultDescription {
  margin: 0;
  padding: 0;
  color: #333; }

/*404　sitemap*/
.sitemap-404 h2 {
  border-left: 8px solid #DDD;
  padding: 2px 8px;
  background: #EAEAEA; }
.sitemap-404 ul {
  list-style: square; }
  .sitemap-404 ul ul {
    list-style: circle; }