@import url("https://fonts.googleapis.com/css?family=Roboto:400,600,700|Noto+Sans+JP:400,500,700");
/*--------------------------------------------------------------------------
main
--------------------------------------------------------------------------*/
#main {
  background-image: url(../images/faq/faq_bg.gif);
  background-position: center 25vh;
  background-repeat: no-repeat;
  background-size: 1800px auto; }
  @media screen and (max-width: 768px) {
    #main {
      background-position: center 17vh;
      background-size: 1000px auto; } }
  @media screen and (min-width: 1800px) {
    #main {
      background-size: 100% auto; } }
  #main #title {
    background-image: url(../images/faq/title.jpg); }
  #main #intro {
    padding-top: 30px; }
    #main #intro__text {
      line-height: 2; }
      #main #intro__text .inner {
        width: 940px; }
      #main #intro__text p {
        font-size: 15px;
        padding-top: 20px; }
      @media screen and (max-width: 768px) {
        #main #intro__text .inner {
          width: 100%; }
        #main #intro__text p {
          font-size: 13px; } }
  #main #faq {
    background-color: #fff;
    margin-top: 50px;
    padding: 0 0 50px; }
    @media screen and (max-width: 768px) {
      #main #faq {
        padding-bottom: 30px; } }
    #main #faq dl {
      border-top: solid 1px #e6e6e6;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      text-align: left;
      margin: 0 auto;
      padding: 30px 20px 0;
      width: 100%; }
      @media screen and (max-width: 768px) {
        #main #faq dl {
          padding: 20px 20px 0; } }
      #main #faq dl dt {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        font-size: 15px;
        position: relative;
        margin: 0 auto;
        padding-bottom: 30px;
        max-width: 984px;
        width: 100%; }
        #main #faq dl dt span:nth-child(1) {
          padding-right: 100px; }
        #main #faq dl dt:before {
          background-color: #fa6432;
          border-radius: 5px;
          color: #fff;
          content: 'Q';
          font-weight: 700;
          font-size: 27px;
          line-height: 1;
          margin-right: 30px;
          padding: 8px 12px;
          text-align: center; }
        #main #faq dl dt .icon {
          position: absolute;
          top: 10px;
          right: 0;
          -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
          width: 40px; }
        #main #faq dl dt._oneline span {
          padding-top: 8px; }
        #main #faq dl dt:hover {
          opacity: 0.7; }
        #main #faq dl dt._open .icon {
          -webkit-transform: rotate(0deg);
                  transform: rotate(0deg); }
        @media screen and (max-width: 768px) {
          #main #faq dl dt {
            font-size: 13px;
            padding-bottom: 15px; }
            #main #faq dl dt span:nth-child(1) {
              padding-right: 50px; }
            #main #faq dl dt:before {
              border-radius: 3px;
              font-size: 18px;
              line-height: 1;
              margin-right: 20px;
              padding: 8px 10px;
              text-align: center; }
            #main #faq dl dt .icon {
              -webkit-transform: rotate(180deg);
                      transform: rotate(180deg);
              width: 30px; }
              #main #faq dl dt .icon img {
                height: auto;
                width: 30px; }
            #main #faq dl dt._oneline span {
              padding-top: 0; } }
      #main #faq dl dd {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        border-top: solid 1px #e6e6e6;
        display: none;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        font-size: 15px;
        opacity: 0;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 30px;
        max-width: 984px;
        width: 100%; }
        #main #faq dl dd a {
          color: #fa6432;
          text-decoration: underline; }
          #main #faq dl dd a:hover {
            text-decoration: none; }
        #main #faq dl dd:before {
          background-color: #172343;
          border-radius: 5px;
          color: #fff;
          content: 'A';
          font-weight: 700;
          font-size: 27px;
          line-height: 1;
          margin-right: 30px;
          padding: 8px 12px;
          text-align: center; }
        #main #faq dl dd div {
          width: 100%; }
          #main #faq dl dd div p {
            text-align: left; }
        #main #faq dl dd._oneline div {
          padding-top: 8px; }
        #main #faq dl dd._open {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-animation: dd .5s forwards;
          animation: dd .5s forwards; }
@-webkit-keyframes dd {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes dd {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
        @media screen and (max-width: 768px) {
          #main #faq dl dd {
            padding-top: 15px;
            padding-bottom: 20px; }
            #main #faq dl dd:before {
              border-radius: 3px;
              font-size: 18px;
              margin-right: 20px;
              padding: 8px 10px;
              text-align: center; }
            #main #faq dl dd div p {
              font-size: 13px; }
            #main #faq dl dd._oneline div {
              padding-top: 0; } }