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

/*---ページ仮設定---*/
#pagesample { min-height:80vh; margin:0 2vw; padding:5vw; background-color:#EAEAEA;}


/*---トップページ---*/
#home { width:100%; overflow:hidden;}

/* メインイメージ用 */
#topimg { width:100%; height:100%; height:100vh; overflow:hidden;}
#topimg p { width:100%; height:100%; height:100vh; background:url(../img/top/mainimg-pc.png) center center no-repeat, url(../img/top/topimg.jpg) center center no-repeat; background-color:transparent;
background-size:contain, cover;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:center;
align-items:center;
justify-content:center;
background-attachment:fixed;/*画面からの相対位置（背景固定）*/
transform-origin:50% 50%;
animation: fadeIn 3s ease 0s 1 normal, sizeScale 3s ease;
-webkit-animation: fadeIn 3s ease 0s 1 normal, sizeScale 3s ease;
}
@keyframes sizeScale {
0% { transform: scale(1.2);}
100% { transform: scale(1.0);}
}
@-webkit-keyframes sizeScale {
0% { transform: scale(1.2);}
100% { transform: scale(1.0);}
}
@media all and (max-width:719px)
{
#topimg p {
background-image:url(../img/top/mainimg-sp.png), url(../img/top/topimg.jpg);/*背景画像*/
background-size:contain, cover;/*背景サイズ*/
background-position:center center;
background-attachment:scroll;/*画面からの相対位置（背景固定）*/}
}

#home .prizeinfo { margin:1.5em 1.0em 0; font-size:22px;}
#home .prizeinfo p { display:inline-block; margin:5px; padding:3px 8px; font-size:24px;
-moz-border-radius: 5px;    /* 古いFirefox */
-webkit-border-radius: 5px; /* 古いSafari,Chrome */
border-radius: 5px;         /* CSS3 */}
#home .prizeinfo p:nth-of-type(1) { color:#FFFFFF; background-color:#FF0000;}
#home .prizeinfo p:nth-of-type(2) { color:#FFFFFF; background-color:#FF6600;}
#home .prizeinfo p:nth-of-type(3) { color:#FFFFFF; background-color:#0066FF;}
#home .prizeinfo span { display:inline-block;}
@media all and (max-width:719px)
{
#home .prizeinfo { text-align:left; font-size:1.6rem;}
#home .prizeinfo p { font-size:1.6rem;}
#home .prizeinfo br { display:none}
}

#home .prizeinfo01,
#home .prizeinfo02 { margin:1.5em 1.0em 0; font-size:22px;}
#home .prizeinfo01 p,
#home .prizeinfo02 p { display:inline-block; margin:5px; padding:3px 8px; font-size:24px;
-moz-border-radius: 5px;    /* 古いFirefox */
-webkit-border-radius: 5px; /* 古いSafari,Chrome */
border-radius: 5px;         /* CSS3 */}
#home .prizeinfo01 p { color:#FFFFFF; background-color:#FF0000;}
#home .prizeinfo02 p { color:#FFFFFF; background-color:#FF6600;}
#home .prizename { margin:1.0em auto 0; padding:0 1.0em;}
#home .prizename strong { font-size:28px;}
@media all and (max-width:719px)
{
#home .prizeinfo01,
#home .prizeinfo02 { margin:1.5em 0 0; font-size:1.6rem;}
#home .prizeinfo01 p,
#home .prizeinfo02 p { font-size:1.6rem;}
#home .prizeinfo br { display:none}
#home .prizename strong { font-size:2.2rem;}
}



/*----------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--基本不要のはずエリア--*/

#home .topctr .stepbox { width:100%; max-width:680px; margin:0 auto; padding:13px; border:#0033CC 2px solid;
-moz-border-radius: 10px;    /* 古いFirefox */
-webkit-border-radius: 10px; /* 古いSafari,Chrome */
border-radius: 10px;         /* CSS3 */}
#home .topctr .stepbox h3 { margin:0 auto 15px; padding:5px; font-size:18px; color:#FFFFFF; background-color:#0033CC;}
#home .topctr .stepbox p.imgbox { display:inline-block; width:100%; max-width:320px; margin:0 auto; padding:0;}
#home .topctr .stepbox p.textbox { display:inline-block; margin:0 auto; padding:0; text-align:left; font-size:16px;}
#home .topctr .stepbox p.btnbox { display:inline-block; width:100%; max-width:480px; margin:0 auto; padding:0;}
#home .topctr .stepbox p.btnbox a:hover { opacity:0.7;}
#home .topctr .recruitbox { width:100%; max-width:680px; margin:0 auto; padding:13px; border:#009900 2px solid; text-align:left;
-moz-border-radius: 10px;    /* 古いFirefox */
-webkit-border-radius: 10px; /* 古いSafari,Chrome */
border-radius: 10px;         /* CSS3 */}
#home .topctr .recruitbox h3 { margin:0 auto 15px; padding:5px; font-size:18px; color:#FFFFFF; background-color:#009900;}
#home .topctr .recruitbox h3:before { display:inline; content:"◆";}
#home .topctr .recruitbox div { margin:0; padding:0 1.0em;}
#home .topctr .recruitbox ul { margin:0 0 0.5em 1.5em;}
#home .topctr .recruitbox .btnbox { margin:10px 0 0; color:#FF0000;} 
#home .topctr .recruitbox .btnbox a { display:inline-block; margin:5px 0 0; padding:10px; text-align:center; color:#FFFFFF; background-color:#0066FF;
-moz-border-radius: 10px;    /* 古いFirefox */
-webkit-border-radius: 10px; /* 古いSafari,Chrome */
border-radius: 10px;         /* CSS3 */}
#home .topctr .recruitbox .btnbox a:hover { text-decoration:none; opacity:0.7;}
/*----------------------------------------------------------------------------------------------------------------------------------------------------*/

/* トップタイトル、他 */
#home { width:auto; margin:0 2.0vw; background-color:#FFFFFF;
-moz-border-radius: 20px;    /* 古いFirefox */
-webkit-border-radius: 20px; /* 古いSafari,Chrome */
border-radius: 20px;         /* CSS3 */}
#home .topctr { box-sizing:border-box; width:auto; max-width:900px; margin:60px auto 0;}
#home .topctr img { width:100%; height:auto;}
#home .topctr h2 { margin:0 auto 15px; padding:8px 5px 4px; border-bottom:#801E6B 2px solid; color:#FFFFFF; background-color:#801E6B;
-moz-border-radius: 40px;    /* 古いFirefox */
-webkit-border-radius: 40px; /* 古いSafari,Chrome */
border-radius: 40px;         /* CSS3 */}
#home .topctr .maininfo { margin:0 1.0em; font-size:22px;}
#home .topctr .maininfo ul.howto { display:inline-block; margin:0 auto; padding:0; list-style:none; text-align:left;}
#home .topctr .maininfo ul.howto li { position:relative; margin:30px 0 0; padding:1.0em 1.0em 1.0em 2.0em; text-indent:-1.0em; box-shadow:0 5px 10px 0 rgba(0, 0, 0, 0.5);}
#home .topctr .maininfo ul.howto li:nth-of-type(1) { margin:0;}
#home .topctr .maininfo ul.howto li:before { display:inline;}
#home .topctr .maininfo ul.howto li:nth-of-type(1):before { content:"①";}
#home .topctr .maininfo ul.howto li:nth-of-type(2):before { content:"②";}
#home .topctr .maininfo ul.howto li:nth-of-type(3):before { content:"③";}
#home .topctr .maininfo ul.howto li:after { display:block; position:absolute; right:0; bottom:-45px; left:0; text-align:center; font-size:5.0rem; color:#801E6B; content:"\025bc";}
#home .topctr .maininfo ul.howto li:nth-of-type(3):after { display:none;}
#home .topctr .maininfo ul.howto li .snsinfo { margin:0; padding:0; text-indent:0; text-align:left;}
#home .topctr .maininfo ul.howto li .snsinfo a { display:block; margin:0.5em 0 0 0; text-indent:0; text-align:left; font-size:16px;}
#home .topctr .maininfo ul.howto li .snsinfo a:hover { text-decoration:none; background-color:#ECF8FF;}
#home .topctr .maininfo ul.howto li .snsinfo a img { vertical-align:middle; width:auto; height:40px; margin-right:0.5em;}
#home .topctr .maininfo ul.howto li .moviecreate { width:100%; height:160px; background-image:url(../img/top/moviecreate.jpg);/*背景画像*/
background-size:auto 160px;/*背景サイズ*/
background-position:center left;}
#home .topctr .agreetext { margin:0 1.0em 15px; text-align:center; font-size:18px; color:#0080FF;}
#home .topctr .agreebox { width:auto; margin:0 1.0em; padding:18px; border:#0080FF 2px solid; text-align:left; font-size:14px;
-moz-border-radius: 20px;    /* 古いFirefox */
-webkit-border-radius: 20px; /* 古いSafari,Chrome */
border-radius: 20px;         /* CSS3 */}
#home .topctr .agreebox h3 { margin:15px auto 5px; padding:5px; font-size:14px; color:#333333; background-color:#F6F6F6;}
#home .topctr .agreebox h3:first-of-type { margin:0 auto 5px;}
#home .topctr .agreebox h3:before { display:inline; content:"◆";}
#home .topctr .agreebox div { margin:0; padding:0 1.0em; font-size:14px;}
#home .topctr .agreebox ul { margin:0 0 0.5em 1.5em; font-size:14px;}
@media all and (max-width:719px)
{
#home .maininfo { text-align:left; font-size:1.6rem;}
#home .maininfo br { display:none}
#home .topctr .maininfo { font-size:1.6rem;}
#home .topctr .maininfo ul.howto li .snsinfo a { font-size:1.2rem;}
#home .topctr .maininfo ul.howto li .snsinfo a br { display:inline;}
#home .topctr .maininfo ul.howto li .snsinfo a img { height:20px;}
#home .topctr .maininfo ul.howto li .moviecreate { height:100px; background-size:auto 100px;/*背景サイズ*/}
#home .topctr .agreetext { font-size:1.6rem;}
}
@media all and (max-width:479px)
{
#home .topctr .maininfo ul.howto li .moviecreate { height:60px; background-size:auto 60px;/*背景サイズ*/}
}