@charset "utf-8";

/*
-----------------------------------------------
クイズCSS 2018.3
----------------------------------------------- */
.inblk2 {
background:#fff;
border-radius:10px;
padding:48px 128px;
box-shadow:10px 10px 0 rgba(251, 217, 232, 1);
}
.qublk {
width:450px;
margin-left:auto;
margin-right:auto;
}
img {
max-width:100%;
height:auto;
}
.maruimg {
border-radius:10px;
}

.quizttl {
animation:quiz001 8s infinite;
}
@keyframes quiz001 {
2% {transform:rotate(4deg)}
8% {transform:rotate(-4deg)}
16% {transform:rotate(0deg)}
}

.quiz_ul li {
overflow:hidden;
padding:32px 0;
border-bottom:dotted #ccc 4px;
}
.q_img {
float:left;
margin:0 32px 0 0;
border-radius:10px;
}
.quiz_look {
display:inline-block;
margin-top:32px;
border:solid #559be6 5px;
color:#559be6;
border-radius:10px;
padding:4px 24px 4px 40px;
background:url("img/look_icn.png") no-repeat 14px 9px;
background-size:22px auto;
font-weight:bold;
font-size:20px;
transition:0.3s ease-in-out;
}
.quiz_look:hover {
border:solid #559be6 5px;
color:#fff;
background:#559be6 url("img/ans_icn.png") no-repeat 14px 9px;
background-size:22px auto;
text-decoration:none;
}
.question {
font-size:28px;
letter-spacing:.04em;
color:#fff;
text-shadow:
0 2px 0 #ed729d,
2px 0 0 #ed729d,
0 -2px 0 #ed729d,
-2px 0 0 #ed729d,
-2px -2px 0 #ed729d,
2px -2px 0 #ed729d,
-2px 2px 0 #ed729d,
2px 2px 0 #ed729d;
}
.choice a {
display:block;
color:#fff;
font-size:20px;
background:#ed729d;
text-align:center;
padding:16px;
border-radius:12px;
font-weight:bold;
transition:0.3s ease-in-out;
}
.choice a:hover {
background:#f193b2;
text-decoration:none;
}

.choice a:before {
content:'';
display:inline-block;
width:22px;
height:22px;
background-image:url("img/ans_icn.png");
background-size:contain;
vertical-align:middle;
position:relative;
top:-2px;
left:-5px;
}

.choice li {
margin-bottom:16px;
}

.quiz_look2 {
display:inline-block;
border:solid #559be6 5px;
color:#559be6;
border-radius:10px;
padding:10px 44px 10px 60px;
background:url("img/look_icn.png") no-repeat 30px 13px;
background-size:22px auto;
font-weight:bold;
font-size:18px;
transition:0.3s ease-in-out;
}
.quiz_look2:hover {
border:solid #559be6 5px;
color:#fff;
background:#559be6 url("img/ans_icn.png") no-repeat 30px 13px;
background-size:22px auto;
text-decoration:none;
}

.answer {
font-size:30px;
color:#559be5;
}
.hasen {
background:url("img/dot.png") repeat-x center bottom;
background-size:11px auto;
}
.sns_ul li {
display:inline-block;
padding:0 8px;
}
.w700 {
width:700px;
margin-left:auto;
margin-right:auto;
border-radius:32px;
padding:54px 88px 64px;
position:relative;
margin-top:100px;
border: 3px solid #ee6491;
}
.quiz-h2b {
position:absolute;
width:792px;
top:-64px;
left:-46px;
}
.oretxt {
color:#f60;
letter-spacing:.02em;
}

.dl001 dt {
font-weight:bold;
}
.dl001 dd {
margin-left:1em;
margin-bottom:8px;
}

.modal {
opacity:0;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
overflow-y:auto;
font-size:16px;
transition:opacity 1s linear;
transform:translate(0,100%);
background-color:rgba(0,0,0,.6);
}
.moin {
position:relative;
left:50%;
margin:20% 0 20% -200px;
z-index:10;
}
#my-modal.on,
#my-modal2.on,
#my-modal:target {
opacity:1;
transform:translate(0,0);
}
#my-modal.on .moin img {
animation:anim 4s ease;
width:400px;
}
#my-modal2.on .moin img {
animation:anim 2s ease;
width:400px;
}

@keyframes anim {
0% {opacity:0;}
0% {transform:scale(1,1);}
5% {opacity:1;}
25% {transform:scale(1.5,1.5);}
50% {transform:scale(0.8,0.8);}
80% {opacity:1;}
100% {transform:scale(1,1);}
100% {opacity:0;}
}

.pageul {
margin:32px 0 0;
text-align:center;
}
.pageul li {
display:inline-block;
padding:0 2px;
}
.pageul a {
color:#ed729d;
}
.pageul a:hover {
text-decoration:none;
}
.pageul .maru {
border:solid #ed729d 1px;
width:28px;
height:28px;
line-height:28px;
font-size:14px;
text-align:center;
font-weight:bold;
display:inline-block;
border-radius:50%;
}
.pageul .maru.on {
background:#ed729d;
color:#fff;
}


@media (max-width:767px) {
#mainblk h2.btm32 {
margin-left:14px;
margin-right:14px;
margin-bottom:16px;
}
#header .imgL {
float:none;
margin:0 0 12px;
}
.inblk2 {
padding:24px 80px;
box-shadow:5px 5px 0 rgba(251, 217, 232, 1);
}
.qublk {
width:auto;
margin-left:10px;
margin-right:10px;
}
.quiz_ul li {
padding:0 0 16px;
margin-bottom:16px;
}
.quiz_look {
margin-top:14px;
}
.q_img {
float:none;
margin:0 0 8px;
width: 100%;
max-width: 100%;
}

.choice a {
font-size:16px;
padding:14px;
border-radius:12px;
}

.question {
font-size:20px;
}
.w700 {
width:auto;
margin-left:0;
margin-right:0;
border-radius:14px;
padding:16px 10px 16px;
margin-top:10px;
}
.quiz-h2b {
position:static;
width:auto;
}

.moin {
margin:5% 0 0% -130px;
}
#my-modal.on .moin img {
width:260px;
}
#my-modal2.on .moin img {
width:260px;
}

@keyframes anim {
0% {opacity:0;}
0% {transform:scale(1,1);}
5% {opacity:1;}
25% {transform:scale(1.3,1.3);}
50% {transform:scale(0.8,0.8);}
80% {opacity:1;}
100% {transform:scale(1,1);}
100% {opacity:0;}
}
}

@media (max-width:500px) and (orientation:portrait) {
.inblk2 {
padding:24px 10px;
box-shadow:5px 5px 0 rgba(251, 217, 232, 1);
}
.qublk {
width:auto;
margin-left:10px;
margin-right:10px;
}
.question {
font-size:20px;
}
.moin {
margin:20% 0 0 -130px;
}
}

.cmp_fb iframe{
max-width: 448px;
width: 100%;
background: #fff;
}


/* css_end */