@charset "utf-8";


article{
	width:100%;
}
　
/*###############################*/
/* 共通クラス*/
/*###############################*/
.contents_single h1 {
font-weight: bold;
line-height: 1.7;
margin-bottom: 4rem;
padding-bottom: 3rem;
}



/*###############################*/
/* 画像1枚　横幅いっぱいの画像*/
figure.item-img01-big{
	width:100%;
	margin:0 auto 40px;
}
figure.item-img01-big img{
	width:100%;
}


/*###############################*/
/* 画像1枚　横幅小さめ画像*/
figure.item-img01-small{
	width:46%;
	margin:0 auto 30px;
}
figure.item-img01-small img{
	width:100%;
}

@media only screen and (max-width:640px) {
	figure.item-img01-small{
		width:75%;
	}
}

/* 画像2列*/
ul.itemBox-img02{
display:flex;
justify-content: space-around;
}
ul.itemBox-img02 li{
width: 40%;
}
ul.itemBox-img02 li img{
width: 100%;
}


/*###############################*/

/* 画像3列*/
ul.itemBox-img03{
display:flex;
justify-content: space-around;
}
ul.itemBox-img03 li{
width: 30%;
}
ul.itemBox-img03 li img{
width: 100%;
}
@media only screen and (max-width: 765px) {
	ul.itemBox-img03{
		flex-wrap: wrap;
	}
	ul.itemBox-img03 li{
		width: 48%;
	}
	ul.itemBox-img03 li img{
		width: 100%;
	}
}

/*###############################*/

/* 画像4列*/
ul.itemBox-img04{
display:flex;
justify-content: center;
flex-wrap:wrap;
}
ul.itemBox-img04 li{
    padding: 2%;
    width: 48%;
    box-sizing: border-box;
}
ul.itemBox-img04 li img{
width: 100%;
}

/*###############################*/
/* 画像5列*/
ul.itemBox-img05{
	display:flex;
	justify-content: center;
	flex-wrap:wrap;
}
ul.itemBox-img05 li{
	padding: 2%;
	width: 48%;
	box-sizing: border-box;
}
ul.itemBox-img05 li img{
	width: 100%;
}

ul.itemBox-img05::after{
	content:"";
	display: block;
	width:48%;
}


/*flexboxを縦並びにしたい時のクラス###############################*/
/*!important付けている*/
@media only screen and (max-width:640px) {
	.campaign-box .flex-none{
		display: block!important;

	}
	.campaign-box .flex-none li{
		width: 75%!important;
		margin: 0 auto!important;
		text-align:center!important;
		margin-bottom: 30px!important;
	}
	.campaign-box .flex-none li img{
		width:100%!important;
	}
}

/*###############################*/

/* 黄色アンダーバー*/
.under-bar-ye {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #feff82));
    background: -webkit-linear-gradient(transparent 50%, #feff82 50%);
    background: -o-linear-gradient(transparent 50%, #feff82 50%);
    background: linear-gradient(transparent 50%, #feff82 50%);
}

/*###############################*/

/* 水色アンダーバー*/
.under-bar-aq {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #beecff));
    background: -webkit-linear-gradient(transparent 50%, #beecff);
    background: -o-linear-gradient(transparent 50%, #beecff);
    background: linear-gradient(transparent 50%, #beecff);
}

/*###############################*/

/* アイテムのリスト表「アイコンつきリスト表」*/
 ul.itemBox-list {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background: #ffffff;
    padding: 0 20px;
}
ul.itemBox-list li {
    padding: 1.5% 0 1.5% 0;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 0rem;

 position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;

}
ul.itemBox-list li::before {
  position: absolute;
    content: '';
    padding-right: 7px;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(https://ponos.s3.amazonaws.com/information/appli/battlecats/news/campaign/images/common/icon_neko.png) no-repeat;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
 url(https://ponos.s3.amazonaws.com/information/appli/battlecats/news/campaign/images/common/icon_neko.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
  left: 0;
  line-height: 20px;
  text-align: center;
  top: 20px;
}
ul.itemBox-list li:last-child {
    border-bottom: none;
}
.text-medium{text-align: center;}
.contents_single h2 {
    margin-top: 6rem;
}



/*####*/

/*アイテムのリスト表[レスポンシブだと縦並び]*/
table.itemBox-list-02 {
	list-style: none;
	border-collapse:collapse;
	width: 100%;
margin0 auto;
}
.itemBox-list-02 th, .itemBox-list-02 td{
	text-align: left; border:1px solid #dedede;
	padding: 1.5% 2% ;
	box-sizing: border-box;
}
.itemBox-list-02 th{
 	width: 30%;
	font-weight: bold;
}
.itemBox-list-02 td{
	width: 70%;
}
@media only screen and (max-width: 765px) {
	.itemBox-list-02 tr {
		display:block;
	}
	.itemBox-list-02 th {
		text-align:center;
		display:block;
		width: 100%;
    		border-bottom: 1px dotted #dedede;
    		background:#f0f0f0;
	}
	.itemBox-list-02 td {
		display: list-item;
		width: 100%;
		border-top : none;
	}
}

/*####*/

/*アイテムのリスト表[2パターンのテキストを掲載する場合]*/

table.itemBox-list-03{
		width: 100%;
		margin: 0 auto;
		  background: #fff;
		  font-size: 14px;
		text-align:center;
	}
	table.itemBox-list-03 th {
	vertical-align: middle;
	  border: solid 1px #dedede;
	  color: #000;
	}
	table.itemBox-list-03 td {
		text-align: center;
		vertical-align: middle;
		border: solid 1px #dedede;
		padding: 10px;
	}
	table.itemBox-list-03 td:first-child {
	         background: #eff3f6;
	}
	table.itemBox-list-03 td.ttl-line{
		font-weight: bold;
		color: #364b69;
	}
	@media screen and (max-width: 765px) {
	  table.itemBox-list-03 {
	    width: 100%;
	  }
	  table.itemBox-list-03 .thead {
	    display: none;
	  }
	  table.itemBox-list-03 tr {
	  	vertical-align: middle;
	    width: 100%;
	  }
	 table.itemBox-list-03 td {

	    display: block;
	    text-align: left;
	    width: 100%;
	    box-sizing: border-box;
	}
	table.itemBox-list-03 td br{
		display: none;
	}

	  table.itemBox-list-03 td:first-child {
	    background: #f0f0f0;
	    color: #000;
	    font-weight: bold;
	    text-align: center;
	  }
	  table.itemBox-list-03 td:before {
	    content: attr(data-label);
	    float: left;
	    font-weight: bold;
	    margin-right: 20px;
	  }
	}

/*###############################*/
/*数字リスト・SNSブロック*/
.sec_snsBlock {
    margin-bottom: 4rem;
}

/*SNS参加方法*/
ol.sns-attend {
  counter-reset:number;
  list-style-type: none!important;
  padding:0.5em;

}
ol.sns-attend li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

ol.sns-attend li:before{
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display:inline-block;
  background: #ffcc00;
  color: #fff;
  font-weight:bold;
  font-size: 14px;
  border-radius: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  line-height: 20px;
  text-align: center;
  top: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
ol.sns-x li:before{ background: #000000;}
ol.sns-tw li:before{ background: #1da1f2;}
ol.sns-fc li:before{ background: #3b5998;}
ol.sns-li li:before{ background: #00b900;}
ol.sns-normal li:before{background: #ffba00;}



/*SNSボタン*/
div.sns-btn {
    text-align: center;
    margin:30px 0　40px;
}
div.sns-btn img {
    width: 43%;
}
@media screen and (max-width: 765px) {
div.sns-btn img {
    width: 58%;
}
}

/*###############################*/


/* LINEがない場合*/
div.line-dw-box {
          padding: 20px;
          background: #f1f1f1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
}

          ul.line-list-box {
              display: flex;
              width: 55%;
              margin-bottom: 0rem;
          }
          ul.line-list-box li{
              margin-bottom: 0rem;
          }
	ul.line-list-box li:first-child{
                    width: 43%;
          }
          ul.line-list-box li:last-child{
              margin-left:3%;
              width: 53%;
          }
          ul.line-list-box li img {
              width: 100%;
          }
          div.line-non-txt {
              display: block;
              font-size: 14px;
              font-weight: bold;
          }

@media screen and (max-width: 765px) {
          ul.line-list-box {
             width: 100%;
             margin: 0 auto;
             width: 88%;
          }
          div.line-non-txt {
              display: block;
              margin-bottom: 10px;
              margin-left: 0px;
          }
          .downloadBtn {
              text-decoration: none;
              margin: 0 0rem;
          }
          div.line-dw-box {
              text-align: center;
              display: block;
          }
}

/*###############################*/
/* ボタン表示・非表示*/
/*###############################*/
.check-txt {
          margin-top: 40px;
          width: 100%;
	box-sizing: border-box;
          padding: 10px 10px 20px;
}

.check-txt input {
          display: none;
          /*チェックボックスを隠す*/
}

/*開いたときに表示される部分*/
.check-txt div#links01 {
          margin: 0;
          padding: 0;
          list-style: none;
          margin-bottom: 1px;
}

/*バー部分*/
input#check-item {
          display: none;
}

#check-item input {
          display: none;
          /*チェックボックスを隠す*/
}

.check-txt-inner {
          display: none;
          /*注意書きを隠す*/
}

.check-txt-inner div {
          font-weight: bold;
          font-size: 15px;
          padding: 20px 0 5px 0;
}

.check-txt-inner ul {
          padding-left: 5px;
}

.check-txt-inner li {
          font-size: 15px;
          line-height: 1.6;
}

.check-txt-btn {
          text-align: center;
          padding: 10px 0;
          margin: 40px 0;
}

.check-txt label {
          font-weight: bold;
          cursor: pointer;
          display: block;
          text-align: center;
          text-decoration: none;
          color: #fff;
          line-height: 1;
          position: relative;
          margin: 0 0 10px;
          padding: 15px 10px;
          background: #ff8a00;
          border-radius: 10px;
}

#check-item:checked~.check-txt-inner {
          display: block;
}

/*閉じた状態の矢印*/
.check-txt label:after {
          content: "";
          display: block;
          width: 8px;
          height: 8px;
          border-top: #fff 3px solid;
          border-right: #fff 3px solid;
          -webkit-transform: rotate(135deg);
          -ms-transform: rotate(135deg);
          transform: rotate(135deg);
          position: absolute;
          right: 2%;
          top: 0;
          bottom: 15%;
          margin: auto;
}

/*開いた状態の矢印*/
.check-txt input[type=checkbox]:checked+label:after {
          content: "";
          display: block;
          width: 8px;
          height: 8px;
          border-top: #fff 3px solid;
          border-right: #fff 3px solid;
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
          position: absolute;
          right: 3%;
          top: 7%;
          bottom: 0;
          margin: auto;
}

/*###############################*/

/* 共通クラス*/
.bold {font-weight: bold;}
.fs13 {font-size: 13px;}
.fs14 {font-size: 14px;}
.fs18 {font-size: 18px;}
.fs20 {font-size: 20px;}
.fs24 {font-size: 24px;}
.fs26 {font-size: 26px;}
.fs30 {font-size: 30px;}
.font-red {color: #f43716;}
.font-pink {color: #ff61c0;}
.font-green {color: #39ba32;}
.font-blue {color: #2066ee;}
.font-aqua {color: #00b4ff;}
.font-orange {color: #fb9700;}
.font-violet {color: #5f3af2;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb40 {margin-bottom: 40px;}
.mb60 {margin-bottom: 60px;}
.mb80 {margin-bottom: 80px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt40 {margin-top: 40px;}
.mt60 {margin-top: 60px;}
.mt80 {margin-top: 80px;}
.ml20 {margin-left: 20px;}
.ml40 {margin-left: 40px;}
.ml60 {margin-left: 60px;}
.ml80 {margin-left: 80px;}
.mr20 {margin-right: 20px;}
.mr40 {margin-right: 40px;}
.mr60 {margin-right: 60px;}
.mr80 {margin-right: 80px;}
.pb20 {padding-bottom: 20px;}
.pb40 {padding-bottom: 40px;}
.pb60 {padding-bottom: 60px;}
.pb80 {padding-bottom: 80px;}
.pt20 {padding-top: 20px;}
.pt40 {padding-top: 40px;}
.pt60 {padding-top: 60px;}
.pt80 {padding-top: 80px;}
.pl20 {padding-left: 20px;}
.pl40 {padding-left: 40px;}
.pl60 {padding-left: 60px;}
.pl80 {padding-left: 80px;}
.pr20 {padding-right: 20px;}
.pr40 {padding-right: 40px;}
.pr60 {padding-right: 60px;}
.pr80 {padding-right: 80px;}