@charset "utf-8";
/* CSS Document */

*,::after,::before{box-sizing:border-box}html{line-sizing:normal}body{margin:0}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.17rem}h4{font-size:1rem}h5{font-size:.83rem}h6{font-size:.67rem}h1{margin:.67em 0}pre{white-space:pre-wrap}hr{border-style:solid;border-width:1px 0 0;color:inherit;height:0;overflow:visible}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle;max-width:100%}canvas,img,svg,video{height:auto}audio{width:100%}img{border-style:none}svg{overflow:hidden}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}

.pconly {display: none;}
@media only screen and (min-width: 960px) {
.sponly {display: none;}
.pconly {display: block;}
}

body{
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    width: 100%;
    height: auto;
    background-color: #cfcfcf;
    position: relative;
    letter-spacing: 0.2em;
    color: #222;
}

img{max-width: 100%;}
p,li{font-size: 1em; line-height: 1.6em; letter-spacing: 1px;}
a{outline: none; text-decoration: none;}
ul,ol{padding-left: 20px;}
li:nth-of-type(n+2) {margin-top: 10px;}

main:hover, footer:hover{
	-webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all  0.8s ease;
	}

.mPlus {
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 900;
    letter-spacing: 0;
}


/*----------header------------*/
header {
    width: 100%;
    background-color: #000;
    padding-bottom: 30px;
}

header .kv {
	width: 100%;
    max-width: 1920px;
	margin: 0px auto;
    text-align: center;
}

header h1 {
	display: block;
	width: 90%;
	height:0;
	margin: 30px auto 0;
	padding: calc(90% * calc(573 / 1920)) 0 0;
    text-align: center;
	background-image:url("../images/apps/stgcampaign_h1.png");
	background-size:100%;
	background-repeat: no-repeat;
	overflow:hidden;
}

@media only screen and (min-width: 960px) {

header {
    padding-bottom: 10px;
}

header h1 {
	display: block;
	width: 60%;
	height:0;
	margin: 50px auto 40px;
	padding: calc(60% * calc(573 / 1920)) 0 0;
    text-align: center;
	background-image:url("../images/apps/stgcampaign_h1.png");
	background-size:100%;
	background-repeat: no-repeat;
	overflow:hidden;
}

}

/*----------main------------*/
main {
    width: 100%;
    align-self: center;
}

main > div {
    width: 90%;
    margin: 50px auto 0;
}

main h2 {
	display: block;
	width: 100%;
	margin: 50px auto;
    padding-bottom: 10px;
    text-align: center;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 900;
    letter-spacing: 0em;
    font-feature-settings: "palt";
    font-size: clamp(1.5rem, 6vw, 5rem);
    line-height: 1.3em;
    border-bottom: 10px solid #ff0034;
}
main h2 span {font-size: 0.9em;}

main h3 {
	display: block;
	width: auto;
	margin: 0px auto;
    padding: 5px 10px 5px 15px;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 900;
    letter-spacing: 0em;
    position: relative;
}
main h3:nth-of-type(n+2) {
	margin: 50px auto 0;
}
main h3::before {
	content: "";
	width: 6px;
	height: 100%;
	background-color: #e60000;
	position: absolute;
	top: 1px;
	left: 0;
}

/*.darius h3 {border-bottom: 10px solid #448aca;}
.toaplan h3 {border-bottom: 10px solid #eb6877;}
.beep h3 {border-bottom: 10px solid #32b16c;}
.m2stg h3 {border-bottom: 10px solid #ae5da1;}*/

main small {
	display: block;
	width: 100%;
	margin: 10px auto 0;
    letter-spacing: 0em;
    font-size: 0.8em;
}

@media only screen and (min-width: 960px) {

main > div.regulation {
    width: 90%;
    max-width: 1368px;
    margin: 50px auto 0;
}

main h2 {
    padding-bottom: 20px;
    font-size: clamp(1.5rem, 3vw, 3rem);
}
main h2 span {
    font-size: inherit;
}

main small {
    font-size: 0.9em;
}

}

.gift {
    width: 100%;
    max-width: 1440px;
    color: #FFF;
}

main .gift h3 {
    display: inline-block;
    width: calc(100% - 20px);
    font-size: 2.6em;
	margin: 30px auto 0;
    padding: 0px 0px 10px;
    border-bottom: 5px solid #FFF;
}
.gift h3::before {content: none;}

.gift > div {
    width: 100%;
    padding: 0 10px 30px;
    /*border-radius: 10px;*/
    text-align: center;
    font-weight: bold;
}
.darius {background-color: #448aca;}
.toaplan {background-color: #eb6877;}
.beep {background-color: #32b16c;}
.m2stg {background-color: #ae5da1;}

.gift .flexBox {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.gift .flexBox.boxset2 div {
    flex: 0 0 calc(50% - 20px);
    margin-top: 30px;
    font-size: 0.8em;
}

.gift .flexBox.boxset2 div > div:first-of-type {
    background-color: #FFF;
}

@media only screen and (min-width: 960px) {

.gift > div {
    width: 95%;
    margin: auto;
    padding: 0 15px 30px;
    border-radius: 30px;
    text-align: center;
}
.gift > div:nth-of-type(n+2) {
	margin: 50px auto 0;
}

.gift .flexBox {width: 50%; margin: auto;}
.gift .darius .flexBox {width: 100%;}

.gift .flexBox.boxset2 div {
    font-size: 1em;
}

.gift .darius .flexBox.boxset2 div {
    flex: 0 0 calc(25% - 20px);
}

}


.targetTitle h4 {
	display: block;
	width: auto;
	margin: 30px auto 0;
    padding: 0px;
    background-color: transparent;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 0em;
}
.targetTitle h4:nth-of-type(n+2) {
	margin: 50px auto 0;
}
.targetTitle h4.darius {color: #448aca;}
.targetTitle h4.toaplan {color: #eb6877;}
.targetTitle h4.beep {color: #32b16c;}
/*.targetTitle h4.m2stg {color: #ae5da1;}*/

.targetTitle li {font-size: 0.9em;}

.termsofuse h4 {
	display: block;
	width: auto;
	margin: 30px auto 0;
    padding: 0px;
    background-color: transparent;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0em;
}
.termsofuse h4:nth-of-type(n+2) {
	margin: 50px auto 0;
}
.termsofuse li {font-size: 0.9em;}
.termsofuse li ul {
    margin-top: 10px;
    padding-left: 1em;;
}

@media only screen and (min-width: 960px) {

}

/*SNS ボタン*/
.shareBox {
  width: 230px;
  margin: 50px auto 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: flex-start;
}
.shareButtons {flex: 0 0 auto;}
.shareButtons a {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0;
  padding: 0;
  background-size: 50px;
}

.tweetBtnWt {background: url(../images/stayhome/svg_logo_tw_wt.svg) no-repeat;}
.fbBtnWt {background: url(../images/stayhome/svg_logo_fb_wt.svg) no-repeat;}
.instBtnWt {background: url("../images/stayhome/svg_logo_inst_wt.svg") no-repeat; }
.lineBtn {background: url(../images/stayhome/svg_logo_line_fc.svg) no-repeat;}
.tweetBtn {background: url(../images/stayhome/svg_logo_tw_wob.svg) no-repeat;}
.fbBtn {background: url(../images/stayhome/svg_logo_fb_color.svg) no-repeat;}
/*.tweetBtn {background: url(../images/sns_ico_02_tw.svg) no-repeat;}
.fbBtn {background: url(../images/sns_ico_01_fb.svg) no-repeat;}
.lineBtn {background: url(../images/sns_ico_03_line.svg) no-repeat;}*/


/*----------footer------------*/
footer {
	width: 100%;
    height: auto;
	display: block;
    margin: 100px auto 0;
	padding: 50px 0 0;
    background-color: #7e7e7e;
    background-color: #fff;
	color: #222;
}

footer > div{
	margin: auto;
	padding: 0 15px 15px;
}

.corporatelogo>p {
	display: block;
	width: 100%;
	margin: 100px auto 0;
    padding-bottom: 10px;
    text-align: center;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 900;
    font-size: 1.4em;
    letter-spacing: 0em;
}
.corporatelogo .flexBox {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 20px auto 0;
}
.corporatelogo .flexBox div {flex: 0 0 22%;}

/*タイトーリンク*/
ul.taitoLink{
    margin: 50px 0 0;
    padding: 0 30px;
    text-align: center;
}

ul.taitoLink li {
    font-size: 0.7em;
    display: inline-block;
}
ul.taitoLink li+li {margin-left: 1.0em;}

ul.taitoLink a{color: #222; text-decoration: none;}
ul.taitoLink a:hover{color: #7ecef4;}

footer .copy {
	padding-top: 15px;
    margin: 0;
	font-size: 0.6em;
	/*color: #FFF;*/
	text-align: left;
    border-top: solid 1px #555;
}

@media only screen and (min-width: 960px) {

.corporatelogo {
    max-width: 1280px;
	margin: 0px auto;
}

.corporatelogo>p {
    font-size: 2em;
}

ul.taitoLink li {
    font-size: 1em;
}

footer .copy {
	font-size: 0.8em;
}

}