@charset "UTF-8";
/* 画面幅別レイアウト設定 */
/* フォント設定 */
/* -------------------------------- */
/* コンテンツ用ボックス */
#contents {
  width: 100%;
  text-align: left;
  background-color: #D5CBB5; }

#introduction {
  position: relative;
  left: 0;
  top: 20px;
  width: 900px;
  padding: 16px 0;
  text-align: center;
  margin: 0; }
  @media screen and (min-width: 401px) and (max-width: 899px) {
    #introduction {
      width: 100%; } }
  @media screen and (max-width: 400px) {
    #introduction {
      width: 100%; } }
  #introduction .request-img {
    display: block;
    width: 100%;
    height: auto; }
  #introduction #request-text {
    width: 100%;
    height: auto;
    padding: 10px 0;
    background: #ebe3cf; }
    #introduction #request-text .qr-code {
      width: 180px;
      height: 180px; }
      @media screen and (min-width: 401px) and (max-width: 899px) {
        #introduction #request-text .qr-code {
          width: 95%;
          height: auto;
          max-width: 180px;
          max-height: 180px; } }
    #introduction #request-text .line-official {
      display: block;
      width: 96%;
      height: auto;
      margin: 16px auto 0 auto; }
      #introduction #request-text .line-official::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden; }
    #introduction #request-text .code-area {
      width: 44%;
      height: auto;
      padding: 10px;
      float: left;
      font-size: 1.4rem;
      font-size: 14px;
      font-weight: nomal;
      border-right: 1px dotted #A08563; }
      @media screen and (max-width: 400px) {
        #introduction #request-text .code-area {
          width: 86%;
          float: none;
          margin: 0 auto;
          border-right: none; } }
      #introduction #request-text .code-area + .code-area {
        border-right: none; }
        @media screen and (max-width: 400px) {
          #introduction #request-text .code-area + .code-area {
            border-top: 1px dotted #A08563; } }

.line-id-area {
  display: block;
  width: 200px;
  padding: 4px 8px;
  border: 1px solid #A08563;
  margin: 16px auto;
  background-color: #FFF; }
  @media screen and (min-width: 401px) and (max-width: 899px) {
    .line-id-area {
      width: 80%; } }
  @media screen and (max-width: 400px) {
    .line-id-area {
      width: 80%; } }

.request {
  clear: both;
  width: 100%;
  padding: 10px 0;
  background-color: #ebe3cf;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold; }
  @media screen and (min-width: 401px) and (max-width: 899px) {
    .request {
      width: 100%;
      padding: 10px 0; }
      .request h3 {
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: bold; } }
  @media screen and (max-width: 400px) {
    .request {
      width: 100%;
      padding: 10px 0;
      font-size: 10px;
      font-size: 1rem;
      font-weight: bold; }
      .request h3 {
        font-size: 14px;
        font-size: 1.4rem;
        font-weight: bold; } }

/*.request_form {
    padding: 0px 25px;
}*/