/* Scss Document */
@import url("reset.css");
/* Scss Document */
* {
  box-sizing: border-box; }

/* clearfix */
.cFix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

.cFix {
  min-height: 1px; }

* html .cFix {
  height: 1px;
  /*\*/
  /*/ height: auto; overflow: hidden; /**/ }

.txtImg, #pagetop a, #archiveContent #pagetop a, #serch a {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-size: contain;
  height: 0px;
  background-position: center; }

.op, #archiveContent #pagetop a:hover {
  opacity: 0.6; }

/* lesponsive */
#contents {
  width: auto !important;
  text-align: left;
  line-height: 100%;
  margin: auto !important;
  padding: 0;
  clear: both; }

@media screen and (min-width: 737px), print {
  .pc_view {
    display: block; }

  .sp_view {
    display: none; }

  body {
    min-width: 980px; } }
@media screen and (max-width: 736px) {
  #ghcontainer, #footer {
    display: none; }

  .pc_view {
    display: none; }

  .sp_view {
    display: block; } }
#pagetop {
  position: relative;
  width: 100%; }
  #pagetop a {
    position: fixed;
    display: block;
    bottom: 10px;
    right: 10px;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: 45px;
    width: 45px;
    padding-top: 45px; }
    @media screen and (min-width: 737px), print {
      #pagetop a {
        background-image: url(../common/img/btn_pagetop.png); } }
    @media screen and (max-width: 736px) {
      #pagetop a {
        background-image: url(../common/img/btn_pagetop_sp.png); } }
    @media screen and (min-width: 737px), print {
      #pagetop a:hover {
        opacity: .6; } }

#archiveContent {
  position: relative; }
  @media screen and (min-width: 737px), print {
    #archiveContent {
      width: 980px;
      margin: 0 auto;
      padding-top: 38px; } }
  @media screen and (max-width: 736px) {
    #archiveContent {
      padding-left: 4.6875%;
      padding-right: 4.6875%; } }
  #archiveContent #pagetop {
    clear: both;
    position: relative;
    height: 30px;
    width: 100%;
           /*
height:100%;*/ }
    #archiveContent #pagetop a {
   /*
	position:fixed;*/
      display: block;
      bottom: 10px;
      right: 10px;
      z-index: 3;
      background-image: url(../common/img/btn_pagetop.png);
      background-repeat: no-repeat;
      background-size: 45px;
      width: 45px;
      padding-top: 45px; }

@media screen and (min-width: 737px), print {
  #titleArea {
    float: left; } }
@media screen and (min-width: 737px), print {
  #titleArea h1 {
    margin-bottom: 10px; } }
@media screen and (max-width: 736px) {
  #titleArea h1 {
    margin-top: 0.95652em;
    margin-bottom: 0.73913em; } }
@media screen and (max-width: 736px) {
  #titleArea h1 span {
    display: block; } }
#titleArea p {
  padding-left: 1em;
  text-indent: -1em; }

@media screen and (min-width: 737px), print {
  #nav {
    margin-top: 20px; } }
@media screen and (max-width: 736px) {
  #nav {
    display: none; } }
@media screen and (min-width: 737px), print {
  #nav ul {
    border-left: 1px solid #c9c9c9; } }
@media screen and (min-width: 737px), print {
  #nav li {
    display: inline-block;
    border-right: 1px solid #c9c9c9;
    padding: 0 14px 0 10px; } }
@media screen and (min-width: 737px), print {
  #nav li a {
    display: block;
    line-height: 20px;
    padding-left: 20px;
    background-image: url(/auto-archive/common/img/nav-arrow.png);
    background-repeat: no-repeat;
    background-position: left 3px top 50%; } }
#nav li a:hover {
  opacity: .6; }

@media screen and (min-width: 737px), print {
  #serch {
    width: 184px;
    float: right; } }
@media screen and (max-width: 736px) {
  #serch {
    margin-top: 4.6875%; } }
#serch a {
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
              /*
background-color: rgb(204, 0, 0);
position:relative;*/
  /*
  &:after {
  	content:"";
  	display:block;
  	position:absolute;
  	height:100%;
  	top:0%;
  	right:1em;
  	
  	@media screen and (min-width: 737px), print {
  		width:6px;
  		background:url(/auto-archive/common/img/serch-arrow.png) no-repeat left 0px top 50%;
  		background-size:contain;
  	}
  	@media screen and (max-width: 736px) {
  		background:url(/auto-archive/common/img/serch-arrow_sp.png) no-repeat left 0px top 50%;
  		width:7px;
  		background-size:contain;
  	}
  }*/ }
  @media screen and (min-width: 737px), print {
    #serch a {
      background-image: url(../common/img/btn_serch.gif);
      padding-top: 45px;
                  /*
border-radius: 4px;
line-height:15px;
padding:6px;*/ } }
  @media screen and (max-width: 736px) {
    #serch a {
      background-image: url(../common/img/btn_serch_sp.gif);
      padding-top: 13.7931%;
                                     /*
border-radius: (10/24) * 1em;
line-height:(80/24) * 1em;*/ } }
  @media screen and (min-width: 737px), print {
    #serch a:hover {
      opacity: .6; } }
@media screen and (min-width: 737px), print {
  #serch p {
    padding: 8px 0 4px; } }
@media screen and (max-width: 736px) {
  #serch p {
    /*margin 26px 0??*/
    margin-top: 1em;
    margin-bottom: 1em; } }
@media screen and (max-width: 736px) {
  #serch form {
    width: 100%; } }
@media screen and (max-width: 736px) {
  #serch form * {
    vertical-align: top;
    margin: 0; } }
#serch form select {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  background-color: #eeeeee !important;
  background: url(/auto-archive/common/img/select-arrow.png) no-repeat right 6px top 50%;
  background-size: 0.66667em; }
  @media screen and (min-width: 737px), print {
    #serch form select {
      height: 28px;
      width: 124px;
      padding: 0 0.66667em;
      line-height: 26px;
      border: none; } }
  @media screen and (max-width: 736px) {
    #serch form select {
      border-width: 1px;
      width: 15.33333em;
      padding: 0 0.66667em;
      line-height: 2.58333em; } }
  @media screen and (max-width: 736px) {
    #serch form select option {
      /*cant padding*/ } }
#serch form input {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  appearance: none;
  background-color: #444444; }
  @media screen and (min-width: 737px), print {
    #serch form input {
      padding: 0 0.66667em;
      line-height: 26px;
      height: 28px;
      border: none; } }
  @media screen and (max-width: 736px) {
    #serch form input {
      border-color: #444444;
      border-style: solid;
      border-width: 1px;
      padding: 0 0.66667em;
      line-height: 2.58333em; } }

#top #serch {
  margin-bottom: 1.6em; }

/* Scss Document */
#titleArea {
  color: #444444; }
  #titleArea h1 {
    font-weight: bold; }
    @media screen and (min-width: 737px), print {
      #titleArea h1 {
        font-family: "Meiryo";
        font-size: 28px;
        line-height: 0.893; } }
    @media screen and (max-width: 736px) {
      #titleArea h1 {
        font-family: "Hiragino Kaku Gothic Pro";
        font-size: 23px !important;
        line-height: 1.304;
        text-align: center; } }
  #titleArea p {
    font-weight: bold; }
    @media screen and (min-width: 737px), print {
      #titleArea p {
        font-family: "Meiryo";
        font-size: 12px;
        line-height: 2.083; } }
    @media screen and (max-width: 736px) {
      #titleArea p {
        font-family: "Hiragino Kaku Gothic Pro";
        font-size: 12px !important;
        line-height: 1.458; } }

@media screen and (min-width: 737px), print {
  #nav li a {
    font-family: "Meiryo";
    font-size: 13px;
    line-height: 1.923;
    color: #444444;
    text-decoration: none; } }

#serch {
  text-align: center; }
  #serch a {
    text-decoration: none;
    color: white;
    text-align: center;
    font-family: "A-OTF UD Shin Go Pro"; }
    @media screen and (min-width: 737px), print {
      #serch a {
        font-size: 8px; } }
    @media screen and (max-width: 736px) {
      #serch a {
        font-size: 12px !important; } }
  #serch p {
    color: #444444; }
    @media screen and (min-width: 737px), print {
      #serch p {
        font-family: "Meiryo";
        font-size: 11px;
        font-weight: bold; } }
    @media screen and (max-width: 736px) {
      #serch p {
        font-family: "Hiragino Kaku Gothic Pro";
        font-size: 12px !important; } }
  @media screen and (min-width: 737px), print {
    #serch form select {
      font-family: "Meiryo";
      font-size: 10px;
      color: #444444; } }
  @media screen and (max-width: 736px) {
    #serch form select {
      font-size: 12px !important; } }
  @media screen and (min-width: 737px), print {
    #serch form select option {
      font-family: "Meiryo";
      font-size: 10px;
      color: #444444; } }
  @media screen and (max-width: 736px) {
    #serch form select option {
      font-family: "Hiragino Kaku Gothic Pro";
      font-size: 12px !important;
      color: #444444; } }
  @media screen and (min-width: 737px), print {
    #serch form input {
      font-family: "Meiryo";
      font-size: 10px;
      color: white; } }
  @media screen and (max-width: 736px) {
    #serch form input {
      font-family: "Hiragino Kaku Gothic Pro";
      font-size: 12px !important;
      color: white; } }

/* Scss Document */
* {
  box-sizing: border-box; }

/* clearfix */
.cFix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

.cFix {
  min-height: 1px; }

* html .cFix {
  height: 1px;
  /*\*/
  /*/ height: auto; overflow: hidden; /**/ }

@media screen and (min-width: 737px), print {
  #order {
    clear: both; } }
@media screen and (min-width: 737px), print {
  #order h2 {
    border-bottom: 1px solid #c9c9c9;
    padding-bottom: 4px;
    padding-top: 42px; } }
@media screen and (max-width: 736px) {
  #order h2 {
    box-sizing: border-box;
    display: block;
    border-top: 2px solid #c9c9c9;
    border-left: 2px solid #c9c9c9;
    border-right: 2px solid #c9c9c9;
    line-height: 2.53333em;
    padding-left: 1em;
    background-image: url(/auto-archive/common/img/h2-arrow_close.png);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: right 10px top 50%; } }
@media screen and (max-width: 736px) {
  #order h2.open {
    padding-bottom: 0px;
    background-color: #ddd;
    background-image: url(/auto-archive/common/img/h2-arrow_open.png); } }
@media screen and (max-width: 736px) {
  #order a[name="ra"] + h2 {
    border-bottom: 2px solid #c9c9c9; } }
@media screen and (max-width: 736px) {
  #order a[name="ra"] + h2 + ul {
    border-top: none; } }
@media screen and (max-width: 736px) {
  #order ul {
    border-top: 2px solid #c9c9c9;
    margin-bottom: 2.5em;
    display: none; } }
#order ul li {
  display: inline-block;
vertical-align: top;}
  @media screen and (min-width: 737px), print {
    #order ul li {
      padding-left: 2px;
      width: 135px;
      margin-top: 32px; } }
  @media screen and (max-width: 736px) {
    #order ul li {
      width: 49.0%;
      margin-top: 2.5em;
      padding: 0.16667em; } }
@media screen and (min-width: 737px), print {
  #order ul a:hover img,
  #order ul a:hover p {
    opacity: .6; } }
#order ul a img {
  width: 100%; }
@media screen and (min-width: 737px), print {
  #order ul a p {
    padding-top: 10px; } }
@media screen and (max-width: 736px) {
  #order ul a p {
    padding-top: 0.83333em; } }
@media screen and (min-width: 737px), print {
  #order ul a p.long-word {
    padding-top: 4px; } }
@media screen and (max-width: 736px) {
  #order ul a p.long-word {
    padding-top: 0.25em; } }

/* Scss Document */
#order h2 {
  font-weight: bold; }
  @media screen and (min-width: 737px), print {
    #order h2 {
      font-family: "Meiryo";
      font-size: 18px;
      color: #444444;
      line-height: 1.389; } }
  @media screen and (max-width: 736px) {
    #order h2 {
      font-size: 15px !important;
      font-family: "Hiragino Kaku Gothic Pro";
      color: #444444;
      cursor: pointer; } }
@media screen and (max-width: 736px) {
  #order ul {
    font-size: 12px !important;
    font-family: "Hiragino Kaku Gothic Pro"; } }
@media screen and (max-width: 736px) {
  #order ul li {
    font-size: 12px !important; } }
#order ul a {
  color: #444444;
  text-decoration: none; }
  #order ul a p {
    font-family: "Hiragino Kaku Gothic Pro";
    text-align: center;
    font-weight: bold; }
    @media screen and (min-width: 737px), print {
      #order ul a p {
        font-size: 12px;
        line-height: 1.237; } }
    @media screen and (max-width: 736px) {
      #order ul a p {
        font-size: 12px !important;
        line-height: 1.333; } }
    @media screen and (min-width: 737px), print {
      #order ul a p.long-word {
        font-size: 10px;
        line-height: 1.0; } }
    @media screen and (max-width: 736px) {
      #order ul a p.long-word {
        font-size: 8px !important;
        line-height: 1.0; } }

/* Scss Document */
* {
  box-sizing: border-box; }

/* clearfix */
.cFix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

.cFix {
  min-height: 1px; }

* html .cFix {
  height: 1px;
  /*\*/
  /*/ height: auto; overflow: hidden; /**/ }

@media screen and (min-width: 737px), print {
  #intro {
    clear: both; } }
@media screen and (max-width: 736px) {
  #intro {
    margin-top: 2em; } }
@media screen and (min-width: 737px), print {
  #intro h2.non_serch {
    margin-top: 100px; } }
#intro h2 dl {
  display: table; }
  @media screen and (min-width: 737px), print {
    #intro h2 dl {
      padding-bottom: 15px; } }
  @media screen and (max-width: 736px) {
    #intro h2 dl {
      width: 100%; } }
#intro h2 dt, #intro h2 dd {
  display: table-cell;
  vertical-align: top; }
@media screen and (min-width: 737px), print {
  #intro h2 dt {
    min-width: 230px; } }
@media screen and (min-width: 737px), print {
  #intro h2 dd {
    width: 276px; } }
@media screen and (max-width: 736px) {
  #intro h2 dd {
    width: 50%; } }
#intro h2 dd img {
  width: 100%; }
#intro h3 {
  border-bottom-color: #c9c9c9;
  border-bottom-style: solid; }
  @media screen and (min-width: 737px), print {
    #intro h3 {
      padding-top: 25px;
      border-bottom-width: 1px; } }
  @media screen and (max-width: 736px) {
    #intro h3 {
      padding-top: 1.8em;
      border-bottom-width: 2px;
      padding-bottom: 0.26667em;
      position: relative; } }
  #intro h3 img[alt="ModuloX"] {
    padding-bottom: 4px;
    height: 20px;
    vertical-align: bottom; }
    @media screen and (min-width: 737px), print {
      #intro h3 img[alt="ModuloX"] {
        padding-left: 1em; } }
    @media screen and (max-width: 736px) {
      #intro h3 img[alt="ModuloX"] {
        position: absolute;
        bottom: 0;
        right: 0; } }
@media screen and (min-width: 737px), print {
  #intro ul {
    padding-top: 10px; } }
@media screen and (min-width: 737px), print {
  #intro li {
    padding-top: 10px;
    display: inline-block;
    letter-spacing: -.4em; } }
@media screen and (max-width: 736px) {
  #intro li {
    padding-top: 0.83333em; } }
@media screen and (min-width: 737px), print {
  #intro li:nth-child(odd) {
    padding-right: 8px; } }
#intro li a,
#intro li div.empty {
  display: block;
  border-color: #c5c5c5;
  border-style: solid;
  border-radius: 4px; }
  @media screen and (min-width: 737px), print {
    #intro li a,
    #intro li div.empty {
      /*height: 78px;*/
      width: 483px;
      border-width: 1px;
      letter-spacing: normal;
      padding: 10px; } }
  @media screen and (max-width: 736px) {
    #intro li a,
    #intro li div.empty {
      /*height: 116px;*/
      border-width: 2px;
      padding: 0.41667em; } }
  #intro li a dl,
  #intro li div.empty dl {
    display: table;
    table-layout: fixed;
    width: 100%;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain; }
    #intro li a dl dt,
    #intro li a dl dd,
    #intro li div.empty dl dt,
    #intro li div.empty dl dd {
      display: table-cell;
      vertical-align: middle; }
    @media screen and (min-width: 737px), print {
      #intro li a dl dt,
      #intro li div.empty dl dt {
        width: 120px; } }
    @media screen and (max-width: 736px) {
      #intro li a dl dt,
      #intro li div.empty dl dt {
        width: 7.5em; } }
    #intro li a dl dt img,
    #intro li div.empty dl dt img {
      width: 100%; }
    @media screen and (min-width: 737px), print {
      #intro li a dl dd,
      #intro li div.empty dl dd {
        padding-left: 28px; } }
    @media screen and (max-width: 736px) {
      #intro li a dl dd,
      #intro li div.empty dl dd {
        padding-left: 1.16667em;
        width: 15.41667em; } }
    @media screen and (orientation: landscape) {
      #intro li a dl dd,
      #intro li div.empty dl dd {
        padding-left: 1.66667em; } }
@media screen and (min-width: 737px), print {
  #intro li a dl {
    background-image: url(/auto-archive/common/img/intro-arrow.png); } }
@media screen and (max-width: 736px) {
  #intro li a dl {
    background-image: url(/auto-archive/common/img/intro-arrow_sp.png); } }
@media screen and (min-width: 737px), print {
  #intro li div.empty dl {
    background-image: url(/auto-archive/common/img/intro-arrow_emp.png); } }
@media screen and (max-width: 736px) {
  #intro li div.empty dl {
    background-image: url(/auto-archive/common/img/intro-arrow_emp_sp.png); } }
@media screen and (min-width: 737px), print {
  #intro li a:hover {
    opacity: .6; } }
#intro div#toTop a.btn {
  display: block;
  border-color: #bd1c24;
  border-style: solid;
  position: relative; }
  @media screen and (min-width: 737px), print {
    #intro div#toTop a.btn {
      margin: 30px auto 0;
      width: 500px;
      border-width: 1px;
      padding: 12px; } }
  @media screen and (max-width: 736px) {
    #intro div#toTop a.btn {
      /*height: 96px;*/
      margin-top: 1.58333em;
      border-width: 2px;
      padding: 0.83333em; } }
  @media screen and (min-width: 737px), print {
    #intro div#toTop a.btn:first-child {
      margin: 60px auto 0; } }
  @media screen and (max-width: 736px) {
    #intro div#toTop a.btn:first-child {
      /*height: 96px;*/
      margin-top: 3.25em; } }
  #intro div#toTop a.btn:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    top: 0%;
    right: 1em; }
    @media screen and (min-width: 737px), print {
      #intro div#toTop a.btn:after {
        width: 10px;
        background: url(/auto-archive/common/img/back_btn-arrow.png) no-repeat left 0px top 50%;
        background-size: contain; } }
    @media screen and (max-width: 736px) {
      #intro div#toTop a.btn:after {
        background: url(/auto-archive/common/img/back_btn-arrow_sp.png) no-repeat left 0px top 50%;
        width: 7px;
        background-size: contain; } }
  #intro div#toTop a.btn:hover {
    opacity: .6; }

/* Scss Document */
#intro h2 dt {
  color: #444444;
  line-height: 1.5;
  font-weight: bold; }
  @media screen and (min-width: 737px), print {
    #intro h2 dt {
      font-size: 24px;
      font-family: "Meiryo"; } }
  @media screen and (max-width: 736px) {
    #intro h2 dt {
      font-family: "Hiragino Kaku Gothic Pro";
      font-size: 18px !important; } }
#intro h3 {
  color: #444444;
  font-weight: bold; }
  @media screen and (min-width: 737px), print {
    #intro h3 {
      font-size: 18px;
      font-family: "Meiryo";
      line-height: 1.389; } }
  @media screen and (max-width: 736px) {
    #intro h3 {
      font-family: "Hiragino Kaku Gothic Pro";
      font-size: 15px !important;
      line-height: 0.833; } }
@media screen and (max-width: 736px) {
  #intro li {
    font-size: 12px !important; } }
@media screen and (max-width: 736px) {
  #intro li a,
  #intro li div.empty {
    font-size: 12px !important; } }
#intro li a p,
#intro li div.empty p {
  line-height: 1.5; }
  @media screen and (min-width: 737px), print {
    #intro li a p,
    #intro li div.empty p {
      font-family: "Meiryo";
      font-size: 16px; } }
  @media screen and (max-width: 736px) {
    #intro li a p,
    #intro li div.empty p {
      font-family: "Hiragino Kaku Gothic Pro";
      font-size: 12px !important;
      font-weight: bold; } }
  #intro li a p span,
  #intro li div.empty p span {
    display: block; }
#intro li a {
  color: black;
  text-decoration: none; }
#intro li div.empty {
  color: #9b9b9b; }
#intro div#toTop a.btn {
  text-align: center;
  color: #bd1c24;
  text-decoration: none;
  font-weight: bold; }
  @media screen and (min-width: 737px), print {
    #intro div#toTop a.btn {
      font-family: "Meiryo";
      font-size: 15px;
      line-height: 1.667; } }
  @media screen and (max-width: 736px) {
    #intro div#toTop a.btn {
      font-family: "Hiragino Kaku Gothic Pro";
      font-size: 12px !important;
      line-height: 1.25; } }