/*
Template: foliopress
Theme Name: COSMOS Online Card
Version: 1.0
*/


body {
  font: 15px 'Noto Sans JP', sans-serif;
  font-weight: normal;
  color: #777;
}

input, textarea, select {
  color: #000;
}
input, textarea {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.2);
}

input::-webkit-input-placeholder,
input::placeholder {
  color: #000;
  opacity: 0.2;
}

input[type="reset"], input[type="button"], input[type="submit"] {
  background: rgba(48, 166, 220, 1);
}
input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:hover {
  background: rgba(48, 166, 220, 0.7);
}

::selection {
  background: rgba(48, 166, 220, 1);
  color: #fff;
}
::-moz-selection {
  background: rgba(48, 166, 220, 1);
  color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font: 15px 'Noto Sans JP', sans-serif;
  font-weight: normal;
  color: #555;
  margin-bottom: 1.0rem;
}

h2 {
  font-size: 26px;
  text-align: center;
}

h3 {
  font-size: 20px;
}
h3:after {
  margin-top: 6px;
  height: 3px;
  display: block;
  content: "";
  width: 120px;
  background-color: rgba(48, 166, 220, 1);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}

a, a:focus, a:active, a:hover {
  color: rgba(48, 166, 220, 1);
}

a img {
  -ms-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
a:hover img {
  opacity: 0.7;
}

@media only screen and (max-width: 767px) {

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 16px;
  }

}

.button,
input.button {
  border: 0 none;
  cursor: pointer;
  margin-bottom: 20px;
  color: #fff;
  display: inline-block;
  text-transform: uppercase;
  text-align: center;
  width: auto;
  padding: 10px 20px;
  background-color: rgba(48, 166, 220, 1);
  -ms-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
}
.button:hover,
input.button:hover,
.button:active,
input.button:active,
.button:focus,
input.button:focus {
  color: #fff;
  text-decoration: none;
  background: rgba(48, 166, 220, 0.8);
  outline-color: rgba(48, 166, 220, 0.8);
}
.button.button-line,
input.button.button-line {
  border: 1px solid rgba(48, 166, 220, 1);
  color: rgba(48, 166, 220, 1);
  background: #fff;
}
.button.button-line:hover,
input.button.button-line:hover,
.button.button-line:active,
input.button.button-line:active,
.button.button-line:focus,
input.button.button-line:focus {
  background: rgba(48, 166, 220, 0.1);
  border: 1px solid rgba(48, 166, 220, 0.7);
  color: rgba(48, 166, 220, 1);
}
.button.button-full,
input.button.button-full {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}




header nav {
  border: 0 none;
  background: rgba(48, 166, 220, 1);
  color: #fff;
  text-align: center;
  padding: 6px 0;
}
header nav a {
  color: #fff;
}
body.ocard-login header nav {
  padding: 60px 0;
}
.site-branding {
  margin: 0 auto;
  padding: 0;
  display: block;
}
.site-branding img {
  height: 34px;
}
body.ocard-login .site-branding img {
  height: auto;
}
.site-title {
  font-size: 22px;
  font-weight: normal;
}
.site-title a {
  color: #fff;
}
body.ocard-login .site-title {
  font-size: 28px;
}
.custom-header-text {
  text-align: center;
  padding-top: 40px;
  margin: 0 auto;
}
.site-content, .site-footer .widget-area {
  padding-top: 0;
}

.site-title a:hover, .site-title a:focus, .site-title a:active {
  color: #fff;
}

.entry-header, .page-header {
  padding: 28px 0 0 0;
}
.entry-title, .page-title {
  text-align: center;
}
.entry-content {
  padding: 28px 0 0 0;
}

.entry-title:after, .page-title:after, .widget-title:after, .post-grid .entry-title:after {
  display: none;
}

.entry-content th {
  padding: 8px;
}
.entry-content td {
  vertical-align: top;
}

.wp-pagenavi .current, .wp-pagenavi a:hover {
  background-color: rgba(48, 166, 220, 1);
  border-color: rgba(48, 166, 220, 1);
}

.site-info {
  background: #EEEEEE;
  border: 0 none;
  padding: 0 0 36px 0;
}
.site-info .social-profiles, .site-info .copyright {
  background: #fff;
  padding: 0 0 16px 0;
  font-size: 13px;
  font-weight: lighter;
  color: #ACACAC;
}

.back-to-top a {
  background-color: rgba(48, 166, 220, 1);
}

.list-group-item.active {
  background: rgba(48, 166, 220, 1);
  border-color: rgba(48, 166, 220, 1);
}
.list-group-item.disabled, .list-group-item:disabled {
  color: #b5b5b5;
}











.action-button .button {
  margin-bottom: 20px;
}

.ocard-notices {
  margin: 0 auto 22px auto;
}
.ocard-notices.ocard-notices-error {
  color: #dc3545;
  background: rgba(255, 0, 0, 0.1);
  padding: 10px 18px;
}
.ocard-notices.ocard-notices-error .notice:before {
  font-family: 'FontAwesome';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\f00d';
  display: inline-block;
  margin: 0 4px 0 auto;
}




.login-form {
  background: #fff;
  margin-top: -74px;
  padding: 20px;
}


.card-list-info {
  text-align: right;
  font-size: 12px;
  margin: 0 0 14px 0;
}
.card-list {}
.card-list .card-meishi {
  border: 0 none;
  margin: 0 auto 50px auto;
  text-align: center;
}
.card-list .card-meishi .card-images {
}
.card-list .card-meishi .card-images a {
  display: block;
  position: relative;
  padding: 0 0 24px 0;
}
.card-list .card-meishi .card-images .main-image,
.card-list .card-meishi .card-images .sub-image {
  width: 95%;
}
.card-list .card-meishi .card-images .main-image {
  position: relative;
  z-index: 100;
}
.card-list .card-meishi .card-images .sub-image {
  position: absolute;
  z-index: 99;
  right: 0;
  bottom: 0;
}
.card-list .card-meishi .card-images .main-image img {
  box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.3);
}
.card-list .card-meishi .card-images a:hover img {
  opacity: 1;
}
.card-list .card-meishi .action-button {
  margin: 20px 20px 0 20px;
  padding: 0 0 4px 0;
}


.card-detail {
  margin: 0 auto 40px auto;
}
.card-detail .card-images {}
.card-detail .card-images .card-image {
  margin: 0 auto 20px auto;
}
.card-detail .card-detail-content {
  padding: 10px 20px;
  background: #F7F7F7;
}
.card-detail .card-detail-content table {
  width: 100%;
  font-size: 13px;
}
.card-detail .card-detail-content table tbody th,
.card-detail .card-detail-content table tbody td {
  border-top: 1px solid #eaeaea;
}
.card-detail .card-detail-content table tbody tr:first-child th,
.card-detail .card-detail-content table tbody tr:first-child td {
  border-top: 0 none;
}
.card-detail .card-detail-content table tbody th {
  width: 20%;
  font-weight: normal;
  vertical-align: top;
}

@media only screen and (max-width: 767px) {

  .card-detail .card-detail-content table tbody th {
    width: 30%;
  }

}

.card-detail .card-detail-content table tbody td {
  color: #000;
}



.ocard-content {}
.ocard-content .ocard-select-action {
  margin-bottom: 40px;
}
.ocard-content .ocard-actions {
  margin: 0 auto 50px auto;
}
.ocard-content .ocard-actions .ocard-action {
  margin-bottom: 50px;
  display: none;
  border: 5px solid #e8ebec;
  padding: 20px 20px 30px 20px;
  background: #f8fdff;
}
.ocard-content .ocard-actions .ocard-action.active {
  display: block;
}
.ocard-action.send-mail textarea {
  height: 160px;
}
.ocard-action.download .vcard .qrcode-image {
  float: right;
  margin: 0 auto 20px 20px;
  max-width: 160px;
}

@media only screen and (max-width: 575px) {

  .ocard-action.download .vcard .qrcode-image {
    float: none;
    margin: 0 auto 20px auto;
    max-width: none;
  }

}

.ocard-action.download .qr-code .qr-code-image {
  float: right;
  margin: 0 0 20px 20px;
  max-width: 200px;
}

@media only screen and (max-width: 575px) {

  .ocard-action.download .qr-code .qr-code-image {
    float: none;
    margin: 0 auto 20px auto;
    max-width: none;
  }

}