/***** ORGANISMS *****/
/* ============================================ */
.o-wrapper-overall {
  width: 100%;
}

.o-wrapper-header {
  width: 100%;
  background: #CCCCCC;
}
.o-wrapper-header ul li {
  display: inline-block;
  width: 45%;
  margin-left: 3%;
}
.o-wrapper-header ul li:last-child {
  text-align: right;
}
.o-wrapper-header ul li:first-child {
  text-align: left;
}

.o-wrapper-main {
  width: 100%;
  padding: 1% 10%;
  background: #EEEEEE;
}
/* OPTION */
.owm-search,
.owm-memlist {
  padding: 1%;
}

.o-wrapper-content {
  width: 100%;
  padding: 1%;
  border-radius: 30px;
  background: white;
}
/* OPTION */
.owc-login {
  width: 90%;
  margin: 10% 5% 0 5%;
  padding: 10% 5% 1% 5%;
}
.owc-index {
  background: #EEEEEE;
}
.owc-search,
.owc-memlist {
  padding-bottom: 5%;
}

.o-wrapper-form {
  width: 90%;
  margin: 0 5%;
  padding: 5%;
  border: 5px solid #EEEEEE;
  border-radius: 5px;
}

/***** ATOMS *****/
/* ============================================ */
.a-breadcrumb {
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 1.4286));
  color: #CCCCCC;
  margin: 1%
}

.a-content-title {
  font-size: calc(1.6rem + ((1vw - 0.64rem) * 0.7143));
  font-weight: bold;
  color: #13B1C0;
  text-align: center;
  padding:2% 1% 5% 1%;
}
.a-message {
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 1.4286));
  color: #696969;
  margin: 2%
}

.a-label-form {
  font-size: calc(1.6rem + ((1vw - 0.64rem) * 1.4286));
  color: #696969;
  margin: 1% 1% 1% 10%;
}

.a-label-form span {
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 1.4286));
  margin-left: 2.5%;
  padding: 1%;
  border-radius: 5px;
  background: #F08080;
  color: white;
}

/***** TABLE *****/
/* ============================================ */
.o-wrapper-list {
  padding: 0 4%;
}
/* option */
.owl-search {
  padding: 0 1%;
}

/*** search_mem ***/
#search {width:100%;}
/*table {width:80%;}*/
#search thead tr th, #search tbody tr td {
  padding: 1% 0;
  border: 1px solid #CCCCCC;
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 1.4286));
  font-weight: normal;
  text-align: center;
}
#search thead tr:first-child {
  background: #EEEEEE;
}
#search tbody tr td a {
  text-decoration:underline;
  color: #13B1C0;
}
#search tbody tr td p {
  color: #CCCCCC;
}

/*** visit_history, point, prize_master ***/
#history, #point, #prize {width:100%;}
#history thead tr th, #history tbody tr td,
#point thead tr th, #point tbody tr td,
#prize thead tr th, #prize tbody tr td {
  border: 1px solid #CCCCCC;
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 1.4286));
  text-align: center;
}
#history thead tr th,
#point thead tr th, #prize thead tr th {
  padding: 1% 0;
  font-weight: bold;
}
#history tbody tr td,
#point tbody tr td, #prize tbody tr td {
  padding: 2% 0;
  font-weight: normal;
  vertical-align: middle !important;
}
#history thead tr:first-child th,
#point thead tr:first-child th,
#prize thead tr:first-child th {
  background:#EEEEEE;
}
#point tbody tr td a,
#prize tbody tr td a {
  text-decoration:underline;
  color: #13B1C0;
}

/*** inc_point, dec_point ***/
#inc, #dec {
  width:90%;
  margin: 0 5%;
}
#inc thead tr th, #inc tbody tr td,
#dec thead tr th, #dec tbody tr td {
  border: 1px solid #CCCCCC;
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 1.4286));
  text-align: center;
}
#inc thead tr th, #dec thead tr th {
  padding: 1% 0;
  font-weight: bold;
}
#inc tbody tr td, #dec tbody tr td {
  padding: 2% 0;
  font-weight: normal;
  vertical-align: middle !important;
}
#inc thead tr:first-child th,
#dec thead tr:first-child th {background:#EEEEEE;}

#inc thead tr:first-child th:nth-child(3),
#inc thead tr:first-child th:nth-child(4) {width:20%;}

#dec thead tr:first-child th:nth-child(4),
#dec thead tr:first-child th:nth-child(5) {width:20%}

#inc tbody tr td input,
#dec tbody tr td input {
  width: 60%;
  padding: 4% 0;
}

#inc tbody tr td input[type="number"],
#dec tbody tr td input[type="number"] {
  border: 1px solid #cccccc;
  border-radius: 3px;
}

#inc tbody tr td input[type="text"],
#dec tbody tr td input[type="text"] {
  border: none;
}

#inc tbody tr:last-child td:first-child,
#dec tbody tr:last-child td:first-child {
  padding-right: 6%;
  text-align: right;
  vertical-align: middle;
  font-weight: bold;
  color: white;
  background: #F08080;
}

/*** inc, dec grid layout ***/
.m-wrapper-grid {
  display:grid;
  width: 90%;
  margin: 1% 5%;
  border: 1px solid #CCCCCC;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: 60% 40%;
}
.m-wrapper-grid ul {
  display: contents;
}
.m-wrapper-grid ul li {
  padding:5% 0;
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 1.4286));
  border-bottom:1px solid #CCCCCC;
}
.m-wrapper-grid ul li:first-child {
  padding-left:10%;
  background: #F08080;
  /* text-align:right;*/
  font-weight:bold;
  color: white;
}
.m-wrapper-grid ul li:last-child {
  padding:10% 0;
  text-align: center;
}
.m-wrapper-grid ul:last-child li {
  border-bottom:none;
}

/***** BUTTONS *****/
/* ============================================ */
.o-wrapper-button {
  width: 90%;
  margin: 2.5% 5%;
}
.o-wrapper-button ul {
  text-align: center;
}
.o-wrapper-button ul li {
  display: inline-block;
  width: 30%;
  margin: 1% 1% 1% 5%;
  padding: 1%;
  border-radius: 5px;
  color: white;
  cursor: pointer; /* クリック範囲 */
}
.o-wrapper-button ul li:first-child {
  background:#CCCCCC;
}
.o-wrapper-button ul li:last-child {
  background: #13B1C0;
}
.o-wrapper-button ul li a {
  display: block; /* クリック範囲を親要素の幅に合わせる */
  font-size: calc(1.3rem + ((1vw - 0.64rem) * 0.7143));
}
.o-wrapper-button ul li button {
  width: 100%;
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 0,7143));
}
/* option */
.owb-login {margin-top:10%}
.owb-login ul li {
  width: 50%;
  padding: 3%;
}

.o-wrapper-table {
  overflow-x:scroll;
  white-space:nowrap;
}
.o-wrapper-table ul {
  text-align:left;
}
.o-wrapper-table ul li {
  display: inline-block;
  width: 30%;
  margin: 2% 2% 2% 0;
  padding: 2%;
  background: #13B1C0;
  border-radius:5px;
  text-align: center;
  color: white;
  cursor: pointer;
}
.o-wrapper-table ul li a {
  display: block;
  font-size: calc(1.1rem + ((1vw - 0.64rem) * 0.7143));
}

.o-wrapper-loadbutton ul {
  text-align: right;
}
.o-wrapper-loadbutton ul li {
  display: inline-block;
  width: 20%;
  margin-bottom: 1%;
  padding: 1%;
  text-align: center;
  font-size: calc(1.0rem + ((1vw - 0.64rem) * 0.7143));
  border-radius: 5px;
  background: #13B1C0;
  color: white;
  cursor: pointer;
}
.o-wrapper-loadbutton ul li a {
  display: block;
}

.m-wrapper-upload {
  text-align: center;
}
.m-wrapper-upload li {
  width: 30%;
  margin: 2%;
  padding: 2%;
  background: #13B1C0;
  border-radius: 5px;
  color: white;
  cursor: pointer; /* クリック範囲 */
}
.m-wrapper-upload li a {
  display: block;
  font-size: calc(1.0rem + ((1vw - 0.64rem) * 0.7143));
}

/***** FORMS *****/
/* ============================================ */
.o-wrapper-form input[type=text],
.o-wrapper-form input[type=number],
.o-wrapper-form input[type=date],
.o-wrapper-form input[type=email] {
  width:60%;
  margin: 1% 1% 1% 10%;
  padding: 1%;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
}

.o-wrapper-form select {
  width: 60%;
  margin: 1% 1% 1% 10%;
  padding: 1%;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  appearance: auto;
}

.m-wrapper-radio {
  margin: 1% 1% 5% 10%;
}
.m-wrapper-radio input[type=radio] {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 1% 1% 1% 5%;
  border: 1px solid #CCCCCC;
}
.m-wrapper-radio label {
  font-size: calc(1.2rem + ((1vw - 0.64rem) * 1.4286));
  color: #696969;
}

/***** FONT-AWESOME *****/
/* ============================================ */
.fa-home, .fa-door-open {
  font-size: 3em;
  padding: 0.5% 0.5% 0.5% 3%;
  color: #808080;
}
.fa-user, .fa-lock {
  font-size: 1.5em;
  padding:1%;
  color: #CCCCCC
}
.fa-search, .fa-users,
.fa-donate, .fa-hand-holding-usd,
.fa-file-upload {
  font-size: 1.5em;
  margin: 5%;
  color: #13B1C0;
}
.fa-file-upload {
  margin-right:8%;
}

/***** ORIGINALS *****/
/* ============================================ */
/** LOGIN **/
#login {margin-bottom:10%;}
#login input {
  width: 75%;
  margin:1% 1% 1% 10%;
  padding:2%;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
}

/** INDEX **/
.m-wrapper-index {
  width: 95%;
  margin: 0 2.5%;
}
.m-wrapper-index h1 {
  padding: 1% 1% 1% 3%;
  border-bottom: 1px solid #696969;
  border-left: 10px solid #696969;
  font-size: calc(1.6rem + ((1vw - 0.64rem) * 1.4286));
  font-weight: bold;
  color: #696969;
}
.m-wrapper-index ul {
  width: 100%;
  margin: 2.5% 0 10% 0;
}
.m-wrapper-index ul li {
  display: inline-block;
  width: 45%;
  margin: 1% 0 1% 2.5%;
  border-radius: 5px;
  background: white;
  cursor: pointer;
}
.m-wrapper-index ul li a {
  display: block;
  /*display: inline-block;*/
  /*margin-bottom: 5%;*/
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 1.4286));
  vertical-align: middle;
  color: #13B1C0;
}

/** SEARCH **/
.o-wrapper-search {
  padding-bottom: 3%;
  border-bottom: 1px solid #CCCCCC;
}
.o-wrapper-search > ul {
  margin-left: 5%;
  margin-bottom: 2.5%;
}
.o-wrapper-search > ul > li {
  display: inline-block;
  width: 60%;
}
.o-wrapper-search > ul > li:first-child {
  width: 10%;
  margin-left: 5%;
}
.o-wrapper-search > ul > li > input[type=text],
.o-wrapper-search > ul > li > input[type=number] {
  border: 1px solid #a0a0a0;
  border-radius: 5px;
  margin:1%;
  padding:1%;
}
.a-label-search {
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 1.4286));
  color: #696969;
  margin: 1%;
}
.a-label-result {
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 1.4286));
  color: #F08080;
  margin: 1%;
}
.a-label-note {
  font-size: calc(1.0rem + ((1vw - 0.64rem) * 1.4286));
  color: #CCCCCC;
  margin: 0 1% 1% 1%;
}
/** SEARCH_RESULT **/
.o-wrapper-pagination {
  padding: 2%;
}
.o-wrapper-pagination ul {
  text-align: center;
}
.o-wrapper-pagination ul li {
  display: inline-block;
  padding: 0 0.25%;
}
.o-wrapper-pagination ul li a {
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 1.4286));
  color: #13B1C0;
}
.o-wrapper-pagination span {
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 1.4286));
  color: #696969;
}

/** POINT_HISTORY **/
.a-username {
  font-size: calc(1.4rem + ((1vw - 0.64rem) * 1.4286));
  color: #696969;
  margin: 2% 0;
  padding-bottom: 2%;
  border-bottom: 1px solid #CCCCCC;
}

/** ...CONF **/
.m-wrapper-confirm {
  width: 90%;
  margin: 1% 5%;
}
.m-wrapper-confirm ul li {
  display: inline-block;
  margin: 1%;
  padding: 1%;
  font-size: calc(1.3rem + ((1vw - 0.64rem) * 1.4286));
  color: #696969;
}
.m-wrapper-confirm ul li:first-child {
  width: 40%;
  background: #EEEEEE;
}
.m-wrapper-confirm ul li:last-child {
  width: 50%;
}

/* scroll */
.scroll_search {
  height: 350px;
  overflow-y: scroll;
}
.scroll_history {
  height: 450px;
  overflow-y: scroll;
}
.scroll_list {
  height:500px;
  overflow-y: scroll;
}

/* add: カナ変換ボタン */
.kana_change {
  margin: 1%;
  padding: 2%;
  border-radius: 5px;
  background: #13B1C0;
  font-size: calc(1.0rem + ((1vw - 0.64rem) * 0.7143));
  color: white;
  cursor: pointer;
}

/* add: 生年月日 */
.o-wrapper-form ul {
  width:70%;
  margin: 1% 1% 1% 9%;
  padding: 1%;
}
.o-wrapper-form ul li {
  display: inline-block;
  width: 30%;
}
.o-wrapper-form ul li input[type=tel] {
  width: 75%;
  padding: 5%;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  font
}