.wrap{background: url(image/haikeiplain.jpg) center top no-repeat;background-size: cover;}
*{outline: none;}
.home .wrap{
	background:url("https://cocopachi.com/toyomaru2019/image/haikei.jpg") center top no-repeat;
	background-size: cover;
	position:relative;
}
.kenburns-top {
    -webkit-animation: kenburns-top 5s ease-out both;
            animation: kenburns-top 5s ease-out both;
}
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }

}
body{font:normal 12px/1.6em Meiryo,"MS PGothic",arial,sans-serif;color:#333;margin:0;display: block;}
body > img,footer + img{display: none;}
a{text-decoration: none;}
/*layout*/

/*index*/
.index{text-align: center;}
.ledText {overflow: hidden;position: relative;padding:15px 0;color: #FFB400;font-size: 40px;font-weight: bold;background: #333333;margin-top:0;}
.ledText:after {content: ' ';display: block;position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);background-size: 2px 2px;z-index: 10;}
.ledText span {display: inline-block;white-space: nowrap;
    padding-left: 100%;
    -webkit-animation-name: marquee;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 15s;
    -moz-animation-name: marquee;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 15s;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 15s;
}
a.start{
     margin : 30px ;
     padding : 20px ;
     border : 5px solid maroon ;
     background-color : lightgreen ;
}

@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

/*スライダー*/
.loopSliderWrap {
    top: 0;
    left: 0;
    height: 100px;
    overflow: hidden;
    position: absolute;
}

.loopSlider {
    margin: 0 auto;
    width: 500px;
    height: 100px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.loopSlider ul {
    height: 100px;
    float: left;
    overflow: hidden;
}

.loopSlider ul li {
    width: 100px;
    height: 100px;
    float: left;
    display: inline;
    overflow: hidden;
}

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
.loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}
/*quiz*/
.toukouga{position: relative;}
.btn a{background: #f00;color:#fff;border-radius: 10px;font-size:18px;font-weight:bold;padding: 20px 0;text-align: center;display: block;width: 250px;margin: 0 auto;}
.content.question .quecont{background: url(image/q1.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#q0 .quecont{background: url(image/answer.png) #fff center top no-repeat;}
.content.question#q2 .quecont{background: url(image/q2.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#q3 .quecont{background: url(image/q3.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#q4 .quecont{background: url(image/q4.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#q5 .quecont{background: url(image/q5.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#q6 .quecont{background: url(image/q6.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#q7 .quecont{background: url(image/q7.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#q8 .quecont{background: url(image/q8.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#q9 .quecont{background: url(image/q9.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#q10 .quecont{background: url(image/q10.jpg) #fff 20px 50px no-repeat;background-size: 65px auto;}
.content.question#qend .quecont{background: #fff;}
.qhomesideright{position: absolute;bottom:-100px;right:-250px;background: url(image/movieframe.png) right top no-repeat;background-size: 216px auto;padding: 11px 7px 20px;}
img.qdairibon{width:90%;margin-top: -90px;}
/*question*/
.quecont{text-align:center;padding:50px 0 0;margin: 0 auto;border:6px solid #333;border-bottom-width: 40px;border-top-width: 40px;position: relative;}
.quecont input{font-size:17px;width: 200px;padding:15px 20px;color:#fff;border-radius: 10px;border:none;font-weight: bold;}
.quecont input,.quecont label{
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #fd9535;/*ボタン色*/
    color: #FFF;
    border-bottom: solid 4px #d27d00;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
}
.quecont input:active,.quecont label:active {/*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    /*border-bottom: none;/*線を消す*/
}
.quecont label{background: #f9f9fa;font-size:16px;color:#555;border:1px solid #aaa;border-bottom: solid 4px #aaa;}
input[type="radio"]:checked + label{background: #999;border-color: #666;color:#fff;}
.qsentaku{width:75%;margin:0 auto;}
.qsentaku input[type=radio] {display: none; 	/* ラジオボタンを非表示にする */}
.swal-icon{width:100%;height:auto !important;}
.swal-icon img{width:100%;}
.swal-icon--warning {border:none;}
/*quizend*/
#qend{text-align: center;}
#qend img.kekkaimg{margin: 20px 0 20px;}
.kekka a{display: inline-block;color:#fff;background: #fb3d2a;padding:15px;text-align: center;margin:10px 5px;}
.kekka a:first-child{background:#41a5ec;}
a i{margin-right:10px;font-size:17px;}
.kekka a.tryagain{background: #fbb03b;}
/*toukou*/
.tabinside{background: #f00;padding:15px;}
.ensyutu img{width:90%;}
.ensyutu{background: #f00;text-align: center;}
.toukouhead img{width:100%;}
/*typing quiz*/
textarea.message {
  resize: none;
  max-width:80%;
  height:120px;
}
textarea.message1 {
  resize: none;
  max-width:80%;
  height:40px;
}
/*twitter*/
.anke{background: #fff;}
.twittercont{background:url("image/haikei2.jpg") center top;background-size: auto 1920px ;width:;margin:0 auto;}
/*ouboform*/
.oubobtn a{color:#fff;border-radius: 10px;font-weight:bold;padding: 20px 0;text-align: center;display: block;}
.btn1 a{background: #64abeb;}
.btn2 a{background: #e94e39;}
.btn3 a,.shousailink a{background: #64abeb;}
/*present campaign*/
.present,.campaign{text-align: center;}
.shousailink{text-align: center;}
.shousailink a{margin:0 auto;}
/*formend*/
.formbtn a{color:#fff;border-radius: 10px;font-weight:bold;padding: 20px 0;text-align: center;display: block;}
.btn4 a{background: #e95499;}
.counterimage{vertical-align:bottom;max-width:100%;}
/*video*/
.spvideoimg{position: fixed;bottom:10px;right:10px;width:120px;}
/*footer*/
footer{padding:10px 50px 5px;background: #3D3A39;color:#999;text-align: center;bottom:0;left:0;width:100%;box-sizing:border-box;z-index: 999;}
@media screen and (min-width: 721px) {/*PC*/
    /* body,.wrap{background: transparent !important;} */
    body{width:100% !important;}
    /*layout*/
    .content{width:1140px;min-height:770px;margin:20px auto 60px;position: relative;box-sizing: border-box;}
    .content > p{padding:540px 0 0;font-size:18px;font-weight:bold;text-align: center;}
    /*nav*/
    ul.menu {background-color:#3D3A39;box-shadow: 0px 3px 5px #666;height:60px;margin:0px;display: flex;}
    ul.menu li {list-style: none;border-left:1px solid #666;padding: 21px 22px;font-size:15px;flex:1;position: relative;}
    .topmenu1{padding:9px 22px!important;}
    ul.menu li:first-child{width:250px;}
    ul.menu li a {color:white;text-decoration:none;display: block;text-align: center;}
    ul.menu li:first-child {border-left:none;}
	 ul.menu li.active,ul.menu li:hover{background: #e51686;}
	 ul.menu li:first-child:hover{background: #fff;}
	 ul.menu li a{position: relative; z-index: 1; display: block;}
	 ul.menu li:hover a{ animation: animButtonSpan 0.6s;}

	 @keyframes animButtonSpan {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    35% {
        transform: translateX(30px);
        opacity: 0;
    }

    50.001% {
        transform: translateX(-30px);
    }

    60% {
        transform: translateX(0px);
    }
	}
    /*index*/
    .mlogo{width:460px;margin:50px auto -100px;}
    .mlogo img{width: 100%;}
    .index{text-align: center;}
    .ind{  1260px auto;width:1260px;height:520px;margin:0 auto;padding:130px 0 0px;box-sizing: border-box;}
    .jodan{text-align: center;margin-left:-20px;}
    .jodan a{display: inline-block;width:140px;height:140px;border-radius: 140px;margin:15px;}
    .jodan a:hover{background: #fff;opacity:.15;}
    .banner{text-align: center;}
    .banner2{text-align: center;margin-bottom:30px;}
    .banner .banner2 a:hover{background: #fff;opacity:.15;}
    .item{text-align: center;width:12%;padding:10px 5px 10px;}
    /*quiz*/
 	.content .quizhome{width:700px;margin: 70px auto 0px;}
    .toukouga img{width:200px;}
    .ga1{position: absolute;top:0px;left:120px;}
    .ga2{position: absolute;top:80px;left:250px;}
    .ga3{position: absolute;top:0px;left:380px;}
    /* .btn{position: absolute;bottom:120px;left:50%;}
    .btn a{margin-left:-125px;}
    #qend{padding:140px 0 0;}*/
    #qend img{width:550px;}
    .kekka a{width:160px;}
	 img.nanaty1,#qend img.nanaty1{position: absolute;left:-200px;bottom:-100px;width:300px; }
    /*question*/
    #myQuestion{font-size:26px;font-weight: bold;margin:0 20px;}
	 .style-hide #myQuestion{margin: 0 90px}
	.quizflex{display: flex;width:570px;margin-left:  auto;text-align: left;padding-right:20px }
	.quizflex > div{flex:1;}
	.quizimgwrap img{width: 85%}
    .quecont .qt{padding-top:;margin:0 auto;line-height: 1.2em;}
    .quecont{width:700px;}
    .quecont input,.quecont label{    width:230px;margin:20px 10px 20px;padding:19px 0;}
    .qsentaku{margin-top: 30px;margin-bottom: 70px;}
	 .kekka{margin-bottom: 50px;}
     .kishu{text-align:right;}
    /*twitter*/
    .twittercont{padding:80px 0;margin-top:-40px;}
    .twittercont p{text-align: center;}
    .anke{padding: 25px;width:500px; margin:0 auto 50px;}
    .tw{width:1230px;margin:0 auto;}
    .tw img{width:100%;margin:50px 0 -50px;}
    /*toukou*/
    .tabcontwrap{width:600px;margin:0 auto;padding-bottom:  20px ;}
    img.toukouhouhou{margin-bottom: -30px;}
	.toukouhead{text-align: center;width:800px;margin:0 auto;}
    .toukouhead img.toukoumidasi{width:70%;}
    /*ouboform*/
    .content.ouboform{background: url(image/form_waku.png) center top no-repeat;padding:450px 0 0;text-align:center;}
    .oubobtn{text-align: center;}
    .oubobtn a{width: 300px;display: block;margin:0 auto;font-size:18px;padding: 30px 0;}
    .btn1{width:40%;display: inline-block;}
    .btn2{width:40%;display: inline-block;}
    .btn3{margin:100px 0 0 ;}
    /*present campaign*/
    .content.present{background: url(image/pre_waku.png) center top no-repeat;}
    .content.campaign{background: url(image/cam_waku.png) center top no-repeat;}
    .present{padding: 350px 0 280px}
    .campaign{padding:550px 0 150px;}
    .present > img.precam{height:450px;}
    .present .uwanose{padding:30px 0 50px;}
    .campaign .uwanose{padding:10px 0 20px;}
    .uwanose img{width:27%;}
    .shousailink{margin:25px 0 0;}
    /*formend*/
    .content.formend{background: url(image/formend.png) center top no-repeat;padding:450px 0 0;text-align:center;}
    .formbtn{text-align: center;}
    .formbtn a{width: 300px;display: block;margin:0 auto;font-size:18px;padding: 30px 0;}
    .btn4{margin:50px 0 0 ;}
    .moji1{display: none;}
    .sp{display: none;}
	 /*place footer at the bottom*/
	 footer{position: fixed;}
	 html {
	 height: 100%;
	 }
	 body {
	 	min-height: 100%;
	 	display: flex;
	 	flex-direction: column;
	 }
	 /*#main{
	 	flex: 1;
	 }*/
}
@media screen and (min-width: 0px) and (max-width: 720px) {/*SP*/
    body.home{background:url("image/haikei2.jpg") center 37px no-repeat;background-size: auto 540px ;}
	 body.home .mainSite{height:567px  !important;}
    /*layout*/
    .wrap{margin-top:55px;}
    /*drawer nav*/
    .navbar{height:55px;width:100%;z-index:2; background: url(image/toplogo.png) #000 15px center  no-repeat;background-size: auto 32px;position:fixed ;top:0;}
    .drawer-hamburger-icon,.drawer-hamburger-icon::after, .drawer-hamburger-icon::before {background-color: #fff !important;}
    .drawer-open .drawer-hamburger-icon{background-color: #000 !important;}
    .drawer-close .drawer-hamburger-icon{background-color: #fff;}
    .drawer-nav{background:#222 !important;z-index: 9999 !important;}
    ul.menu{padding:0;margin:0;}
    ul.menu li a{color:#fff;display: block;border-bottom:1px solid #555;padding:10px;padding-left: 20px}
    /*index*/
    .jodan{text-align: center;margin-left:-5px;}
    .jodan a{display: inline-block;width:60px;height:60px;border-radius: 60px;margin:4px 5px ;}
    .banner {text-align: center;}
    .banner2{text-align: center;}
    .item {width:40%;}
   .ledText {overflow: hidden;position: relative;padding:10px 0;color: #FFB400;font-size: 20px;font-weight: bold;background: #333333;z-index: 0;}
   .ledText:after {content: ' ';display: block;position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);background-size: 2px 2px;z-index: 10;}
   .ledText span {display: inline-block;white-space: nowrap;
       padding-left: 100%;
       -webkit-animation-name: marquee;
       -webkit-animation-timing-function: linear;
       -webkit-animation-iteration-count: infinite;
       -webkit-animation-duration: 15s;
       -moz-animation-name: marquee;
       -moz-animation-timing-function: linear;
       -moz-animation-iteration-count: infinite;
       -moz-animation-duration: 15s;
       animation-name: marquee;
       animation-timing-function: linear;
       animation-iteration-count: infinite;
       animation-duration: 15s;
   }
	/* .leftcont,.rightcont,.tobiderucont{display: none;} */
    /*quiz*/
    .toukouga img{width:30%;}
	 .content .quizhome{margin: 40px auto 0px;width:90%;}
    .content.quizhome{background-size: 100% auto;text-align: center;}
    .content.question{background-size: 90% auto;}
    /* .content.question#qend{background: url(image/quizendsp.png) center top no-repeat;background-size: 90% auto;} */
    /* .ga1{position: absolute;top:80px;left:60px;}
    .ga2{position: absolute;top:180px;left:160px;}
    .ga3{position: absolute;top:270px;left:60px;} */
    .btn a{margin: 0 auto;padding:10px 0;font-size:14px;}
    #qend{padding:60px 0 60px;}
    #qend img{width:60%;}
    .kekka{padding-bottom: 25px;}
    .kekka a{display: block;width:60%;margin:10px auto;padding:8px 0;}
	img.nanaty1,#qend img.nanaty1{position: absolute;left:-30px;bottom:-70px;width:100px; }
	.qhomesideright{display: none;}
    /*question*/
    #myQuestion{width:52%;text-align: left;font-size:17px;font-weight: bold;margin:0 auto 15px}
	 .content.question{padding: 10px 0;}
    .quecont{padding: 10px 0;margin-bottom: 60px;}
	 .content.question#q1 .quecont,.content.question#q2 .quecont,.content.question#q3 .quecont,.content.question#q4 .quecont,.content.question#q5 .quecont,.content.question#q6 .quecont,.content.question#q7 .quecont,.content.question#q8 .quecont,.content.question#q9 .quecont,.content.question#q10 .quecont
	 {background-position: 20px 20px;background-size: 50px auto;}
    .quecont{text-align: center;height:;width:90%;padding-top: 24px;}
    .quecont input,.quecont label{    width:60%;margin:10px auto 0;}
	 .qsentaku{margin-bottom: 50px}
	 .quizimgwrap img{width:50%;}
     .kishu{margin-top: 30px;}
    /*twiter*/
    .tw img{width:100%;vertical-align:bottom}
    .twse{background: url(image/twitterhaikei2.png) center top;background-size: auto 100%;padding:20px 0;text-align: center;}
    .twittercont{padding: 15px;}
    .twse img{width:80%;}
    img.twmi{margin-top:-50px;}
    /*toukou*/
    .toukouhead{width:99%;margin:0 auto;padding:10px 0 0;text-align:center; }
    .toukouhead img.toukoumidasi{width:80%;}
    /*ouboform*/
    .ouboform{text-align: center;padding:160px 0 50px;}
    .content.ouboform{background: url(image/form_wakusp.png) center top no-repeat;background-size: 90% auto;}
    .oubobtn a{width:65%;margin:8px auto;padding:12px 0;}
    /*present campaign*/
    .content.present{background: url(image/pre_wakusp.png) center top no-repeat;background-size: 90% auto;padding:155px 0 110px;}
    .content.campaign{background: url(image/cam_wakusp.png) center top no-repeat;background-size: 90% auto;padding:220px 0 100px;}
    .present > img{width:65%;}
    .campaign > img{width:65%;}
    .present .uwanose{padding:5px  0 0;}
    .campaign .uwanose{padding:10px  0 0;}
    .uwanose img{width:50%;}
    /*footer*/
    footer{margin: 0 0;padding:15px 0;font-size:11px;}
    /*formend*/
    .formend{text-align: center;padding:160px 0 80px;margin:8px 0px}
    .content.formend{background: url(image/formendsp.png) center top no-repeat;background-size: 90% auto;}
    .formbtn a{width:65%;margin:8px auto;padding:12px 0px;}
    .formend > img{width:65%;margin:15px;}

    .pc{display: none;}

    .image-test{
      position: absolute;
      top: 280px;
      left: 250px;
      width:10%;
    }

}
@media screen and (min-width: 722px) and (max-width: 1220px) {/*smaller PC*/
    .content{width:700px;}
	 .qhomesideright{display: none;}
	 img.nanaty1{    left: -100px;bottom: -100px;width: 200px;}
}
/*タグページ*/
.big-number{top:-180px;left:68%;width:10%;position:relative;}
.small-number{top:-180px;left:68%;width:10%;position:relative;}

@media screen and (max-width: 720px) {
    .modalwin {width: 90%;}
    .big-number,.small-number{position: relative;top:-210px;left:68%;width:10%;z-index: 1;}
    }


@media screen and (max-width: 600px) {
    .modalwin {width: 90%;}
    .big-number,.small-number{position: relative;top:-170px;left:68%;width:10%;}
    }

@media screen and (max-width:450px) {
    .modalwin {width: 90%;}
    .big-number,.small-number{position: relative;top:-120px;left:68%;width:10%;}
    }

@media screen and (max-width:420px) {
    .modalwin {width: 90%;}
    .big-number,.small-number{position: relative;top:-120px;left:68%;width:10%;}
    }

@media screen and (max-width:375px) {
    .modalwin {width: 90%;}
    .big-number,.small-number{position: relative;top:-105px;left:68%;width:10%;}
    }


@media screen and (max-width:320px) {
    .modalwin {width: 90%;}
    .big-number,.small-number{position: relative;top:-90px;left:68%;width:10%;}
    }