@charset "utf-8";

@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}}
@keyframes delay{100%{opacity:1;}}
@-webkit-keyframes delay{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;image-rendering:-webkit-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor;}
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:#000;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;}
.pcBlock{display:block;}

/* 汎用クラス
*****************************************************/
.mb10{margin-bottom:10px;}
.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;border:#e40b20 15px solid;margin:0 auto 40px;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;animation:fadeIn 2s ease 0s 1 normal;-webkit-animation:fadeIn 2s ease 0s 1 normal;}
#mainFrame #hang{width:100%;position:absolute;top:0;left:0;text-align:center;}
#mainFrame #airplane{position:absolute;top:60px;right:80px;}
#mainFrame #urban{width:100%;position:absolute;bottom:0;left:0;text-align:center;}
#mainFrame #start{width:100%;text-align:center;margin-bottom:70px;-webkit-animation:delay 1s ease 3.5s 1 forwards;animation:delay 1s ease 3.5s 1 forwards;opacity:0;display:block;}
#mainFrame #start span{display:block;margin:0 auto;text-align:center;}
#mainFrame #start span a{background:#fff;border:#e40b20 2px solid;padding:5px 50px;font-size:1.5em;font-family:"NotoSansCJKjp-Bold";color:#e40b20;text-decoration:none;position:relative;display:inline-block;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}
#mainFrame #start span a:before{width:10px;height:10px;content:'';border:0;border-top:solid 2px #e40b20;border-right:solid 2px #e40b20;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:50%;right:20px;margin-top:-4px;}
#mainFrame #start span a:hover{background:#e40b20;color:#fff;animation:fadeIn 1s ease 0s 1 normal;-webkit-animation:fadeIn 1s ease 0s 1 normal;}
#mainFrame #start span a:hover:before{border-top:solid 2px #fff;border-right:solid 2px #fff;}
#mainFrame #start span a span{font-size:.8em;display:block;}
#mainFrame .inner{width:100%;height:542px;background:url(images/bg.png) no-repeat center center;border-left:#dad9d9 5px solid;border-top:#dad9d9 5px solid;border-right:#dad9d9 5px solid;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#balloonBox{width:100%;margin:0 0 10px;}
#balloonBox #balloonBoxLeft{width:49%;text-align:right;float:left;}
#balloonBox #balloonBoxRight{width:49%;float:right;}
#title01{width:100%;margin:50px 0 20px;text-align:center;-webkit-animation:delay 1s ease 1s 1 forwards;animation:delay 1s ease 1s 1 forwards;opacity:0;}
#title02{-webkit-animation:delay 1s ease 1.5s 1 forwards;animation:delay 1s ease 1.5s 1 forwards;opacity:0;}
#title03{-webkit-animation:delay 1s ease 1.8s 1 forwards;animation:delay 1s ease 1.8s 1 forwards;opacity:0;}
#title04{width:100%;margin:0 0 10px;text-align:center;-webkit-animation:delay 1s ease 3s 1 forwards;animation:delay 1s ease 3s 1 forwards;opacity:0;}
dl#comment{width:100%;margin:0 auto 10px;text-align:center;-webkit-animation:delay 1s ease 2s 1 forwards;animation:delay 1s ease 2s 1 forwards;opacity:0;}
dl#comment dt{margin:0 0 5px;font-size:1.1em;font-weight:bold;}
dl#comment dd{font-size:.9em;}

#questionTitle{width:100%;margin:160px 0 20px;font-size:2em;font-weight:bold;color:#e40b20;text-align:center;-webkit-animation:delay 1s ease 1s 1 forwards;animation:delay 1s ease 1s 1 forwards;opacity:0;}
#questionBox{width:880px;margin:0 auto 20px;}
#questionBox li.question01{-webkit-animation:delay 1s ease 1.5s 1 forwards;animation:delay 1s ease 1.5s 1 forwards;opacity:0;}
#questionBox li.question02{-webkit-animation:delay 1s ease 1.7s 1 forwards;animation:delay 1s ease 1.7s 1 forwards;opacity:0;}
#questionBox li.question03{-webkit-animation:delay 1s ease 1.9s 1 forwards;animation:delay 1s ease 1.9s 1 forwards;opacity:0;}
#questionBox li.question04{-webkit-animation:delay 1s ease 2.1s 1 forwards;animation:delay 1s ease 2.1s 1 forwards;opacity:0;}
#questionBox li.question05{-webkit-animation:delay 1s ease 2.3s 1 forwards;animation:delay 1s ease 2.3s 1 forwards;opacity:0;}
ul.question3Column{width:100%;margin:0 auto 20px;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;justify-content:center;}
ul.question3Column li{margin:0 2% 0 0;}
ul.question3Column li:last-child{margin:0;}
ul.question2Column{width:66%;margin:0 auto 20px;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;justify-content:center;}
ul.question2Column li{margin:0 3% 0 0;}
ul.question2Column li:last-child{margin:0;}
ul.question3Column li a,ul.question2Column li a{width:280px;padding:30px 0;background:#fff;font-size:1.2em;font-weight:bold;color:#000;text-decoration:none;display:block;border:#dcdcdc 2px solid;text-align:center;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}
ul.question3Column li a:hover,ul.question2Column li a:hover{background:#ffe9eb;color:#e40b20;border:#e40b20 2px solid;animation:fadeIn 1s ease 0s 1 normal;-webkit-animation:fadeIn 1s ease 0s 1 normal;}
.pageNumber{color:#e40b20;font-weight:bold;text-align:center;}

#resultTitle{width:100%;margin:110px 0 7px;font-size:1.4em;font-weight:bold;text-align:center;-webkit-animation:delay 1s ease 1s 1 forwards;animation:delay 1s ease 1s 1 forwards;opacity:0;}
#resultBox{width:100%;margin:0 auto 20px;}
#resultBox #resultClass{width:100%;margin:0 0 10px;font-size:5em;font-weight:bold;color:#e40b20;line-height:1;text-align:center;-webkit-animation:delay 2.5s ease 1s 1 forwards;animation:delay 1s ease 2.5s 1 forwards;opacity:0;}
#resultBox dl{width:100%;margin:0 auto 10px;text-align:center;display:block;-webkit-animation:delay 1s ease 3.5s 1 forwards;animation:delay 1s ease 3.5s 1 forwards;opacity:0;}
#resultBox dt{font-size:1.2em;font-weight:bold;margin:0 0 10px;}
#resultBox dt a{color:#e40b20;font-size:1.1em;font-weight:bold;margin-left:5px;}
#resultBox dt a:hover{color:#980816;animation:fadeIn 1s ease 0s 1 normal;-webkit-animation:fadeIn 1s ease 0s 1 normal;}
#resultBox dd{font-size:.9em;}
#resultBox dd a{color:#e40b20;font-size:1.5em;font-weight:bold;margin-left:5px;}
#resultBox dd a:hover{color:#980816;animation:fadeIn 1s ease 0s 1 normal;-webkit-animation:fadeIn 1s ease 0s 1 normal;}

.btn{display:block;margin:0 auto;text-align:center;-webkit-animation:delay 1s ease 4s 1 forwards;animation:delay 1s ease 4s 1 forwards;opacity:0;}
.btn a{background:#fff;border:#e40b20 2px solid;padding:5px 100px;font-size:1.2em;font-family:"NotoSansCJKjp-Bold";color:#e40b20;text-decoration:none;position:relative;display:inline-block;}
.btn a:before{width:10px;height:10px;content:'';border:0;border-top:solid 2px #e40b20;border-right:solid 2px #e40b20;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);position:absolute;top:50%;right:20px;margin-top:-4px;}
.btn a:hover{background:#e40b20;color:#fff;animation:fadeIn 1s ease 0s 1 normal;-webkit-animation:fadeIn 1s ease 0s 1 normal;}
.btn a:hover:before{border-top:solid 2px #fff;border-right:solid 2px #fff;}
.btn a span{font-size:.8em;display:block;}

/* フッター
*****************************************************/
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;background:url(images/bg.png) no-repeat 0 0;}
#mainFrame #airplane{position:absolute;top:20px;right:20px;}
#title01{width:100%;text-align:center;margin:40px 0 20px;}
dl#comment{margin-bottom:20px;}
#questionTitle{font-size:1.5em;}
#questionBox{width:100%;text-align:center;}
ul.question3Column li a,ul.question2Column li a{width:200px;padding:20px 0;font-size:1em;}
.pageNumber{margin-bottom:60px;}
#resultBox dl{margin-bottom:80px;}
header .inner{width:100%;}
footer .inner{width:100%;}
}

/* スマホサイズ（644px）
------------------------------------------------------------*/
@media only screen and (max-width:644px){
.pcDisp{display:none;}
.spDisp{display:block;}
.pcBlock{display:inline;}
.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;}
#mainFrame .inner{padding:10px;}
#topPage #mainFrame #airplane{width:100%;margin:0 0 10px;display:block;text-align:center;position:static;}
#mainFrame #start{margin-bottom:40px;}
#questionPage #mainFrame #airplane{width:100%;margin:0 0 10px;display:block;text-align:left;position:static;}
#title01{margin:0 0 20px;}
#questionTitle{margin:70px 0 20px;font-size:1.2em;}
ul.question3Column,ul.question2Column{width:100%;display:block;margin:0 auto;}
ul.question3Column li,ul.question2Column li{margin:0 !important;}
ul.question3Column li a,ul.question2Column li a{width:80%;margin:0 auto 10px;}
.pageNumber{margin:10px auto 30px;}
#resultBox #resultClass{font-size:3em;}
#resultBox dl{margin-bottom:40px;}
#resultBox dt{font-size:1em;}
}