@charset "UTF-8";
/*====================================================*/
/*  共通定義                                          */
/*====================================================*/
:root {
  --black: #333;
  --navy: #082752;
  --orange: #e89800;
  --white: #fff;
  --blue: #d0d9e6;
  --p_orange: #ffebbc;
  --red: #e6002d;
  --glay: #f0f0f0;
  --darkglay: #767676;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  color: var(--black);
  margin: 0;
  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, Helvetica, Arial, "ＭＳＰゴシック", "MS P Gothic", sans-serif;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

iframe {
  width: 100%;
}

a {
  color: var(--navy);
}

p {
  margin: 0;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.text-center {
  text-align: center;
}

.error {
  color: var(--red);
}

#btn-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}

#sort-area,
#add-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

input {
  cursor: pointer;
}

input[type="button"].btn, input[type="submit"].btn {
  display: inline-block;
  min-width: 170px;
  font-size: 0.9rem;
  padding: 0.7rem 2rem;
  font-weight: bold;
  text-align: center;
  border: 0;
  border-radius: 100vh;
  z-index: 1;
  -webkit-appearance: none;
}

input[type="button"].sort, input[type="submit"].sort {
  display: inline-block;
  min-width: 170px;
  font-size: 0.8rem;
  padding: 0.5rem 2rem;
  font-weight: bold;
  text-align: center;
  border: 0;
  border-radius: 100vh;
  z-index: 1;
  -webkit-appearance: none;
}

input[type="button"].btn-sp, input[type="submit"].btn-sp {
  display: inline-block;
  width: 100%;
  font-size: 0.9rem;
  padding: 0.7rem 1.5rem;
  font-weight: bold;
  text-align: center;
  border: 0;
  border-radius: 100vh;
  z-index: 1;
  -webkit-appearance: none;
}

.btn-blue {
  color: var(--white);
  background-color: #e99900;/* 本来は青緑#0f5779 */
}

.btn-blue:hover {
  background: #ffbe42;/* 本来は青緑#1575a2 */
}

.btn-glay {
  color: var(--white);
  background-color: #9e9e9e;
}

.btn-glay:hover {
  background: #b7b7b7;
}

.btn-red {
  color: var(--white);
  background-color: var(--red);
}

.btn-red:hover {
  background: #ff1947;
}

.btn {
  position: relative;
  display: inline-block;
}

.btn::after {
  content: "";
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  display: inline-block;
  width: 10px;
  height: 10px;
  /* 矢印アイコンの位置を設定 */
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}

/*====================================================*/
/*  管理画面                                          */
/*====================================================*/
#admin {
  /*====================================================*/
  /*  ログイン                                          */
  /*====================================================*/
  /*====================================================*/
  /*  TOP                                               */
  /*====================================================*/
  /*====================================================*/
  /*  口振結果一覧                                      */
  /*====================================================*/
  /* === ソートボタン ============================== */
  /*====================================================*/
  /*  加盟店詳細                                        */
  /*====================================================*/
}

#admin h2 {
  margin-top: 0;
  margin-bottom: 50px;
  padding: 0 1rem;
  border-left: 4px solid var(--orange);
  color: var(--black);
}

#admin h3 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 20px;
}

#admin a.link {
  color: var(--black);
  text-decoration: none;
}

#admin main {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}

#admin .box {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-top: 20px solid var(--navy);
}

#admin #logo {
  text-align: center;
  margin-bottom: 30px;
}

#admin #logo h1 {
  font-size: 2em;
  margin: 0;
}

#admin #name,
#admin #button {
  margin-bottom: 30px;
}

#admin .bg {
  width: 500px;
  padding: 20px 40px;
  border-radius: 10px;
  margin-bottom: 30px;
}

#admin .input-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1rem;
}

#admin .input-box:last-child {
  margin-bottom: 0;
}

#admin .input-box .name {
  width: 40%;
}

#admin .input-box .input {
  width: 60%;
}

#admin .form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.25rem;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

#admin #footer {
  position: fixed;
  bottom: 0;
  background-color: var(--darkglay);
  color: var(--white);
  width: 100%;
  padding: 5px 0;
  text-align: center;
  z-index: 3;
}

#admin .header {
  position: fixed;
  width: 100%;
  height: 20px;
  background-color: var(--darkglay);
  z-index: 3;
}

#admin .container {
  position: relative;
  -ms-grid-columns: 210px 1fr;
      grid-template-columns: 210px 1fr;
  -ms-grid-rows: 20px calc(100vh - 20px);
      grid-template-rows: 20px calc(100vh - 20px);
}

#admin .main {
  background-color: transparent;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
  padding: 50px 30px 100px;
}

#admin .nav {
  position: fixed;
  width: 220px;
  height: 100vh;
  padding: 30px 10px 0;
  -webkit-box-shadow: rgba(149, 157, 165, 0.1) 5px 0px 5px;
          box-shadow: rgba(149, 157, 165, 0.1) 5px 0px 5px;
  z-index: 2;
}

#admin .logo {
  text-align: center;
}

#admin #copyurl {
  margin-bottom: 30px;
}

#admin #copyurl h3 {
  font-weight: normal;
  margin-bottom: 0.5rem;
}

#admin #copyurl p {
  font-size: 0.9rem;
  margin-top: 10px;
}

#admin #copyurl .url {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#admin #copyurl .url .copy {
  margin-right: 20px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

#admin #topbutton {
  background-color: #a3b4dc;
  width: 140px;
  bottom: 40px;
  font-size: 1rem;
  z-index: 4;
}

#admin .tsImgArea {
  margin-top: 5px;
}

#admin .tsImg {
  background: var(--white);
  border: 1px solid #777;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  padding: 5px;
}

#admin .tsImg:hover {
  background: #7a87a6;
}

#admin .tsImg:hover path {
  fill: var(--white);
}

#admin #sortTable th,
#admin #sortTable td {
  border: 1px solid rgba(0, 0, 0, 0.125);
}

#admin #sortTable th {
  color: var(--black);
  background-color: var(--p_orange);
}

#admin .conditional {
  margin-bottom: 40px;
  z-index: 0;
}

#admin .conditional .conditional-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
}

#admin .conditional .conditional-area:nth-child(2) {
  margin-bottom: 20px;
}

#admin .conditional .conditional-area:last-child {
  margin-bottom: 0;
}

#admin .conditional .area-text {
  width: 10%;
}

#admin .tbl {
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.125);
  margin-bottom: 30px;
}

#admin .item1 {
  min-width: 150px;
  background-color: var(--p_orange);
  color: var(--black);
  text-align: left;
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

#admin .item2 {
  width: 900px;
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

/*====================================================*/
/*  フロントページ                                    */
/*====================================================*/
#gw {
  /*====================================================*/
  /*  ログイン                                          */
  /*====================================================*/
  /*====================================================*/
  /*  口座振替案内                                      */
  /*====================================================*/
  /*====================================================*/
  /*  送信後画面                                    */
  /*====================================================*/
}

#gw main {
  max-width: 1200px;
  width: 100%;
  margin: auto;
}

#gw .box {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-top: 20px solid var(--navy);
}

#gw #logo {
  text-align: center;
  margin-bottom: 30px;
}

#gw #logo h1 {
  font-size: 2em;
  margin: 0;
}

#gw #name,
#gw #button {
  margin-bottom: 30px;
}

#gw .bg {
  width: 500px;
  padding: 20px 40px;
  border-radius: 10px;
  margin-bottom: 30px;
}

#gw .input-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1rem;
}

#gw .input-box .name {
  width: 40%;
}

#gw .input-box .input {
  width: 60%;
}

#gw .form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: var(--white);
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.25rem;
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

#gw .header {
  position: fixed;
  width: 100%;
  height: 20px;
  background-color: var(--darkglay);
  z-index: 3;
}

#gw #footer {
  position: fixed;
  bottom: 0;
  background-color: var(--darkglay);
  color: var(--white);
  width: 100%;
  padding: 5px 0;
  text-align: center;
  z-index: 3;
}

#gw .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 40px 20px;
}

#gw .logo .img {
  width: 120px;
  margin-right: 20px;
}

#gw .logo .img img {
  width: 100%;
}

#gw .main {
  max-width: 700px;
  width: 100%;
  margin: auto;
}

#gw .inner {
  padding: 0 15px;
}

#gw .privacy {
  width: 100%;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 20px;
  overflow: auto;
}

#gw .guide-box {
  margin-bottom: 40px;
}

#gw .guide-box:last-child {
  margin-bottom: 0;
}

#gw .guide-box h3 {
  color: var(--navy);
}

#gw .guide-box h4 {
  margin-bottom: 10px;
}

#gw .guide-text {
  margin-bottom: 20px;
}

#gw .guide-text:last-child {
  margin-bottom: 0;
}

#gw .guide-table {
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.4);
  margin-bottom: 10px;
}

#gw .guide-table th {
  background-color: #a3b4dc;
}

#gw .guide-table th,
#gw .guide-table td {
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 10px 20px;
}

#gw #receive {
  text-align: center;
}

#gw #receive h2 {
  font-size: 2rem;
  margin-bottom: 60px;
}

#gw #receive p {
  margin-bottom: 60px;
}

#gw #receive p:last-child {
  margin-bottom: 0;
}

#gw #receive table {
  padding: 20px 0;
}

#gw #receive table.error {
  border: solid 1px #ff0000;
  margin: auto;
  text-align: left;
  margin-bottom: 60px;
}

#gw #receive table.error td {
  padding: 5px 20px;
}

/*====================================================*/
/*  スマホ                                            */
/*====================================================*/
@media screen and (max-width: 800px) {
  /*====================================================*/
  /*  共通定義                                          */
  /*====================================================*/
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  input {
    cursor: pointer;
  }
  input[type="button"].btn, input[type="submit"].btn {
    height: 50px;
  }
  /*====================================================*/
  /*  フロントページ                                    */
  /*====================================================*/
  #gw {
    /*====================================================*/
    /*  ログイン                                          */
    /*====================================================*/
    /*====================================================*/
    /*  口座振替案内                                      */
    /*====================================================*/
    /*====================================================*/
    /*  送信後画面                                    */
    /*====================================================*/
  }
  #gw main {
    max-width: 100%;
  }
  #gw #logo h1 {
    font-size: 1.5em;
  }
  #gw .login {
    width: 100%;
  }
  #gw .bg {
    width: 100%;
    padding: 20px;
  }
  #gw .input-box {
    display: block;
  }
  #gw .input-box .name {
    width: 100%;
    margin-bottom: 10px;
  }
  #gw .input-box .input {
    width: 100%;
  }
  #gw .logo {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #gw .logo .img {
    width: 80px;
  }
  #gw .logo h2 {
    font-size: 1.2em;
    margin: 0;
  }
  #gw #receive {
    text-align: center;
  }
  #gw #receive h2 {
    font-size: 2rem;
    margin-bottom: 40px;
  }
  #gw #receive p {
    margin-bottom: 40px;
  }
  #gw #receive table.error {
    width: 100%;
    margin-bottom: 40px;
  }
  #gw #receive table.error td {
    display: block;
  }
}
/*# sourceMappingURL=add.css.map */