@charset "UTF-8";
/*=======================================
coipo
========================================*/
/* common
------------------------------------------------------- */
/*----- coipo出しわけ -----*/
.coipo-status-0, .coipo-status-1 {
  display: none;
}
.no_connect .coipo-status-0, .connected .coipo-status-1 {
  display: block;
}
/* バナー 出し分け */
.bnr-coipo {
  display: none;
}
.no_connect .bnr-coipo {
  display: block;
}
/* 新規会員 (2日間coipo誘導出さない) */
.no_connect.new_member-1 .bnr-coipo, .no_connect.new_member-1 .box_coipo_phese {
  display: none !important;
}
/*----- キャンペーンコード出しわけ -----*/
.campaign-status-0, .campaign-status-1 {
  display: none;
}
.campaign_view-0 .campaign-status-0, .campaign_view-1 .campaign-status-1 {
  display: block;
}
/* pay
------------------------------------------------------- */
.box_coipo_phese {
  display: none;
  background: rgba(153, 51, 51, 1);
  padding: 5px 10px 10px;
  text-align: left;
  font-size: 13px;
}
.no_connect .box_coipo_phese {
  display: block;
}
.box_coipo_phese a {
  display: block;
  padding-left: 20px;
  line-height: 14px;
  font-size: 11px;
  color: #ffeb7c;
}
.box_coipo_phese .text-att {
  margin-bottom: 3px;
  padding: 0;
}
.box_coipo_phese .text-att > span {
  display: inline-block;
  margin: 0;
  padding-left: 20px;
  text-align: right;
  font-weight: bold;
  font-size: 11px;
  color: #fff;
  background: url(../images/coipo/icon-mark.png) no-repeat left;
  background-size: 15px;
}
/* mypage
------------------------------------------------------- */
.maypage .sec01 {
  position: relative;
}
.box_point {
  padding: 10px 0px 10px;
  background: url(../images/coipo/bg_coipo_top.jpg) no-repeat top, url(../images/coipo/bg_coipo_btm.jpg) no-repeat bottom, url(../images/coipo/bg_coipo_mid.jpg) repeat-y;
  background-size: 100%;
  margin-bottom: 15px;
  overflow: hidden;
}
.box_point .box_inner {
  margin: 0 15px;
  color: #000;
}
.box_point .box_inner p {
  color: #000;
}
.box_point .btn-menu {
  width: 90%;
}
.box_point .btn-menu li {
  background: #78022c;
  border: none;
}
.box_point .box_inner a {
  font-size: 16px;
  text-shadow: 1px 2px 1px #5c0036;
}
.tit_komi {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: url(../images/coipo/tit_coipo.jpg) top center no-repeat;
  background-size: 100%;
  min-height: 92px;
  display: table;
  position: relative;
}
.tit_komi h3 {
  text-align: right;
  /* color: #efcb56; */
  font-size: 20px;
  display: table-cell;
  vertical-align: middle;
  position: relative;
  line-height: 1.2;
  padding: 5px 46px 0 17px;
}
.link_sky {
  color: #00ffe4 !important;
}
.box_point h3 {
  box-sizing: border-box;
  letter-spacing: 1px;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 2px 2px 1px #663333, 2px 2px 1px #663333, 2px 2px 1px #663333, 2px 2px 1px #663333, 3px 3px 1px #663333;
  font-size: 25px;
  top: -9px;
  left: 8px;
  color: #ff0066;
  font-weight: bold;
}
.box_point h3 img {
  width: 130px !important;
  vertical-align: -9px !important;
}
.box_point dl {
  overflow: hidden;
  text-align: right;
  color: #78022c;
}
.box_point dt {
  width: 43%;
  float: left;
}
.box_point dd {
  width: 42%;
  float: right;
}
.all_point {
  line-height: 40px;
}
.all_point dt {
  font-weight: bold;
  font-size: 16px;
}
.all_point dd {
  font-size: 23px;
  font-weight: bold;
  color: #e60012;
  margin-right: 35px;
}
.site_point {
  margin-bottom: 10px;
  line-height: 20px;
  font-size: 13px;
  color: #656f79;
}
.point_msg {
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  color: #e60012;
}
.text-att.no_connect {
  text-align: right;
  position: relative;
}
.text-att.no_connect > span, .text-att.no_connect > p > span {
  display: inline-block;
  margin: 0;
  padding: 0 0 0 18px;
  text-align: right;
  font-weight: bold;
  font-size: 12px;
  color: #ff0000;
  background: url(../images/coipo/icon-mark.png) no-repeat left 2px;
  background-size: 15px;
  /* text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000; */
}
.text-att.connected {
  display: none;
}
.box_point .connected {
  margin: 15px 0 10px;
  font-weight: bold;
}
.box_point .no_connect {
  display: none;
}
.box_point a {
  font-weight: bold;
  font-size: 13px;
  color: #ffffff;
}
.box_point .connected a {
  font-weight: bold;
  font-size: 13px;
  color: #730bda;
  text-shadow: none;
}
.box_point .btn {
  margin: 15px 0 0;
}
.box_point .btn a {
  letter-spacing: 0;
}
.mypage .txt {
  margin: 15px 0 10px;
}
/* COIPOとは */
.pop_coipo {
  margin-bottom: 0;
  padding: 0px 10px 20px 10px;
  text-align: right;
  text-decoration: underline;
  color: #78022c;
  font-weight: bold;
}
.box_coipo {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 15px 15px 30px !important;
  box-sizing: border-box;
  text-align: left;
  font-size: 13px;
  color: #21282f;
  visibility: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  transition: 0.4s;
  background: #fbfbfe;
}
.box_coipo.on {
  visibility: visible;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.box_coipo section {
  margin-bottom: 20px;
}
.tit_sub_coipo {
  padding: 10px;
  text-align: left;
  font-size: 15px;
  font-weight: bold;
}
.tit_sub_coipo.blue {
  color: #00b6ce;
}
.box_coipo .tit_sub_coipo {
  padding: 10px 0;
}
.box_coipo p {
  margin-bottom: 10px;
}
.btn-close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: -9px;
  right: -4px;
  z-index: 2000;
  background: url(../images/coipo/icon-close.png) no-repeat;
  background-size: 100%;
}
.box_coipo .btn-close {
  width: 40px;
  height: 40px;
  background: url(../images/coipo/icon-close_red.png) no-repeat;
  background-size: 100%;
  top: 3px;
  right: 3px;
}
.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
}
.text-att {
  text-align: left;
  color: #758597;
}
/* 連携したらどうなるの？ */
.howto {
  margin-bottom: 10px;
  padding: 0 0 10px;
  border-radius: 7px;
  color: #21282f;
  background: #fde1ed;
}
.howto .inner {
  margin: 0 10px;
  padding: 10px 10px 15px;
  border-radius: 7px;
  background: #fff;
}
.howto li {
  margin-bottom: 15px;
}
.howto li:last-child, .howto p:last-child {
  margin-bottom: 0;
}
.howto h4 {
  margin: 0 0 10px;
  padding: 10px 0;
  border-radius: 7px 7px 0 0;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background: #d60354;
}
/* COIPO入会キャンペーン pop */
#lp_coipo {
  display: none;
  height: 100%;
  padding: 10px 0 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.8);
}
#lp_coipo .box_popup {
  margin: 0 10px;
  padding: 0 0 15px;
  position: relative;
  border: 2px solid #e3c02f;
  border-radius: 10px;
  text-align: left;
  font-size: 13px;
  color: #0d0a00;
  background: #fafafa;
}
#lp_coipo .box_inner {
  padding: 0 10px;
}
#lp_coipo .tit {
  height: 43px;
  border-radius: 8px 8px 0 0;
  line-height: 43px;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 0 1px #5d4617, 0 0 1px #5d4617, 0 1px 1px #5d4617, 0 1px 1px #5d4617, 0 1px 2px #5d4617;
  font-family: "Sawarabi Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-weight: normal;
  font-size: 17px;
  color: #fff;
  position: relative;
  background: url(../images/pay/popup/tit_sub.jpg) no-repeat;
  background-size: 100%;
}
#lp_coipo .txt01 {
  font-weight: bold;
  color: #a78630;
}
#lp_coipo li {
  margin-bottom: 5px;
}
#lp_coipo li:last-child {
  margin-bottom: 0;
}
#lp_coipo p {
  margin-bottom: 10px;
}
#lp_coipo .text-att {
  margin: 0;
  padding: 10px;
  line-height: 15px;
  font-weight: bold;
  font-size: 11px;
  color: #d60000;
}
/* ppv
------------------------------------------------------- */
.bnr-coipo {
  margin-bottom: 20px;
  padding: 0 10px;
}
/*btn*/
.btn_coipo {
  width: 254px;
  margin: 0 auto;
}
.btn_coipo a, .btn_coipo input[type="submit"], .btn_coipo input[type="button"], .btn_coipo02 a, .btn_coipo02 input[type="submit"], .btn_coipo02 input[type="button"] {
  /* width: 260px; */
  /* margin: 0 auto; */
  /* display: block; */
  box-sizing: border-box;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* line-height: 70px; */
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 5px #5c0036, 0 1px 5px #5c0036;
  font-size: 18px;
  color: #fff;
  background: url(../images/coipo/btn_bg.png) no-repeat center center;
  background-size: 100% auto;
  height: 64px;
  display: table-cell;
  vertical-align: middle;
}
.btn_coipo a {
  width: 254px;
}
.btn_coipo a, .btn_coipo input[type="submit"], .btn_coipo input[type="button"] {
  padding: 0px 25px 4px 25px;
  font-size: 14px;
}
.btn_coipo02 a, .btn_coipo02 input[type="submit"], .btn_coipo02 input[type="button"] {
  padding: 10px;
  text-shadow: none;
}
.btn_coipo02.red a, .btn_coipo02.red input {
  font-size: 15px;
  box-shadow: 0 1px #a4143f, 0 1px 2px #a4143f;
  background: #d60354;
  text-align: center;
  display: block;
  line-height: 0;
  width: 250px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 20px;
  margin: 0 auto;
  padding: 20px;
}
.btn_coipo02.white a, .btn_coipo02.white input {
  box-shadow: none;
  font-size: 15px;
  border: 1px solid #E2E6E8;
  font-weight: bold;
  color: #d60354;
  background: #fff;
  display: block;
  line-height: 0;
  width: 250px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 20px;
  margin: 0 auto;
  padding: 20px;
}
/* link */
.link_coipo {
  margin-bottom: 0;
}
.link_coipo a {
  display: block;
  padding: 10px 10px 0 10px;
  text-align: right;
  text-decoration: underline;
  color: #78022c;
  font-weight: bold;
}
/* connect
------------------------------------------------------- */
.coipo_connect .text-red {
  color: #EA0000 !important;
}
.sec_coipo {
  padding: 0 10px;
  text-align: left;
}
.form dl {
  padding: 0 25px 20px;
  text-align: left;
}
.form dt {
  padding-bottom: 3px;
  font-weight: bold;
}
.form input, .form select, .form textarea {
  margin-bottom: 0;
  outline: none;
  padding: 7px;
  box-sizing: border-box;
  border: 1px solid #E2E6E8;
  line-height: 20px;
}
.form input[type="text"], .form input[type="password"], .form input[type="email"] {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 13px;
}
/* coipo_code
------------------------------------------------------- */
.coipo_code .box_point .box_inner {
  padding: 35px 30px 40px;
}
.tit_code {
  padding: 0 0 15px;
  font-weight: bold;
  color: #040010;
}
.coipo_code input[type="text"] {
  width: 60%;
  border: 2px solid #e5dde6;
  letter-spacing: 2px;
  line-height: 28px;
  text-shadow: 0 0 1px #fff, 0 1px 1px #fff, 0 1px 2px #fff, 0 1px 2px #fff, 0 1px 2px #fff, 0 1px 2px #fff, 0 1px 2px #fff;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #750c93;
  background: #e5dde6;
}
.coipo_code input.copyToClip {
  width: 60px;
  box-shadow: none;
  line-height: 30px;
  vertical-align: 2px;
  text-shadow: 0 1px 1px #5c0036, 0 1px 1px #5c0036;
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  background: rgb(245, 48, 124);
  background: -moz-linear-gradient(top, rgba(245, 48, 124, 1) 0%, rgba(245, 48, 124, 1) 22%, rgba(182, 13, 78, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(245, 48, 124, 1) 0%, rgba(245, 48, 124, 1) 22%, rgba(182, 13, 78, 1) 100%);
  background: linear-gradient(to bottom, rgba(245, 48, 124, 1) 0%, rgba(245, 48, 124, 1) 22%, rgba(182, 13, 78, 1) 100%);
}
.coipo_code .txt01 {
  text-align: left;
  font-size: 13px;
  color: #040010;
}
.coipo_code .txt01 a {
  font-size: 1.1em;
  color: #bf64ff;
}
.coipo_code .box_point .txt_notice {
  margin: 0;
  padding: 5px 5px 0;
  text-align: left;
  font-size: 12px;
  color: #333;
}
/* 未連携時 */
.coipo_code.no_connect .btn_coipo a {
  pointer-events: none;
  border: 0;
  text-shadow: none;
  color: #ccc;
  background: #888;
}


/* index (COIPO導線) 2024.10 add
------------------------------------------------------- */
.coipo_index #container {
  margin: auto;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  color: #606060;
  background: #FFDBEC;
}
.coipo_index .inner {
  padding: 20px;
}
.coipo_index section {
  margin: 0;
}
.coipo_index .bnr {
  margin: 20px 0;
  padding: 0;
}
.coipo_index .list_detail {
  margin: 20px 0 0;
}
.coipo_index .list_detail li {
  position: relative;
}
.coipo_index .list_detail .item {
  padding: 0 22px;
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  font-size: 12px;
}
.coipo_index .list_detail .cap {
  color: #fff;
}
.coipo_index .list_detail dt {
  margin: 5px -22px 15px;
  text-align: center;
  font-size: 15px;
  color: #D50454;
}
.coipo_index .list_detail dd {
  padding-left: 65px;
  letter-spacing: .05em;
  color: #606060;
}
.coipo_index .caption {
  letter-spacing: .05em;
  font-size: 15px;
  color: #D50454;
}
.coipo_index .caption span {
  font-size: 24px;
  font-weight: 700;
}
.coipo_index [class^="btn_"] {
  text-decoration: none;
}
.coipo_index .btn_coipo {
  display: block;
  margin: 20px auto 10px;
}
.coipo_index .btn_pagenext {
  display: none; /* 会員登録遷移時にのみjs表示 */
  width: 50%;
  margin-left: 48%;
}
.coipo_index footer {
  padding: 20px;
  background: #000;
}
.coipo_index .btn_pagetop {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #707070;
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  color: #9A9A9A;
  background: #fff;
}
.coipo_index .btn_pagetop span {
  display: inline-block;
  padding: 0 6px 0 18px;
  background: url("../images/coipo/index/icon_arrow.png") no-repeat left center;
  background-size: 11px;
}
.coipo_index .copy {
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #9A9A9A;
}