@charset "UTF-8";
@import "./reset.css";
@keyframes fadein {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@-webkit-keyframes fadein {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@-moz-keyframes fadein {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes cmptext {
	0%{transform: scale(0,0);opacity: 0;}
	50%{transform: scale(1.2,1.2);opacity: 1;}
	100%{transform: scale(1,1);opacity: 1;}
}
@-webkit-keyframes cmptext {
	0%{-webkit-transform: scale(0,0);opacity: 0;}
	50%{-webkit-transform: scale(1.2,1.2);opacity: 1;}
	100%{-webkit-transform: scale(1,1);opacity: 1;}
}
@-moz-keyframes cmptext {
	0%{-moz-transform: scale(0,0);opacity: 0;}
	50%{-moz-transform: scale(1.2,1.2);opacity: 1;}
	100%{-moz-transform: scale(1,1);opacity: 1;}
}
@keyframes chara {
	0%{transform: translateY(300px);opacity: 0;}
	100%{transform: translateY(0);opacity: 1;}
}
@-webkit-keyframes chara {
	0%{-webkit-transform: translateY(300px);opacity: 0;}
	100%{-webkit-transform: translateY(0);opacity: 1;}
}
@-moz-keyframes chara {
	0%{-moz-transform: translateY(300px);opacity: 0;}
	100%{-moz-transform: translateY(0);opacity: 1;}
}
li{ list-style: none; }
*{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a{
	color: #ffffff;
	text-decoration: none;
}
i{ font-style: normal; }
img{ vertical-align: middle; }
.clearfix::after{
	content: "";
	clear: both;
	display: block;
}
body{
	width: 100%;
	margin: 0 auto;
	font-family: "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", Meiryo, "Osaka", sans-serif;
	color: #333333;
	font-size: 100%;
}
#wrapper{
	font-size: 1.0rem;
	line-height: 1.4rem;
	position: relative;
}
/*==============================
	共通
==============================*/
/* 画像関連 */
#headerImage img,
.headerCmpTitle img,
.headerCmpFrame p img,
#contents img,
.campaignTitle img,
.campaignRibbin img,
.campaignBadge img,
.campaignImage img,
.campaignSelect img,
.logo img{
	width: 100%;
}
/* キャンペーン背景色 */
#headerCmp, .campaign{
	background: #000000;
	font-weight: bold;
	font-size: 3.4rem;
	letter-spacing: 1.0rem;
	text-align: center;
	padding: 40px 0 10px 0;
	text-align: center;
	color: #ffffff;
	display: block;
}
#headerCmp span{
	font-weight: normal;
	font-family: fantasy;
	letter-spacing: 1.0rem;
	text-align: center;
	color: #ffffff;
	display: block;
	font-size: 1.0rem;
	margin-bottom: 5px;
	padding: 30px 0 10px 0;
}
#headerCmp, .campaign, footer{
	background: #000000;
	font-weight: normal;
	font-size: 2.4rem;
	text-align: center;
	padding: 20px 0 0 0;
	text-align: center;
	color: #ffffff;
	display: block;
}
/*==============================
	transition
==============================*/
a.button,
.campaignSelect li,
.open .status{
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
}
/*==============================
	ヘッダー
==============================*/
header{
	background: #ffffff;
}
/*#headerCmp{
	padding: 10px 4%
}*/
.headerCmpFrame{
	display: table;
	width: 100%;
	margin-top: 10px;
}
.headerCmpFrame p{
	display: table-cell;
	vertical-align: top;
	background: #fff;
	text-align: center;
	width: 50%;
	padding: 10px 0;
}
.headerCmpFrame p:first-child{
	border-right: 4px solid #ffe04b;
}
.headerCmpFrame p:last-child{
	border-left: 4px solid #ffe04b;
}
.header-pc{
	display: none;
}
.header-sp-top, .header-sp-cmp{
	position: relative;
}
.header-sp-top{
	background: url("./../img/header-sp.gif") no-repeat center center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
}
img.cmptitle-sp, img.cmptext-sp,img.chara-sp, img.balloon-sp, img.cp-sp{
	position: absolute;
	opacity: 0;
}
img.item-sp, img.ichigo-sp{
	opacity: 0;
}
img.cmptext-sp{
	top: 0;
	left: 0;
	transform: translate3d(100%, -5%, 0);
	-webkit-transform: translate3d(100%, -5%, 0);
	-moz-transform: translate3d(100%, -5%, 0);
	animation: cmptextsp .5s ease forwards;
	-webkit-animation: cmptextsp .5s ease forwards;
	-moz-animation: cmptextsp .5s ease forwards;
}
@keyframes cmptextsp {
	0%{transform: translate3d(100%,-5%,0);opacity: 0;}
	100%{transform: translate3d(0,0,0);opacity: 1;}
}
@-webkit-keyframes cmptextsp {
	0%{-webkit-transform: translate3d(100%,-5%,0);opacity: 0;}
	100%{-webkit-transform: translate3d(0,0,0);opacity: 1;}
}
@-moz-keyframes cmptextsp {
	0%{-moz-transform: translate3d(100%,-5%,0);opacity: 0;}
	100%{-moz-transform: translate3d(0,0,0);opacity: 1;}
}
img.cmptitle-sp{
	bottom: 0;
	left: 0;
	transform: scale(.5,.5);
	animation: cmptitlesp .5s ease .5s forwards;
	-webkit-animation: cmptitlesp .5s ease .5s forwards;
	-moz-animation: cmptitlesp .5s ease .5s forwards;
}
@keyframes cmptitlesp {
	0%{transform: scale(.5,.5);opacity: 0;}
	50%{transform: scale(1.2,1.2);opacity: 1;}
	100%{transform: scale(1,1);opacity: 1;}
}
@-webkit-keyframes cmptitlesp {
	0%{-webkit-transform: scale(.5,.5);opacity: 0;}
	50%{-webkit-transform: scale(1.2,1.2);opacity: 1;}
	100%{-webkit-transform: scale(1,1);opacity: 1;}
}
@-moz-keyframes cmptitlesp {
	0%{-moz-transform: scale(.5,.5);opacity: 0;}
	50%{-moz-transform: scale(1.2,1.2);opacity: 1;}
	100%{-moz-transform: scale(1,1);opacity: 1;}
}
img.item-sp{
	display: inline-block;
	padding: 20% 25% 30% 25%;
	transform: scale(.5,.5);
	animation: cmptitlesp 1s ease .5s forwards;
	-webkit-animation: cmptitlesp 1s ease .5s forwards;
	-moz-animation: cmptitlesp 1s ease .5s forwards;
	animation-delay: 2s;
}
@keyframes fadeinsp {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@-webkit-keyframes fadeinsp {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@-mozkeyframes fadeinsp {
	0%{opacity: 0;}
	100%{opacity: 1;}
}
.header-sp-cmp{
	background: url("./../img/header-bg2.gif") no-repeat center center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	overflow: hidden;
	margin-bottom: 10px;
}
img.chara-sp{
	top: -2%;
	left: 0;
	animation: charasp .5s ease 1.5s forwards;
	-webkit-animation: charasp .5s ease 1.5s forwards;
	-moz-animation: charasp .5s ease 1.5s forwards;
}
@keyframes charasp {
	0%{transform: translateY(50%);opacity: 0;}
	100%{transform: translateY(0);opacity: 1;}
}
@-webkit-keyframes charasp {
	0%{-webkit-transform: translateY(50%);opacity: 0;}
	100%{-webkit-transform: translateY(0);opacity: 1;}
}
@-moz-keyframes charasp {
	0%{-moz-transform: translateY(50%);opacity: 0;}
	100%{-moz-transform: translateY(0);opacity: 1;}
}
img.balloon-sp{
	top: -4%;
	left: 3%;
	width: 40% !important;
	animation: cmptitlesp .5s ease 2s forwards;
	-webkit-animation: cmptitlesp .5s ease 2s forwards;
	-moz-animation: cmptitlesp .5s ease 2s forwards;
}
img.ichigo-sp{
	animation: ichigo .5s 2.5s forwards;
	-webkit-animation: ichigo .5s 2.5s forwards;
	-moz-animation: ichigo .5s 2.5s forwards;
}
@keyframes ichigo {
	0%{transform: translateX(-3px);opacity: 0;}
	25%{transform: translateX(3px);opacity: 1;}
	50%{transform: translateX(-3px);opacity: 1;}
	75%{transform: translateX(3px);opacity: 1;}
	100%{transform: translateX(0);opacity: 1;}
}
@-webkit-keyframes ichigo {
	0%{-webkit-transform: translateX(-3px);opacity: 0;}
	25%{-webkit-transform: translateX(3px);opacity: 1;}
	50%{-webkit-transform: translateX(-3px);opacity: 1;}
	75%{-webkit-transform: translateX(3px);opacity: 1;}
	100%{-webkit-transform: translateX(0);opacity: 1;}
}
@-moz-keyframes ichigo {
	0%{-moz-transform: translateX(-3px);opacity: 0;}
	25%{-moz-transform: translateX(3px);opacity: 1;}
	50%{-moz-transform: translateX(-3px);opacity: 1;}
	75%{-moz-transform: translateX(3px);opacity: 1;}
	100%{-moz-transform: translateX(0);opacity: 1;}
}
img.cp-sp{
	bottom: 1%;
	left: 4%;
	width: 92% !important;
	opacity: 1 !important;
}
/*==============================
	コンテンツ
==============================*/
#contents{
	padding: 20px 0;
}
#contents section{
	margin-bottom: 10px;
	border: 5px solid #99e3ff;
	padding: 10px;
	text-align: center;
}
#contents section>p{
	margin-bottom: 10px;
}
.status, .manga{
	display: none;
}
.manga{
	margin-top: 20px;
}
.status{
	text-align: center;
	background: #ff0;
	font-weight: bold;
	font-size: 1.5rem;
	padding: 10px 0;
	line-height: 1;
}
.status p{
	font-size: 1.0rem;
	margin-top: 5px;
	color: #ff3274;
}
.status.on{
	display: block;
}
.open .status{
	background: #ff89c5;
	color: #fff;
	border-bottom: 3px solid #fd65b2;
	border-radius: 5px;
	cursor: pointer;
}
.open .status p{
	color: #f8e700;
}


.comming{
	text-align: center;
	background: #ff0;
	font-weight: bold;
	font-size: 1.5rem;
	padding: 10px 0;
	line-height: 1;
}
.comming p{
	font-size: 1.0rem;
	margin-top: 5px;
	color: #ff3274;
}
.comming.on{
	display: block;
}
.open .comming{
	background: #f8e700;
	color: #fff;
	border-bottom: 3px solid #fcdb06;
	border-radius: 5px;
	cursor: pointer;
}
.open .comming p{
	color: #ff0064;
}



span.dt{
	font-size: .8rem;
}
/*==============================
	キャンペーン
==============================*/
.campaign{
	padding: 10px 4%;
}
.campaign section{
	background: #fff;
	border: 8px solid #fff;
	box-shadow: 0px 0px 1px #ff5a3f inset;
	padding: 10px;
	margin-bottom: 32px;
}
.campaign section.campaignWeb{
	box-shadow: 0px 0px 1px #ff3274 inset;
}
.campaignRibbin{
	width: 78%;
	margin: -46px auto 0 auto;
}
.campaignBadge{
	display: table;
	width: 100%;
	margin-bottom: 10px;
}
.campaignBadge p{
	display: table-cell;
	vertical-align: middle;
}
.campaignBadge p:first-child{
	width: 20%;
}
.campaignBadge p:last-child{
	width: 80%;
	padding-left: 2%;
}
.campaignBadge-pc{display: none;}
.campaignImage{
	margin-bottom: 10px;
}
.campaignStore>p{
	font-size: .6rem;
	line-height: 1.0rem;
	margin-bottom: 5px;
}
.campaignStore>p.red{
	color: #f00;
}
.campaignTerms{
	border: 2px solid #fff101;
	margin-bottom: 10px;
}
.campaignTerms li{
	display: table;
	width: 100%;
	font-size: .8rem;
	line-height: 1.2rem;
}
.campaignTerms li p{
	display: table-cell;
	vertical-align: middle;
	padding: 4px;
}
.campaignTerms li p:first-child{
	background: #fff101;
	text-align: center;
	width: 22%;
	font-size: .6rem;
}
.campaignTerms li:last-child{
	border-top: 1px solid #fff101;
}
.campaignTerms li:last-child p:last-child{ font-weight: bold; }
.campaignSelect li{
	border-radius: 5px;
	border: 1px solid #ff4466;
	padding: 6px 2% 6px 14%;
	margin-bottom: 10px;
	position: relative;
}
.campaignSelect li:first-child{
	padding: 12px 2% 12px 14%;
}
.campaignSelect li.on{
	background: #fbf9d9;
	/*border-color: #fff101;*/
}
.campaignSelect li::before,
.campaignSelect li::after{
	content: "";
	width: 24px;
	height: 24px;
	display: block;
	position: absolute;
	top: 50%;
	left: 2%;
	border-radius: 3px;
	margin-top: -12px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.campaignSelect li::before{
	background: url("./../img/check.png") no-repeat center center, #ff4466;
	background-size: 80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size: 80% auto;
}
.campaignSelect li::after{
	border: 2px solid #ff4466;
	background: #fff;
}
.campaignSelect li.on::after{
	opacity: 0;
}
.social{
	margin-bottom: 10px;
}
.social ul{
	display: table;
	width: 100%;
}
.social li{
	display: table-cell;
	vertical-align: top;
	width: 50%;
	padding: 6px;
	font-size: .8rem;
	line-height: 1.2rem;
}
.social li:first-child{
	background: #d9e7fa;
	border-right: 4px solid #fff;
}
.social li:last-child{
	background: #d1edfa;
	border-left: 4px solid #fff;
}
.social li span{
	display: inline-block;
	background: #fff;
	margin-bottom: 6px;
	padding: 4px;
	font-weight: bold;
	text-align: center;
}
a.button.fb{
	background: #3765a3;
	border-color: #123a71;
	padding: 6px 0 6px 10px;
}
a.button.fb p{
	cursor: pointer;
}
a.button.fb::after{
	left: 10px;
	right: auto;
	background: url("./../img/fb.gif") no-repeat center center;
	background-size: 100% auto;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
}
a.button.tr{
	background: #2ca7e0;
	border-color: #1179a9;
}
a.button.trf::after{
	background: url("./../img/tr.gif") no-repeat center center;
	background-size: 100% auto;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
}
a.button.trr{
	margin-bottom: 10px;
}
a.button.trr::after{
	background: url("./../img/retr.gif") no-repeat center center;
	background-size: 100% auto;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
}
#web{
	height: 1px;
	margin-bottom: 20px;
}
.attention-sns{
	text-align: center;
	margin-bottom: 10px;
}
.attention-sns span{
	font-size: 1.0rem;
	font-weight: bold;
	color: #f00;
}
span.red{
	color: #f00;
	font-weight: bold;
}
/*==============================
	フッター
==============================*/
footer{
	font-size: .8rem;
	line-height: 1;
	text-align: center;
	padding-bottom: 20px;
}
.logo{
	padding: 10px 34%;
}
.companyName{
	margin-bottom: 20px;
}
.only{
	display: none !important;
}
/*==============================
	イベント
==============================*/
a.button.on{
	border-color: rgba(0, 0, 0, 0);
	transform: translateY(3px);
	-webkit-transform: translateY(3px);
	-moz-transform: translateY(3px);
}
/*==============================
	アニメーション
==============================*/
.button-anime{
	animation: buttonAnime .5s ease infinite alternate;
	-webkit-animation: buttonAnime .5s ease infinite alternate;
	-moz-animation: buttonAnime .5s ease infinite alternate;
}
@keyframes buttonAnime {
	0%{transform: translateY(-3px);}
	100%{transform: translateY(3px);}
}
@-webkit-keyframes buttonAnime {
	0%{transform: translateY(-3px);}
	100%{transform: translateY(3px);}
}
@-moz-keyframes buttonAnime {
	0%{transform: translateY(-3px);}
	100%{transform: translateY(3px);}
}
/*==============================
	応募フォーム
==============================*/
body.subsn{
	background: #fff101;
	border-top: 10px solid #fff;
}
.subsn-frame{
	text-align: center;
	padding: 20px;
	max-width: 500px;
	margin: 0 auto;
}
.subsn-frame h2{
	color: #e54025;
	font-size: 1.2rem;
	margin-bottom: 20px;
}
#into, #comp{
	background: #fff;
	padding: 10px;
}
#comp{
	display: none;
}
.subsn-frame p{
	margin-bottom: 20px;
}
#into li:nth-child(2){
	margin-bottom: 30px;
}
#into li{
	margin-bottom: 10px;
}
#into input{
	font-size: 1.0rem;
	width: 100%;
	padding: 10px;
}
#into input:focus{outline: 0;}
#into input[type="email"]{
	border: 2px solid #fff101;
}
#into input[type="submit"], #comp .button{
	border-top: 0;
	border-left: 0;
	border-right: 0;
	width: 60%;
	margin: 0 auto;
}
span.err{
	display: block;
	color: #f00 !important;
	margin-bottom: 10px;
}
.buttonFrame{
	text-align: center;
}
/*==============================
	@media 769px以上
==============================*/
@media screen and (min-width: 769px){
	.header-pc{
		display: block;
		text-align: center;
	}
	#headerImage img{
		width: auto;
	}
	.header-sp{
		display: none;
	}
	.header-top{
		background: #fff;
	}
	.header-top img{
		opacity: 0;
		opacity: 1\9;
		animation: fadein .5s ease 0s forwards;
		-webkit-animation: fadein .5s ease 0s forwards;
		-moz-animation: fadein .5s ease 0s forwards;
	}
	.header-cmp{
		background: url("./../img/header-pc.gif") no-repeat center center;
		min-height: 600px;
		position: relative;
		width: auto;
		margin: 0 auto;
	}
	.item{
		opacity: 0;
		opacity: 1\9;
		width: 100% !important;
		animation: fadein .5s ease 1.5s forwards;
		-webkit-animation: fadein .5s ease 1.5s forwards;
		-moz-animation: fadein .5s ease 1.5s forwards;
	}
	.header-cmp ul{
		display: table;
		position: absolute;
		width: 90%;
		top: 34px;
		left: 5%;
	}
	.header-cmp li{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	.cmptext{
		display: inline-block;
		margin-top: 40px;
		transform: scale(.5,.5);
		transform: scale(1,1)\9;
		opacity: 0;
		opacity: 1\9;
		animation: cmptext 1s ease .5s forwards;
		-webkit-animation: cmptext 1s ease .5s forwards;
		-moz-animation: cmptext 1s ease .5s forwards;
		animation-delay: 2s;
	}
	.header-chara{
		background: url("./../img/header-bg2-pc.gif") no-repeat center center;
		min-height: 377px;
		position: relative;
		width: 1000px;
		margin: 0 auto 20px auto;
		overflow: hidden;
	}
	.header-chara img{
		position: absolute;
		opacity: 0;
		opacity: 1\9;
	}
	img.ichigo{
		top: 0;
		left: 0;
		animation: ichigo .5s ease 4.5s forwards;
		-webkit-animation: ichigo .5s ease 4.5s forwards;
		-moz-animation: ichigo .5s ease 4.5s forwards;
	}
	img.chara{
		top: -12px;
		right: 0;
		animation: chara 1s ease 1.5s forwards;
		-webkit-animation: chara 1s ease 1.5s forwards;
		-moz-animation: chara 1s ease 1.5s forwards;
	}
	img.ballon{
		top: -30px;
		right: 0;
		animation: cmptext 1s ease 2.5s forwards;
		-webkit-animation: cmptext 1s ease 2.5s forwards;
		-moz-animation: cmptext 1s ease 2.5s forwards;
	}
	img.charatext{
		top: 80px;
		left: 30px;
		animation: fadein .5s ease 3.5s forwards;
		-webkit-animation: fadein .5s ease 3.5s forwards;
		-moz-animation: fadein .5s ease 3.5s forwards;
	}
	img.cp{
		right: 10px;
		bottom: 10px;
		opacity: 1 !important;
	}
	.attention{
		font-size: 1.4rem;
	}
	.attention span{
		display: inline;
		font-size: 1.4rem;
	}
	.headerCmpTitle{
		display: none;
	}
	.headerCmpFrame{
		max-width: 1000px;
		margin: 0 auto
	}
	.headerCmpFrame p{
		padding: 20px 90px;
	}
	#contents{
		max-width: 800px;
		margin: 0 auto;
	}
	.campaign{
		background: url("./../img/cmp-pc.jpg") no-repeat top center, #fff101;
		padding-top: 275px;
	}
	.campaignTitle img{
		display: none;
	}
	.campaign-frame{
		background: #fff;
		max-width: 1000px;
		margin: 0 auto;
		padding: 10px;
	}
	.campaignStore{
		float: left;
		width: 485px;
		min-height: 577px;
	}
	.m-right{
		margin-right: 10px;
	}
	.campaignStore{
		border: 2px solid #ff6344;
		padding: 10px;
	}
	a.button{
		width: 60%;
		margin: 0 auto;
		font-size: 24px;
		padding: 20px 0;
	}
	.ribbon2 img{
		margin-top: -10px;
	}
	.campaignWeb .campaignRibbin{
		width: 40%;
	}
	.campaignWeb{
		border: 2px solid #ff4466;
		margin-top: 50px;
		padding: 20px;
	}
	.campaignWeb .campaignBadge{
		display: none;
	}
	.campaignBadge-pc{
		display: block;
		text-align: center;
	}
	.campaignSelect{
		margin-top: 20px;
	}
	.campaignSelect li{
		float: left;
		width: 462px;
		min-height: 94px;
		padding: 0px 3% 0 6%;
	}
	.campaignSelect li:first-child{
		margin-right: 10px;
		padding: 10px 3% 0 6%;
	}
	.campaignSelect li::before, .campaignSelect li::after{
		left: 4%;
	}
	a.button.fb {
		background: #3765a3;
		border-color: #123a71;
		padding: 14px 0 14px 10px;
		width: 50% !important;
	}
	a.button.tr{
		width: 50% !important;
	}
	a.button.small {
		font-size: 1.2rem;
		width: 70%;
		margin: 10px auto 0 auto;
		padding: 14px 14px 14px 0;
	}
	.social {
		margin: 20px 0 30px 0;
	}
	.social li span {
		display: block;
	}
	.social li{
		padding: 10px;
	}
	.logo{
		width: 200px;
		margin: 0 auto;
		padding: 0;
	}
	footer{
		padding: 50px 0;
	}
	.subsn-frame{
		padding: 100px 0;
	}
	#into, #comp{
		padding: 50px;
	}
	#comp .button{
		padding: 10px 0;
		font-size: 1.0rem;
	}
	a.button:hover, .open .status:hover{
		border-color: rgba(0, 0, 0, 0);
		transform: translateY(3px);
		-webkit-transform: translateY(3px);
		-moz-transform: translateY(3px);
	}
	#web{
		margin-bottom: 0px;
	}
	.inline-button{
		margin: 27px 0;
	}
	.campaignStore>p{
		margin-bottom: 20px;
	}
	.attention-sns{
		margin-bottom: 0px;
		margin-top: 10px;
	}
	.attention-sns span{
		font-size: 1.2rem;
	}
	.only{
		display: block;
	}
}