@charset "UTF-8";

article * {
  box-sizing: border-box;
}
article img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}
.link-txt {text-decoration: underline;}
.special .secTitle.center {
    text-align: center;
    display: block;
}
.special .secTitle.center .read{
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.special .secTitle.center .titleTxt{
    display: block;
    margin-bottom: 0.5rem;
}
/**
 * ***************************************
 * トップバナー
 * ***************************************
 */
.topbanner {
	margin-bottom: 2rem;
    text-align: center;
}
.topbanner h1{
	margin-bottom: 1rem;
}
.topbanner p{
	font-size: 1.5rem;
	text-align: center;
	max-width: 96%;
	margin: 0 auto 0.5rem;
}
.topbanner p.txtMain{
    display: inline-block;
	font-size: 1.5rem;
	font-weight: bold;
    line-height: 1.2;
    color: #ffa904;
    background-size: 4rem;
}
.end-txt {
	text-align: center!important;
	color: red;
	
	padding-bottom: 3rem;
}
.link-banner {
	width: 96%;
    text-align: center;
	margin: 0 auto 4rem;
}
.link-banner img{
	max-width: 100%;
	text-align: center;
}
.link-banner a { display: block; margin-bottom: 2rem; }
.link-banner a:last-child { margin-bottom: 0; }

.headline {
    background-color: #ffa904;
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: bold;
    padding: 0.5rem;
    margin-bottom: 2rem;
}
/**
* ***************************************
* インフォメーションコンテナー
* ***************************************
*/
.info-container {
	padding-bottom: 3rem;
	margin-bottom: 3rem;
}
.info-container p{
	text-align: center;
	margin-bottom: 1rem;
}
.mp-sns {
	width: auto;
    margin: 0 auto 2rem auto;
    padding: 0 10px;
}
.twitter {
	width: auto;
	text-align: center;
}
.twitter div {
    margin-left: auto;
    margin-right: auto;
}
.facebook {
	width: auto;
	text-align: center;
    margin: 1rem 0 0 0;
}
@media (min-width: 768px) {
	.mp-sns {
		width: 920px;
		
		display: grid;
		grid-template-columns: 450px 450px;
		column-gap: 20px;
	}
	.twitter {
		text-align: center;
	}
	.facebook {
		margin-top: 0px;
	}
}
.mp-account-icon {
	display: flex;
	justify-content: center;
}
.mp-account-icon li {
	margin: 0 10px;
}
.mp-account-icon li img {
	width: 40px;
	height: auto;
}
/**
* ***************************************
* キャンバナーエリア
* ***************************************
*/
.campaignArea {
    width: 96%;
    max-width: 990px;
    margin: 0 auto 4rem;
}
.bannerBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 2rem;
    grid-column-gap: 1rem;
}
@media (max-width: 568px){
    .bannerBlock {grid-template-columns: 1fr;}
}
/*.bannerBlock li {
    padding-bottom: 1rem;
    border-bottom: 1px solid #777;
}*/
.camTxt {
    margin-top: 0.5rem;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: bold;
}
.camTxt.premium {
    text-align: center;
    margin-bottom: 0.5rem;
}
.camPeriod {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
    color: #EF3232;
}
.camLink {
    margin-top: 0.5rem;
    text-align: right;
}
.camLink a {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    padding: 0.5rem 1.2rem 0.5rem 1rem;
    border-radius: 1rem;
    text-decoration: underline;
}
.camLink a:hover {
    opacity: 0.6;
}
.camLink a:after {
    display: block;
    position: absolute;
    top: 39%;
    right: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    clear: both;
    transform: rotate(135deg);
    border-width: 2px 0 0 2px;
    border-style: solid;
    border-color: #000 transparent transparent #000;
    content: "";
}

/******************************************************************/
.btnBlock { text-align: center; margin-bottom: 4rem; }
.btnBlock a { display: inline-block; position: relative; margin: 0 0.5rem 1rem; width: 20rem; padding: 1rem; font-size: 1.2rem; font-weight: bold; color: #fff;
    border: 1px solid #c7c7c7; border-radius: 4rem; background: #ffa904;}
.btnBlock a:hover { opacity: .8;}
.btnBlock a:before { content: ''; position: absolute; top:calc(50% - 7px); right: 7px; width: 0; height: 0;
    border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #fff; }
