@charset "utf-8";

.cp-container ul {
  list-style: none;
  margin:0;
  padding: 0;
  -webkit-padding-start:0 !important;
}
a.btn:hover, a.btn:active, a.btn:focus, .page_link input[type="submit"]:hover {
  opacity: 0.8;
}
.breadcrumb-wrap {
  margin-bottom: 0;
}
.cp-container {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
  background-color: #fff;
  overflow: hidden;
  font-size: 15px;

}
.cp-container h3 {
  background: #ffe7e0;
  padding: 0 2px;
  line-height: normal;
  height: auto;
}
.cp-container h3:before, .cp-container h3:after {
  border: none;
}
h3.title{
  background: none;
  margin-top: .5em !important;
  margin-bottom: 5px !important;
  color: #059cfa;
  font-weight: bold;
}

.main-bg-color {
  background-color: #fffdbf;
  position: relative;
}
.main_txt{
  position: absolute;
  background: url(../../images/campaign/cp170820/bg_pattern.png )repeat-x 100% 0;
  background-size: contain;
  width: 100%;
  height: 100%;
  bottom: 0;
}
.main_txt img{
  position: absolute;
  width: 62%;
  max-width: 617px;
  margin:auto;
  bottom: 2.7%;
  right: 0;
  left: 0;
}
.main-font-color, .details dt {
  color: #be2740;
}
.sub-bg-color {
  background-color: #fffee0;
}
.sub-bg-color02 {
  background-color: #f3f3f3;
}
.bg-color-white {
	background-color: #fff;
}

.color01{
  color: #f14993;
}
.color02{
  color: #be2740;
}
.color03{
  color: #059cfa;
}

.section-wrap{
  padding: 2.5em 10px;
}
.max-w, .step {
  max-width: 800px;
  margin: 0 auto;
}
.max740{
  max-width: 740px;
  margin: auto;
}
.max640{
  max-width: 640px;
  margin: auto;
}
.max480{
  max-width: 480px;
  margin: auto;
}
.max200{
  max-width: 200px;
  margin: auto;
}

.w100 {
  width: 100%;
}
.w50 {
  width: 50%;
}
.font-big {
  font-size: 130%;
}
.font-bigger {
  font-size: 180%;
}

.cam-ttl{
  position: relative;
  padding-bottom: .5em;
  margin-bottom: 1em;
}
.cam-ttl:after{
  content: "";
  position: absolute;
  width: 80px;
  height: 7px;
  border-radius: 7px;
  background: #00b4e0;
  margin: auto;
  bottom: 0;
  right: 0;
  left: 0;
}
.cam-ttl2{
  color: #f14993;
}

.select_date{
  margin-top: 1.5em;
  border:1px solid #059cfa;
  border-radius: 5px;
	overflow: hidden;
}
.search-ttl{
  background: #059cfa;
  color:#fff;
  border-radius: 3px 3px 0 0;
  padding: .5em;
  line-height: 1;
  letter-spacing: 1px;
}
.top-search.list-btn {
  border-top: none;
  border-bottom: none;
}
.top-search.list-btn ul {
  padding:1em !important;
}
.top-search.list-btn ul li {
  width: 100%;
  margin:.5em;
}
.top-search.form-input {
  border-top:1px dashed #059cfa;
  background-color: #f4fdff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.form-group{
  text-align: center;
}
.form-group input[type="search"] {
  border: solid #f14993;
  border-width: 2px 0 2px 2px;
  border-radius: 4px 0 0 4px;
  padding: 10px 12px;
  flex: 4;
}
.form-control {
  height: auto;
}

.btn-top {
  border-color: #f14993 !important;
  border-width: 2px 2px 4px 2px;
  padding: 0px 5px 10px 5px !important;
  font-size:2.6rem;
  font-weight: bold;
  color: #333333;
  margin-bottom: 0!important;
}
.btn-top span {
  padding-top: 58px;
  display: block;
  font-size: 16px;
  font-weight: normal;
}
.btn-area {
  background: url(/images/campaign/cp170820/area-btn.png) #fff no-repeat center 10%/50px auto;
}
.btn-station { 
  background: url(/images/campaign/cp170820/station-btn.png) #fff no-repeat center 10%/50px auto;
}
.btn-here {
  background: url(/images/campaign/cp170820/here-btn.png) #fff no-repeat center 10%/50px auto;
}
.btn-genre {
  background: url(/images/campaign/cp170820/genre-btn.png) #fff no-repeat center 10%/50px auto;
}
.mobile-search-form {
  padding: 20px 1em;
}

.btn-search {
  background: #f14993 !important;
  color:#fff;
  border: none !important;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0;
  display: block;
  border-radius: 0 4px 4px 0;
  letter-spacing: 2px;
  width: 100%;
  flex:1;
}
.btn-search i{
  margin-right: 5px;
}
.btn-search:hover, .btn-search:focus, .btn-search:active {
  color: #fff;
  opacity: 0.8;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
  color: #333;
  background-color: #fff0f4;
}

.btn-cam, .btn-primary.disabled {
  max-width: 400px;
  width: 80vw;
  padding: .8em 0;
  margin: .6em .4em;
  white-space: inherit;
  background-color: #059cfa;
  border: none;
  box-shadow: 0 0.2rem 0 #0174bb;
}
.step .btn-cam{
  font-size: 120%;
}
.btn-cam:hover, .btn-cam:focus, .btn-cam:active {
  background-color: #059cfa;
}
.btn-arrow{
  position: relative;
  padding-right: 10px !important;
}
.btn-arrow:after{
  position: absolute;
  content: "\f054";
  font-family: "FontAwesome";
  font-size: 14px;
  margin:auto;
  right: 10px;
  top: 50%;
	margin-top: -.5em;
	line-height: 1;
}

dl.note {
  margin-top: 10px;
}
dl.note dt {
  background: #f19ec2;
  color: #fff;
  padding: 2px 10px;
  border-radius: 5px;
  display: inline-block;
}
dl.note dt span {
  text-shadow: 0px 1px 1px #eb71a6;
}
dl.note dd {
  padding: 2px 0;
}

.lead-wrap{
  line-height: 1.8;
  padding-bottom: 1em;
}
.emphasis{
  background: linear-gradient(#fff 60%, #ffe8f2 60%);
  padding-bottom:.2em;
  margin-bottom: 1em;
}

.point-txt{
  background:#fff;
  border-radius: 5em;
  border:1px solid #333;
  align-items: center;
  justify-content: center;
  padding: .5em 0;
  margin:0 .2em;
}
.eppoint-conts{
  width: 100%;
}
.eppoint-txt-wrap{
  padding-top: .5em;
}
.point-ttl{
  line-height: 1.2;
}
.point-ttl-emp{
  font-size: 140%;
}

.point-wrap li{
  background: #fff;
  padding: 1em;
  margin:.3em;
  border-radius: .5em;
  width: 100%;
  flex-direction: column;
}
.point-wrap li img{
  width: 150px;
}

.eppoint-change{
  margin-top: 1.5em;
  border:2px dashed #acd15c;
  padding: 1.5em 1em;
  border-radius: 5px;
  background:#fff;
}
.emp-txt{
  position: relative;
  font-size: 130%;
  padding-bottom: .5em;
}
.emp-txt span{
  padding: 0 .3em;
  border-bottom: 1px dashed #aaa;
}

span.emp-line{
  background: linear-gradient(rgba(0,0,0,0) 70%, #f9efb2 70%);
  font-size:110%;
}

.num {
  background-color: #00b4e0;
  color: #fff;
  width: 2em;
  min-width: 2em;
  display: inline-block;
  text-align: center;
  height: 2em;
  line-height: 2;
  border-radius: 100%;
  margin-right: .5em;
}
.step {
  margin: .5em auto;
  background-color: #fff;
  padding: 1em;
  border: 1px solid #00b4e0;
  border-radius: .5em;
}
.step h3{
  background: none;
  color: #333;

}
.cam-border {
  border: solid 3px #00b4e0 !important;
}
.indent {
	text-indent: -1em;
	padding-left: 1em;
}

.point-emp {
  border-top: 1px dashed #ccc;
  padding-top: .3em;
}
.step .panel{
  border: 1px solid #ddd;
  box-shadow: none;
}
.step-panel{
  font-size: 80%;
  text-align: left !important;
}
.step-capture .btn-primary, .step-capture .btn-primary:active, .step-capture .btn-primary:hover, .step-capture .btn-primary:focus {
  background-color: #7db739;
  border-color: #529a00;
  color: #fff;
}
.circled {
  position: relative;
}
.circled::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: .5em;
  box-shadow: 0px 0px 0px 4px #fff, 0px 0px 0px 8px #f14993;
  content: "";
}
.bg-circle {
	background-image: -moz-radial-gradient(center, circle contain, transparent calc(80% - 10px),#efd calc(80% - 10px),#efd calc(80% + 10px),transparent calc(80% + 10px));
	background-image: -webkit-radial-gradient(center, circle contain,  transparent calc(80% - 10px),#efd calc(80% - 10px),#efd calc(80% + 10px),transparent calc(80% + 10px));
	background-image: radial-gradient(circle closest-side at center,  transparent calc(80% - 10px),#efd calc(80% - 10px),#efd calc(80% + 10px),transparent calc(80% + 10px));
}
.bg-cross {
  background-image:-moz-radial-gradient(circle closest-side at center,  transparent 100%,#fff 100%),-moz-linear-gradient(-45deg, transparent calc(50% - 10px), #fee calc(50% - 10px), #fee calc(50% + 10px), transparent calc(50% + 10px)), -moz-linear-gradient(45deg, transparent calc(50% - 10px), #fee calc(50% - 10px), #fee calc(50% + 10px), transparent calc(50% + 10px));
  background-image:-webkit-radial-gradient(circle closest-side at center,  transparent 100%,#fff 100%),-webkit-linear-gradient(-45deg, transparent calc(50% - 10px), #fee calc(50% - 10px), #fee calc(50% + 10px), transparent calc(50% + 10px)), -webkit-linear-gradient(45deg, transparent calc(50% - 10px), #fee calc(50% - 10px), #fee calc(50% + 10px), transparent calc(50% + 10px));
  background-image:radial-gradient(circle closest-side at center,  transparent 100%,#fff 100%),linear-gradient(-45deg, transparent calc(50% - 10px), #fee calc(50% - 10px), #fee calc(50% + 10px), transparent calc(50% + 10px)), linear-gradient(45deg, transparent calc(50% - 10px), #fee calc(50% - 10px), #fee calc(50% + 10px), transparent calc(50% + 10px));
}

.step-capture {
  position: relative;
}
.step-capture::after {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  content: " ";
}
.point-emp{
  font-size: 110%;
}
.point-emp .fa{
  padding-right:.2em;
}

.img_points_target{
  background: #fff;
  border-radius: 5px;
}

#details ul{
  display: block;
}
#details .campaign-detail-panel > ul> li{
  display: block;
  text-indent: -1.4rem;
  padding:0 0 .8em 1.4rem;
  border:none;
}
#details .campaign-detail-panel > ul> li:before{
  content: "・";
}

.details {
  border: solid thin #ccc;
  background-color: #fff;
  display: flex;
  display: -webkit-flex;
  flex-flow: wrap;
}
.details dt {
  padding: .8em;
  width: 25%;
  font-size:1.4rem;
}
.details dt:not(:first-child), .details dd:not(:nth-child(2)) {
 border-top: solid thin #ccc;
}
.details dd {
  padding: .8em;
  width: 75%;
}
.details li:not(:last-child){
  padding-bottom: .4em;
}

/*FAQ*/
#faq dt, #faq dd {
  border-radius: .3em;
  margin-top: .4em;
  padding: .8em 2em;
  line-height: 1.4;
  cursor: pointer;
  position: relative;
}
#faq dt::before, #faq dd::before {
  content: "Q";
  display: inline-block;
  font-weight: bold;
  color: #be2740;
  position: absolute;
  left: .7em;
}
#faq dt{
  border:1px solid #ccc;
  background-color: #fff;
}
#faq dt::after {
  content: "\f078";
  font-family: 'FontAwesome';
  display: inline-block;
  position: absolute;
  right: .7em;
  top: 50%;
  margin-top: -.7em;
  font-weight: normal;
  color: #ccc;
}
#faq dl dt.active::after {
  content: "\f077";
}
#faq dd {
  display: none;
  margin: 0 0 .4em 0;
}
#faq dd::before {
  content: "A";
  color: #c7a40d;
}
/*アラート文言*/
.cam-alert {
  max-width: 600px;
  margin: 1em auto;
  background-color: #fff;
  border: medium solid #f66;
  padding: 1em;
  border-radius: .5em;
  color: #c00;
}

/*スマホのとき*/
@media (max-width: 767px) {
  .cp-container {
    font-size: 13px;
  }

  .font-big{
    font-size:115%;
  }
  .font-bigger{
    font-size:150%;
  }

  .btn:not(.btn-arrow) {
    margin-bottom: 5px;
  }
  .btn-top {
    font-size: 1.6rem;
  }
  .btn-top span {
    font-size: 12px;
    padding-top: 48px;
  }
  /*.btn-arrow{
    line-height: 1.3;
    padding: 5px 10px 5px 0;
  }*/
  .btn.btn-cam:not(.btn-arrow){
    padding:10px 0 !important;
  }

  .cam-date{
    font-size:1.3rem;
    letter-spacing: 0;
  }

  dl.note {
    font-size: 12px;
  }

  .eppoint-conts {
    max-width: 30%;
    margin: 0 auto;
  }
  .point-ttl{
    font-size: 4.2vw;
    padding:.5em;
  }
  .point-wrap li{
    margin:.2em 0;
  }
  .point-wrap li img{
    width: 110px;
  }
  .point-txt{
    padding-bottom:.5em;
  }
  .eppoint-conts{
    max-width: 30%;
    margin: 0 auto;
  }

  .step .panel-title{
    font-size:14px;
  }
  .details dt {
    width: 100%;
    padding-bottom: 0;
  }
  .details dd {
    width: 100%;
    border-top: none!important;
  }
}

@media (max-width: 480px) {
  .top-search.list-btn ul li{
    margin:.3em;
  }
  .lead-wrap-top{
    font-size: 1.2rem;
    padding-bottom:.5em;
  }
  .lead-wrap{
  line-height: 1.6;
}
.lead-wrap p:last-child{
  margin-top: .5em;
}
  .greeting .emphasis{
    font-size: 4.5vw;
  }
  .greeting h2 img{
    max-width: 260px;
  }
  .btn-top{
    background-size: 12vw;
  }
  .btn-top span{
    padding-top:12vw;
  }
  .btn-search{
    font-size: 1.3rem;
  }
  .emp-txt{
    font-size: 4.6vw;
  }
  .point-txt{
    font-size:3.4vw;
    line-height:1.2;
    padding: .6em 0;
  }
  .eppoint-txt{
    font-size: 2.6vw;
  }
  .points-target .text-danger{
    font-size: 1.1rem;
  }
  .step-capture {
    font-size:90%;
    margin-top: .5em;
  }
}

/*SEのとき*/
@media (max-width: 320px) {
  .cam-date{
    font-size:1.1rem;
  }
  .top-search.list-btn ul{
    padding: 1em .5em !important;
  }
  .btn.btn-top{
    padding: 6px 0 !important;
  }
}

/*PCのとき*/
@media (min-width: 768px) {
  .cp-container .greeting {
    text-align: center;
  }
  .btn-cam{
    font-size: 1.5rem;
  }
  .eppoint-conts img{
    max-width: 180px;
  }
  .point-ttl{
    font-size:2.5rem;
  }
  .points-target .detail {
    padding-left: 0.5vw;
    padding-right: 0.5vw;
  }
}