@charset "UTF-8";

article {
  box-sizing: border-box;
}
article img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}
.link-txt {text-decoration: underline;}
.pageBack {
	width:90%;
	max-width:990px;
	margin:0 auto;
	padding:1rem 0;
/*	border-top:2px solid #777;*/
	text-align:center;
}
.pageBack .centerBox a{
	display:inline-block;
	position:relative;
	padding:2rem;
	color:#fff;
	font-size:1rem;
}
.pageBack .centerBox a:after {
	-webkit-transform:rotate(135deg);
	display:block;
	position:absolute;
	top:50%;
	left:1rem;
	width:.5rem;
	height:.5rem;
	margin-top:-.3rem;
	clear:both;
	transform:rotate(135deg);
	border-width:0 2px 2px 0;
	border-style:solid;
	border-color:transparent #ffa904 #ffa904 transparent;
	content:"";
}
.subscAppeal p {
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.7rem;
	margin: 4rem 0 1rem;
}
/**
 * ***************************************
 * トップバナー
 * ***************************************
 */
.topbanner {
	margin-bottom: 2rem;
}
.topbanner h1{
	margin-bottom: 1rem;
}
.topbanner p{
	font-size: 1.5rem;
    line-height: 1.2;
	text-align: center;
	width: 90%;
	margin: 0 auto 0.5rem;
}
.topbanner p.txtMain{
	font-size: 2rem;
	font-weight: bold;
    color: #ffa904;
}
.topbanner p.txtBold{
	font-weight: bold;
}
.topbanner p.txtDate{
	font-size: 1rem;
}
.topbanner p .color{
	color: #ffa904;
}
.link-agreement{
    width:90%;
    margin: 0 auto 2rem;
    text-align: right;
    line-height: 1.5rem;

}
.camPeriod {font-size: 1rem!important; padding-bottom: 2rem!important;}
.camPeriod span {font-size: .8rem;}
.end-txt {
	text-align: center!important;
	color: red;
	
	padding-bottom: 3rem;
}
.link-banner {
	width: 90%;
	margin: 0 auto 4rem;
}
.link-banner img{
	max-width: 100%;
	text-align: center;
}
.link-banner p{
    font-size: 1rem;
	text-align: center;
    margin-bottom: 0.5rem;
}
/**
 * ***************************************
 * キャンペーンエリア
 * ***************************************
 */
.campaignArea {
    margin: 2rem auto 1rem;
    text-align: center;
}
.campaignArea p.txtMain{
    box-sizing: border-box;
	font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.5rem;
	text-align: center;
	width: 70%;
    padding: 0.5rem;
    border: solid 2px #eeec01;
    margin: 0 auto 1rem;
}
.campaignArea p.txtDate{
	font-size: 1rem;
	color: #eeec01;
}
.campaignArea .camImg {
    width: 70%;
    margin: 0 auto 1rem;
}
@media (max-width: 568px){
    .campaignArea p.txtMain,
    .campaignArea .camImg {width: 90%}
}

/**
 * ***************************************
 * アンカーエリア
 * ***************************************
 */
.anchor {
	width: 85%;
	margin: 0 auto 2rem;
}
.anchor-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
}
@media (max-width:480px){
	.anchor-nav {grid-template-columns: 1fr;}
}
.anchor-nav a {
	display: grid;
	align-items: center;
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	padding: 1rem 1rem 0.7rem;
	border-radius: 0.5rem;
}
.anchor-nav .orangeBtn {border: 2px solid #ffcc01; background: #ffcc01; color: #5f399c;}
.anchor-nav .orangeBtn:hover {border: 2px solid #5f399c; background: #fff; color: #5f399c;}
/**
 * ***************************************
 * ボタン
 * ***************************************
 */
.btnArea {
	width: 90%;
	max-width: 990px;
	margin: 0 auto 2rem;
}
.btnArea .btnBox {
	margin: 0 auto;
	text-align: center;
}
.btnArea .btnBox .btnOrange {
	border: 1px solid #ffcc01;
	background: #ffcc01;
	color: #5f399c;
}
.btnArea .btnBox a {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 4rem;
	width: 50%;
	margin: 0 auto;
	border-radius: 2rem;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 4rem;
	text-align: center;
/*	padding-top: 0.4rem;*/
}
.btnArea .btnBox span {
	display: block;
}
.btnArea .btnBox .clickhere {
	font-size: 1.2rem;
	margin-top: 0.3rem;
}
@media (max-width: 767px) {
	.btnArea .btnBox a {
		width: 100%;
	}
}
/**
 * ***************************************
 * 応募規約
 * ***************************************
 */
.entry-agreement {
	border: solid 1px #ffa904;
	padding: 1rem 1rem 0rem 1rem;
	
	margin: 0 2% 2rem 2%;
}
.entry-agreement p {
	font-size: 1rem;
	margin-bottom: 1rem;
	line-height: 1.5rem;
}
.entry-agreement a {
	text-decoration: underline;
}
.txt-blue {
	color: #ffa904;
	font-size: 1.2rem;
	font-weight: bold;
}
.txt-red {
	color: #f00;
}
.txt-bold {
	font-weight: bold;
}
/**
 * ***************************************
 * スライダー
 * ***************************************
 */
.sliderArea {
    width: 90%;
	max-width: 990px;
	margin: 0 auto 2rem;
	padding-bottom: 0;
}
.swiper-wrapper {
    align-items: flex-end;
}
.sliderArea li {
  width: 16.6%;
  /*width: 18%;*/
  padding: 0 .4rem .5rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.sliderArea .swiper-button-next,
.sliderArea .swiper-button-prev {
  display: none;
}
@media (max-width: 790px) {
  .sliderArea li { width: 22% !important;}
}
@media (max-width: 620px) {
  .sliderArea li { width: 28% !important;}
}
@media (max-width: 420px) {
  .sliderArea li { width: 38% !important;}
}

// Loading
.sliderArea._loading_img {
  padding: 2rem 0 4rem;
}
.sliderArea figure .loadingBox {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.sliderArea figure .loadingBox2 {
  display: table-cell;
  height: 12rem;
  vertical-align: middle;
  text-align: center;
}
.sliderArea figure .loadingBox img.loading_img {
  width: 100%;
  max-width: 100px;
  word-break: break-word;
}

.sliderArea figure.subscription .mark {
  background: #ffa904;
  color: #000;
  font-size: .7rem;
  font-weight: bold;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-feature-settings: "palt";
}
.sliderArea figure a {
  display: block;
}
.sliderArea figure img {
  width: 100%;
  height: auto;
  word-break: break-word;
}
.sliderArea figure + .titleName {
  /*height: 2.5rem;margin: 0.3rem 0.1rem 0.3rem;text-align: left;*/
}
.sliderArea .titleName {
  height: 2.5rem;margin: 0.3rem 0.1rem 0.3rem;text-align: left;
}
.sliderArea .titleName a {
  text-decoration: underline;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.2;
    word-break: normal;
}
.sliderArea .nolabel {
  height: 1.4rem;
}
.sliderArea .label {
  margin: 0 .1rem;
  text-align: left;
  height: 1.3rem;
}
.sliderArea .label span {
  display: inline-block;
  font-size: .6rem;
  height: 1rem;
  line-height: 1rem;
  border: 1px solid #fff;
  padding: 0 .3rem;
  margin-bottom: .2rem;
  border-radius: 5%;
}
.sliderArea .label span.rating {
	border: 1px solid #fff704;
	color: #fff704;
}
.sliderArea .swiper-button-next.custom {
  right: -4%;
}
.sliderArea .swiper-button-prev.custom {
  left: -4%;
}
.swiper-button-next.custom:after,
.swiper-button-prev.custom:after {
  -webkit-transform: rotate(-135deg);
  display: block;
  position: absolute;
  top: 6px;
  right: 5px;
  width: 16px;
  height: 16px;
  clear: both;
  transform: rotate(-135deg);
  border-top: 2px solid $color_white2;
  border-right: 2px solid $color_white2;
  content: "next";
  content: "";
}
.swiper-button-next.custom:after {
  -webkit-transform: rotate(45deg);
  right: 7px;
  transform: rotate(45deg);
}
.sampleBtn a {
	display: block;
	margin: 0.3rem 0.1rem 0;
	padding: 0.5rem 0;
	background-color: #fff;
	border-radius: 0.4rem;
	font-feature-settings: "palt";
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
	vertical-align: top;
    border: 1px solid #c7c7c7;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}
.sampleBtn a:hover {
	opacity:0.8;
}
/******************************************************/
.topBannerArea{
    position: relative;
    width: 95%;
    max-width: 990px;
    min-height:89px;
    margin: 0 auto 2rem;
}
/*@media (max-width: 480px){
    .topBannerArea{ max-width: 480px;}
}*/
.topBannerArea a,
.topBannerArea .swiper-slide > figure {
    display:block;
    width: 100%;
    max-width: 990px;
    margin: auto;
}
.topBannerArea img{
    width: 100%;
    max-width: 990px;
    margin:auto;
    word-break: break-word;
}
.topBannerArea .swiper-wrapper{
    padding: 0 0 2rem;
}
.topBannerArea .swiper-pagination-bullet {
    width: 1rem;
    height: .4rem;
    background: #777;
    border-radius: .4rem;
    vertical-align: middle;
    opacity: 1;
}
.topBannerArea .swiper-pagination-bullet-active {
    width: 2rem;
    background: #ffa904;
}
.topBannerArea.swiper-container>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 .2rem;
}
.topBannerArea.swiper-container>.swiper-pagination-bullets {
    bottom: .5rem;
    left: 0;
    width: 100%;
}
.topBannerArea .swiper-button-next {right: 0; width: 1.5rem; opacity: 1!important;}
.topBannerArea .swiper-button-prev {left: 0; width: 1.5rem; opacity: 1!important;}
.topBannerArea .swiper-button-next:after,
.topBannerArea .swiper-button-prev:after {
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 0px 3px 3px black;
}
.topBannerArea .swiper-slide img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;/* 画像下のスペースを消す */
}
.topBannerArea a, .topBannerArea .swiper-slide>figure {width: 93%;}
@media (max-width: 790px){
    .topBannerArea a, .topBannerArea .swiper-slide>figure {width: 91%;}
}
/*********************************************/
.premiumCampaign {
    margin: 4rem auto 1rem;
    width: 90%;
    text-align: center;
    font-size: 1.3rem;
}
.premiumCampaign .small {font-size: 1rem;}
.premiumCampaign .color {color: #ffa904;}
/*********************************************/
.DealsBannerArea {
    width: 90%;
    max-width: 990px;
    margin: 0 auto 4rem;
    text-align: center;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}
@media (max-width: 568px) {
    .DealsBannerArea {
        grid-template-columns: 1fr;
    }
}