@charset "utf-8";

@font-face{
font-family:"NotoSansCJKjpMedium";
font-style:normal;
font-weight:normal;
src:url('font/NotoSansCJKjpMedium.eot');
src:url('font/NotoSansCJKjpMedium.eot?#iefix') format('embedded-opentype'),url('font/NotoSansCJKjpMedium.woff') format('woff'),url('font/NotoSansCJKjpMedium.otf') format('opentype')
}
@font-face{
font-family:"NotoSansCJKjp-Bold";
font-style:normal;
font-weight:normal;
src:url('font/NotoSansCJKjp-Bold.eot');
src:url('font/NotoSansCJKjp-Bold.eot?#iefix') format('embedded-opentype'),url('font/NotoSansCJKjp-Bold.woff') format('woff'),url('font/NotoSansCJKjp-Bold.otf') format('opentype')
}

@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,main,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
img{max-width:100%;height:auto;vertical-align:bottom;}
a img{max-width:100%;height:auto;border:0;}
a:hover img{opacity:0.7;-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font:1em/1.5 "ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro," メイリオ",Meiryo,Osaka," ＭＳ Ｐゴシック",MS PGothic," sans-serif";color:#333;background:#fff;-webkit-text-size-adjust:none;}

/**** Clearfix ****/
.inner:after{content:""; display:table;clear:both;}
.inner{zoom:1;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

.pcDisp{display:block;}
.spDisp{display:none;}

/* 汎用クラス
*****************************************************/
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px;}
.mb40{margin-bottom:40px;}
.cent{text-align:center;}
.alR{text-align:right;}
.block{display:block;}
.fontS{font-size:.85em;}
.fontM{font-size:1.2em;}

img.alignLeft{float:left !important;margin:0 15px 15px 0 !important;display:inline !important;}
img.alignRight{float:right !important;margin:0 0 15px 15px !important;display:inline !important;}

.delayAnime{-webkit-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:4s;-ms-animation-duration:4s;animation-duration:4s;-webkit-animation-name:fAnime;-ms-animation-name:delayAnime;animation-name:delayAnime;visibility:visible !important;}

/* ヘッダー
*****************************************************/
header{width:100%;margin:0 0 20px;}
header .inner{width:1024px;margin:0 auto;}

/* メイン
*****************************************************/
#mainFrame{width:1024px;height:600px;background:#5dc3ae;padding:30px;margin:0 auto 40px;position:relative;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;box-shadow:0px 6px 3px rgba(75,156,139,0.7);-webkit-box-shadow:0px 6px 3px rgba(75,156,139,0.7);-moz-box-shadow:0px 6px 3px rgba(75,156,139,0.7);animation:fadeIn 2s ease 0s 1 normal;-webkit-animation:fadeIn 2s ease 0s 1 normal;}
#mainFrame #clip{width:100%;position:absolute;top:0;left:0;text-align:center;}
#mainFrame #spClip{display:none;}
#mainFrame .inner{width:100%;height:540px;background:url(images/squares.png) repeat center center;padding:60px 50px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;box-shadow:0px 6px 3px rgba(75,156,139,0.7);-webkit-box-shadow:0px 6px 3px rgba(75,156,139,0.7);-moz-box-shadow:0px 6px 3px rgba(75,156,139,0.7);-moz-box-shadow:0px 3px 1px rgba(0,0,0,0.6);}
.startTop{width:100%;margin:0 0 20px;}
.startTop .startTopLeft{width:60%;float:left;}
.startTop .startTopRight{width:35%;text-align:center;float:right;}
.startBottom{width:100%;margin:20px 0 0;}
.questionTop{width:100%;margin:0 0 20px;}
.questionTop .questionTopLeft{width:60%;float:left;}
.questionTop .questionTopRight{width:35%;margin-top:-20px;text-align:center;float:right;}
.questionMiddle{width:100%;height:170px;margin:0 0 20px;}
.questionMiddle ul{border-top:#bcdfd8 2px solid;margin:0 0 0 40px;}
.questionMiddle ul li{border-bottom:#bcdfd8 2px solid;}
.questionMiddle ul li.answer{color:#4688da;}
.questionBottom{width:100%;margin:0 0 10px;}
.questionBottom .questionBottomLeft{width:73%;float:left;}
.questionBottom .questionBottomRight{width:22%;float:right;}
.questionTxt{font-size:1.2em;}
.click a{padding:0 20px 0 0;margin:0 0 5px;color:#333;font-size:.9em;text-decoration:none;text-align:right;display:block;position:relative;}
.click a:before{width:6px;height:6px;content:'';border:0;border-top:solid 2px #5dc3ae;border-right:solid 2px #5dc3ae;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:50%;
right:5px;margin-top:-5px;}
.click a:hover{color:#5dc3ae;text-decoration:underline;animation:fadeIn 1s ease 0s 1 normal;-webkit-animation:fadeIn 1s ease 0s 1 normal;}
ul li.default{list-style-type:none;text-indent:-60px;padding:10px;font-size:1.3em;font-family:"NotoSansCJKjpMedium";}
ul li.default:before{content:"　";display:inline;font-size:1.5em;font-family:"NotoSansCJKjp-Bold";line-height:1;color:#4688da;margin:0 30px 0 0;vertical-align:middle;}
ul li.correct{list-style-type:none;text-indent:-60px;padding:10px;font-size:1.3em;font-family:"NotoSansCJKjpMedium";}
ul li.correct:before{content:"〇";display:inline;font-size:1.5em;font-family:"NotoSansCJKjp-Bold";line-height:1;color:#ef3e3e;margin:0 30px 0 0;vertical-align:middle;}
ul li.incorrect{list-style-type:none;text-indent:-60px;padding:10px;font-size:1.3em;font-family:"NotoSansCJKjpMedium";}
ul li.incorrect:before{content:"×";display:inline;font-size:1.5em;font-family:"NotoSansCJKjp-Bold";line-height:1;color:#4688da;margin:0 30px 0 0;vertical-align:middle;}
.pageNumber{color:#5dc3ae;font-size:.9em;font-weight:bold;text-align:center;}
.resultTop{width:100%;padding:20px 100px;margin:0 0 20px;border:#efd292 8px solid;background:url(images/bg_topleft.png) no-repeat left top,url(images/bg_topright.png) no-repeat right top,url(images/bg_bottomleft.png) no-repeat left bottom,url(images/bg_bottomright.png) no-repeat right bottom;-moz-box-sizing:border-box;box-sizing:border-box;}
.resultTop dt{padding:15px 0;margin:0 0 20px;color:#9e7e39;font-size:2em;font-family:"NotoSansCJKjp-Bold";text-align:center;position:relative;}
.resultTop dt::before,.resultTop dt::after{width:100%;height:8px;content:'';position:absolute;left:0;box-sizing:border-box;}
.resultTop dt::before{top:0;border-top:#efd292 4px solid;border-bottom:#efd292 1px solid;}
.resultTop dt::after{bottom:0;border-top:#efd292 1px solid;border-bottom:#efd292 4px solid;}
.resultTop dt span{display:inline-block;margin:0 0 0 20px;}
.resultTop dd{text-align:center;}
.resultTop dd p{font-size:1em;margin:0 0 20px;}
.resulttBottom{width:100%;margin:0;}

/* ボタン
*****************************************************/
.btn01{display:block;margin:0 auto 30px;text-align:center;}
.btn01 a{background:#df518d;border:#df518d 2px solid;padding:10px 100px;font-size:1.5em;font-family:"NotoSansCJKjp-Bold";color:#fff;text-decoration:none;position:relative;display:inline-block;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;}
.btn01 a:before{width:10px;height:10px;content:'';border:0;border-top:solid 2px #fff;border-right:solid 2px #fff;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:50%;right:20px;margin-top:-4px;}
.btn01 a:hover{background:#fff;color:#df518d;animation:fadeIn 1s ease 0s 1 normal;-webkit-animation:fadeIn 1s ease 0s 1 normal;}
.btn01 a:hover:before{border-top:solid 2px #df518d;border-right:solid 2px #df518d;}
.btn02{display:block;margin:0 auto 20px;text-align:center;}
.btn02 a{background:#e0d965;padding:10px 50px;font-size:1.2em;font-family:"NotoSansCJKjpMedium";color:#333;text-decoration:none;position:relative;display:inline-block;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;}
.btn02 a:before{width:10px;height:10px;content:'';border:0;border-top:solid 2px #333;border-right:solid 2px #333;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:50%;right:20px;margin-top:-4px;}
.btn02 a:hover{background:#333;color:#e0d965;animation:fadeIn 1s ease 0s 1 normal;-webkit-animation:fadeIn 1s ease 0s 1 normal;}
.btn02 a:hover:before{border-top:solid 2px #e0d965;border-right:solid 2px #e0d965;}
.btn03{display:block;margin:0 auto;text-align:center;}
.btn03 a{background:#df518d;border:#df518d 2px solid;padding:10px 100px;font-size:1.5em;font-family:"NotoSansCJKjp-Bold";color:#fff;text-decoration:none;position:relative;display:inline-block;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;}
.btn03 a:before{width:10px;height:10px;content:'';border:0;border-top:solid 2px #fff;border-right:solid 2px #fff;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:50%;right:20px;margin-top:-4px;}
.btn03 a:hover{background:#fff;color:#df518d;animation:fadeIn 1s ease 0s 1 normal;-webkit-animation:fadeIn 1s ease 0s 1 normal;}
.btn03 a:hover:before{border-top:solid 2px #df518d;border-right:solid 2px #df518d;}

/* SNSアイコン
*****************************************************/
ul.sns{margin:0 auto;text-align:center;display:table;}
ul.sns li{display:table-cell;padding:0 10px 0 0;vertical-align:middle;}
ul.sns li:last-child{display:table-cell;margin:0;vertical-align:middle;}
.fb_iframe_widget > span{vertical-align:baseline !important;}

/* タイポグラフィ
*****************************************************/
.heading01{padding:20px 0 5px;margin:0 0 20px;border-bottom:#5dc3ae 2px solid;font-size:2.2em;font-family:"NotoSansCJKjpMedium";}
.heading02{padding:5px 20px;margin:0 0 20px;background:#349480;color:#fff;font-size:1.2em;font-family:"NotoSansCJKjpMedium";display:inline-block;}
.heading03{margin:0 0 20px;font-size:1.5em;font-family:"NotoSansCJKjpMedium";text-align:center;}

/* フッター
*****************************************************/
footer{width:100%;}
footer .inner{width:1024px;margin:0 auto;clear:both;}

/* タブレットサイズ
------------------------------------------------------------*/
@media only screen and (max-width:1023px){
main{width:98%;margin:0 auto;}
#mainFrame{width:100%;height:auto;}
#mainFrame .inner{height:auto;padding:50px 25px 25px;}
.questionTop .questionTopRight{margin-top:-10px;}
.questionMiddle{height:auto;}
.questionBottom .questionBottomLeft{width:65%;}
.questionBottom .questionBottomRight{width:30%;}
.resultTop{padding:20px 50px;}
.heading01{padding:10px 0;margin:0 0 10px;font-size:1.8em;}
header .inner{width:100%;}
footer .inner{width:100%;}
}

/* スマホサイズ（644px）
------------------------------------------------------------*/
@media only screen and (max-width:644px){
.pcDisp{display:none;}
.spDisp{display:block;}
.spBlock{display:block;}
img.alignRight,img.alignLeft{display:block !important;margin:0 auto 10px !important;float:none !important;}
.alignRight,.alignLeft{display:block !important;float:none !important;}
main{width:96%;}
#mainFrame{height:auto;padding:20px;margin-bottom:20px;}
#mainFrame #clip{display:none;}
#mainFrame .inner{height:auto;padding:25px 15px 15px;}
#mainFrame #spClip{width:100%;position:absolute;top:0;left:0;text-align:center;display:block;}
#mainFrame #spClip img{height:45px;}
.startTop .startTopLeft{width:100%;margin:0 0 20px;float:none;}
.startTop .startTopRight{width:100%;float:none;}
.startBottom{margin:20px 0 0;}
.questionTop .questionTopLeft{width:100%;margin:0 0 20px;float:none;}
.questionTop .questionTopRight{width:100%;margin-top:0;float:none;}
.questionBottom .questionBottomLeft{width:100%;margin:0 0 20px;float:none;}
.questionBottom .questionBottomRight{width:100%;margin-top:0;float:none;}
.resultTop{padding:60px 10px;}
.resultTop dt{padding:10px 0;margin:0 0 10px;font-size:1.3em;}
.resultTop dt span{display:block;margin:0;}
.resultTop dd p{font-size:1em;}
.btn01 a{padding:10px 40px;font-size:1.2em;}
.btn02 a{padding:10px 40px;font-size:1em;}
.btn03 a{padding:10px 40px;font-size:1.2em;}
.click a{text-align:center;display:inline-block;}
ul li.default{text-indent:-50px;font-size:1.1em;}
ul li.default:before{font-size:1.3em;margin:0 20px 0 0;}
ul li.correct{text-indent:-50px;font-size:1.1em;}
ul li.correct:before{font-size:1.3em;margin:0 20px 0 0;}
ul li.incorrect{text-indent:-50px;font-size:1.1em;}
ul li.incorrect:before{font-size:1.3em;margin:0 20px 0 0;}
ul.sns li{width:100%;display:block;padding:0;text-align:center;vertical-align:middle;float:left;}
.pageNumber{font-size:1em;}
.heading01{font-size:1.5em;}
.heading03{font-size:1.3em;}
}

/* スマホサイズ（320px）
------------------------------------------------------------*/
@media only screen and (max-width:320px){
.heading01{font-size:1.2em;}
}