﻿/* Reset */
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,soup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,#header,.header,hgroup,menu,nav,output,ruby,.section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:14px;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,#header,.header,hgroup,menu,nav,.section,.row{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
body {font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif; background-color:transparent/*#00a0e2*/; width:100%; text-align:center}
a {text-decoration:none}
/*a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha( opacity=80 )";}*/
a:focus { outline:none;}
button:focus { border:none; outline:none !important;}
img{margin:0 auto;max-width:100%; height:auto; /*display:block*/}
p, dt,dd,tr,td,li { line-height:1.6em; letter-spacing:1px;color:#333333;}
p{color:#333333;margin-bottom:2%; text-align:left}
iframe {  border: none;  outline: none;}
.left{float:left; }
.right{float:right;}
.bold{font-weight:bold}
.br{display:inline-block}
br.br_sp,br.br_pd{display:none}
span.br_pc{display:block;}
.margin_top{padding-top:1em}
/* header */
#header{background-color:#fff; }
#header .inner{position:relative; height:123px;margin: 0 auto;}
#header .logo_main{position:absolute;top:22%;left: 0;right: 0;bottom: 0;margin: auto;width:70%; min-width:440px}
.head_sns_counter{width:100%; display:inline; margin-bottom:10px;}
#header .inner{padding-top:2px}
#header .head_sns{display:inline-block;width:auto; margin-right:2%}
.icn_fb{width:30px; float:left; margin-right:10px}
.icn_tw{width:30px; float:left}
#header .counter{position:relative; right: 0; top: 0; width:30%; height:28px; border:solid 1px #cc3333; text-align:center; padding:2px; display:inline-block;}
.counter .txt{color:#cc3333; font-size:8px; margin-bottom:1%}
.counter p{color:#cc3333; font-size:12px; text-align:center;line-height:1.2em}
/* nav */
nav{width:100%; background-color:#cc9900;}
nav ul{ font-size:0; margin:0 auto;}
nav ul li{display:inline-block;}
/* floating_bnr */
#ad_bg{/*width:116px;height:88px;*/ bottom:0; position:absolute !important;margin-top:50px; top:0;right:0;z-index:90;}
#ad_bg .close {position:absolute; top:0; right:0;  cursor:pointer; text-align:center; width:18px; height:18px; margin-right:2px;color:#000; line-height:1em; font-family: Arial, Baskerville, monospace;font-size:23px; font-weight:bold;}
#ad{margin-top:4px}
/* container */
#container{width:100%; overflow:hidden;}
.inner{width:100%; max-width:768px; margin:0 auto}
#container h1{font-size: 20px; line-height: 1.4em; margin-bottom: 0.6em;font-weight: bold;}
#container h2{background-image:url(/naniwa/images/title_bar.jpg);color:#fff; font-size:20px;height:40px;line-height:40px; margin-bottom:2%}
.start{margin:2% auto}
.rmd{margin-bottom:2%}
#top ul{ font-size:0; margin:0 auto; margin-bottom:3.3%; padding-top:3%}
#top ul li{display:inline-block; margin-right:70px;}
#top ul li:nth-child(3){margin-right:0}
.box{border-right: solid 1px #666666; border-left: solid 1px #666666; border-bottom: solid 1px #666666; background-color:#fff;overflow:hidden;clear:both}
.box_inner{width:90%;margin:0 auto; margin-bottom:40px}
#lead,#news,#topics,#policy,#fun,#download,#movie{margin-bottom:3.3%}
/* lead */
#lead p{text-align:center}
ul.half li { display: inline-block;  vertical-align: top;  margin: 0 14px; margin-bottom: 2%; }
#lead ul li p{width:320px; text-align:left}
/*news */
table.news {width: 100%;border-collapse: separate; box-sizing: border-box;-webkit-box-sizing: border-box; margin-bottom:2%; display: flex;height:160px; overflow-y:scroll;}
table.news tbody { display: block;  margin: auto 0;}
table.news tr {text-align: left;}
table.news tr td {padding: 0 40px;box-sizing:border-box;}
table.news tr td + td { padding: 0 10px}
/* movie */
.movie-wrap{width:96%;margin-bottom:2%;max-width: 560px; max-height:315px;margin: 0 auto;position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}
.movie-wrap iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#movie{padding-bottom:2%}
/* sponsor */
ul.sponsors{margin:0 auto;overflow:hidden; margin-bottom:3%}
ul.sponsors li {display:inline-block; margin:10px 20px}
ul.sponsors li img{width:auto;}
/* fun */
#fun ul{overflow:hidden;clear:both;}
#fun ul li {display:inline-block; margin:4px; border:solid 2px #cc3333; color:#cc3333; width:174px }
#fun ul li a {color:#cc3333; display:block;padding:6px 10px; font-weight:bold}
#fun ul li a:hover, #fun ul li.active a{background-color:#cc3333; color:#fff}
/* topics */
#topics h3{font-size:20px; color:#cc3333; border-bottom:dotted 2px #cc3333; padding-bottom:4px; margin-bottom:4px;text-align:left;}
#topics p{text-align:left;}
#topics ul{width:96%; margin:0 auto; overflow:hidden}
#topics ul li{border-bottom:solid 1px #666666; clear:both; overflow:hidden; padding:2% 0}
#topics ul li img{float:left; width:33%;padding-right:2%; padding-bottom:1% }
#topics ul li h3{width:64%; float:right}
#topics ul li:last-child{border:none}
#topics ul.indent{width:100%; margin:0; }
#topics ul.indent li{text-align:left; padding: 0 0 1% 0;text-indent:-1.6em; padding-left:1.6em; border:none;}
#topics ul.indent.paceadv,#topics ul.indent.pacebg{width:62%; }
#topics ul.indent.pacebg{width:62%; }
#topics ul li hr{border:dotted 1px #666; clear:both}
/* archives */
#archives ul{width:98%; margin:0 auto; }
#archives ul li {width:30%; display:inline-block}
#archives{padding-bottom:6%}
/* others */
#others ul{width:98%; margin:0 auto; }
#others ul li {width:30%; display:inline-block}
#others{padding-bottom:6%}
/* qa */
#qa h3{color: #d93c41; font-weight:bold; text-align:left; font-size:18px; margin:4% auto}
.que, .ans { background-size:5% auto; line-height:24px; padding-left:60px; padding-top:10px; padding-bottom:20px;text-align:left}
.que {background: url(../img/icn_que.png) no-repeat top left }
.ans{background: url(../img/icn_ans.png) no-repeat top left;  padding-bottom:30px; border-bottom:1px solid #CCC; margin-bottom:20px}
ul.qa_index {clear:both; width:101.2%; margin-right:-1.2%;overflow:hidden ; padding:2% 0;border-bottom:1px solid #CCC; margin-bottom:2%}
.triangle{width: 0px;height: 0px;border-style: solid;border-width: 8px 0 8px 12px;border-color: transparent transparent transparent #cc3333; float:left; margin-right:4px; margin-top:2px}
ul.qa_index li a {float:left; margin-right:1.2%; display:block; padding:6px 5px; text-decoration:none; color:#cc3333; font-weight:bold; border:solid 2px #cc3333;margin-bottom:6px;}
.totop { width:100%;  text-align:right; margin-bottom: 10px;}
.totop a { text-decoration:none; color:#000;}
/* footer */
#footer{background-color:#eeeeee; clear:both; line-height:1.0em}
#footer .inner{ padding-top:20px}
#ft_tit{background-color:#dbdbdb; color:#00a0e2; text-align:center; box-sizing:border-box;padding:2px 10px;font-weight:bold;line-height:1.6em;letter-spacing:4px;font-size:14px;}
span.ft_br{margin-left:3%;}
#ft_cont{position:relative;background-color:#eeeeee;clear:both}
#ft_cont,#ft_cont a{color:#00a0e2; font-size:12px; letter-spacing:2px}
#ft_cont .links {margin-bottom:20px}
#ft_cont .links li,#ft_cont .links li a{color:#999999; }
#ft_cont .links li{display:inline-block; border:solid 2px #c1c1c1;letter-spacing:1px;margin:0 3px; margin-bottom:10px;vertical-align:bottom;padding:4px 6px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}
#ft_cont .app .txt{display:inline-block;color:#666;font-weight:bold;border:solid 2px #999; margin-bottom:10px;vertical-align:bottom;padding:4px 10px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}
#ft_cont ul.ent_app{margin-top:10px;margin-bottom:30px;}
#ft_cont ul.ent_app li{width:160px;display:inline-block;margin:0 5px;margin-bottom:10px;}
#ft_cont .contact {margin:0 auto;margin-bottom:50px;text-align:center;;font-weight:bold;}
#ft_cont .contact a{position:relative}
#ft_cont .contact a:after {
    content: ' ';
    position: absolute;
    right: -14px;
    top: 5px;
    width: 0px;
    height: 0px;
    border-top: 5px solid rgba(0, 0, 0, 0);
    border-bottom: 5px solid rgba(0, 0, 0, 0);
    border-left: 8px solid #00a0e2;
    border-right: 0px solid rgba(0, 0, 0, 0);
}
#ft_logo img{ display: block;margin:0 auto }
#ft_logo .logo_line{height:34px; background-color:#00a0e2;text-align:center}
/* to top */
.pagetop {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
}
.pagetop a {
    display: block;
    background-color: #808080;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    /*background-color: #b2d1fb;*/
	background-color: #999999;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
/* fee */
#fee p, #fee h3 { text-align:left; margin:30px auto 10px;color:#000;padding-left:0;}
#fee p a {color:#008080; text-decoration:underline}
.page-header {border-bottom: 3px solid #000000; font-size:38px; line-height:42px;color:#000000; font-weight:bold; margin-bottom:20px; text-align:left}
table.fee{margin-top:10px; width:100%; max-width:600px; }
table.fee tr{border-bottom:none}
table.fee tr td{border: solid 1px #999; font-weight:normal;padding:4px 10px; text-align:left }
table.fee tr th{color:#fff;padding:6px 10px 4px 10px; text-align:left;font-weight:bold; letter-spacing:1px;font-size:18px}
table.fee tr td:nth-child(2){white-space: nowrap;  width:100px;text-align:right; vertical-align:bottom}
table.rd th{background-color:#d93c41; border: solid 1px #d93c41; }
table.rd tr td{border: solid 1px #d93c41;}
table.og th{background-color:#ff9c31; border: solid 1px #ff9c31;}
table.og tr td{border: solid 1px #ff9c31;}
#access p{color:#000; margin-bottom:10px}
#access iframe{border:solid 1px #d93c41}
.btn a {display:block;color:#fff;font-size:18px}
.btn{width:280px; max-width:100%; margin:0 auto;line-height:1.6em;font-weight:bold;color:#fff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;padding:12px 4px;}
.btn.bl{background-color:#6ccbf4;}
.btn.rd{background-color:#d93c41;}
.btn.wt{background-color:#fff; margin-top:40px}
.btn.wt a{color:#d93c41;}
/* result */
.block#top_30{margin-top:0}
.result .block{padding-top:40px; padding-bottom:50px}
.result h2{color:#996;font-size:26px}
table.tbl_rt{margin:0 auto;margin-top:10px; width:48%; max-width:100%; }
table.tbl_rt tr{border-bottom:none}
table.tbl_rt tr td{font-weight:normal;padding:4px; text-align:left }
table.tbl_rt tr th{color:#fff;padding:6px;background-color:#996; text-align:center;font-weight:bold; letter-spacing:1px;font-size:20px;padding-top:8px;margin-bottom:6px}
table.tbl_rt a{color:#262626; text-decoration:underline; padding:8px 2px;display:inline-block}
#result{margin-bottom:3.3%;}
/* voice */
ul.photo li,ul.msg li{width:31.4%; margin:0.8%;display:inline-block;}
/* guest */
.role{display:block;font-size:20px;font-weight:bold; color:#d93c41; margin-bottom:1.4%}
ul.gst {overflow:hidden}
ul.gst li{border-bottom:solid 1px #666666; clear:both; overflow:hidden; padding:1em 0}
ul.gst li:last-child{border:none;padding-bottom:0}
ul.gst li img{width:44%; margin-right:4%;margin-bottom:2%;vertical-align:top; float:left}
ul.gst li h3{font-weight:bold; margin-bottom:2%; text-align:left}
/* pacemaker */
ul.pacemaker{display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;width:100%;}
ul.pacemaker{-webkit-box-pack:start;-moz-box-pack:start;-webkit-flex-pack:start;-moz-flex-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;-moz-justify-content:flex-start;justify-content:flex-start;}
ul.pacemaker li{width:30%; margin:1.6%; }
ul.pacemaker li .name{font-weight:bold; margin:0.4em 0}
ul.pacemaker li p{font-size:12px; margin:0.4em auto}
@media (min-width:768px){
#overview table tr th,
#overview table tr td {
padding: 20px 20px;
border: 1px solid #fff;
}
#overview table tr th {
width: 90px;
background: #d93c41;
color: #fff;
text-align: center;
}
#overview table tr td {
background: #eee;text-align:left; 
}
#overview table tr:nth-child(odd) td {
background: #f2f2f2;
}
#overview table span {  font-weight: bold;
}
/* fee */
#access p, #access iframe{width:80%; margin:10px auto}
#result .box_inner{width:96%}
}
@media (max-width:767px){
.inner{width:96%;}
#lead p{width:96%; margin:0 auto; margin-bottom:20px}
#lead ul li p{width:100%; text-align:center}
/* nav */
nav ul li{width:12.4%;}
/* top */
.start{width:50%}
#top ul li{display:inline-block; margin:2% 1%}
#header .counter{width:40%;}
.counter .txt{color:#cc3333; font-size:6px;}
/* topics */
#topics ul li{padding:4% 0}
#topics ul.indent.paceadv{width:100%; }
/* overview */
#overview table {width: 100%;margin:0 auto;margin-bottom: 10px;  }
#overview table tr th,
#overview table tr td {padding: 20px 3%;border: 1px solid #fff;display: block;}
#overview table tr th {background: #d93c41;color: #fff;text-align: center;}
#overview table tr td {background: #eee;text-align:left}
#overview table tr td:first-child {background: #0192cb;color: #fff;text-align: center;font-size: 12px;}
#overview table tr td span {/*background: #0192cb;*/color: #fff;padding: 5px;margin-right:10px;display: inline-block;}
/* result */
table.tbl_rt{width:100%; max-width:480px; float:none}
table.tbl_rt a {padding:12px 2px}
/* voice */
ul.photo li,ul.msg li{width:46%; margin:1.2%;}
}
@media (max-width:480px){
p, td, .que, .ans, .inner li{font-size:14px}
#overview table tr th,table.tbl_rt tr th{font-size:16px}
#container h2{font-size:18px}
br.br_sp{display:block}
span.br_pc{display:inline;}
#header .inner{height:80px;}
#header .logo_main{position:absolute;top:55%;left: 0;right: 0;bottom: 0;margin: auto;width:70%; min-width:440px}
#header .logo_main{width:100%;min-width:200px}
#header .counter{width:52%;}
.counter .txt{color:#cc3333; font-size:5px;}
.margin_top{padding-top:4%}
/* nav */
nav ul li{width:20%;}
/*lead */
#lead p{margin-bottom:10px}
/* news */
table.news tr td {padding:10px 6px 10px 14px}
table.news tr td + td {padding:10px 14px 10px 6px}
/* fun */
h2#advanced, h2#beginner, h2#person, h2#repeater{font-size:16px}
#fun ul li {margin:1%;width:46%; min-width:150px }
#fun ul li a {padding:1%}
#topics h3{font-size:16px}
#topics p {clear:both}
#topics ul.indent.pacebg{width:100%; }
/* result */
table.tbl_rt tr td{display:block; text-align:center}
/* voice */
ul.photo li,ul.msg li{width:100%; margin:0 auto; max-width:260px}
/* guest */
ul.gst li img{ width:100%; margin:0 auto; max-width:300px;margin-bottom:4%; float:none; clear:both}
ul.gst li h3{text-align:center}
ul.pacemaker li{width:48%; margin:1%; }
/* footer */
#ft_tit{letter-spacing:1px;}
#ft_logo img{ width:90%;height:auto;max-width:320px;}
}
@media (max-width:400px){
.counter .txt{color:#cc3333; font-size:4px;}
.counter p{color:#cc3333; font-size:6px; text-align:center}
#lead p,#lead ul li p{text-align:left}
#fun ul li {font-size:13px;}
table.news {height:200px;}
/* qa */
ul.qa_index li a{float:none; margin-bottom:10px}
/* nav */
nav ul li{width:25%;}
}
/* entry shedule */
ul.sch {padding-top: 4%;}
ul.sch li.menu-item {width: 80%;text-align: center;margin: 0 auto;margin-bottom: 4%;
}
ul.sch li {width: 24%;max-width: 400px;margin: 0 0.5%;padding: 1%;background-color: #fff;margin-bottom: 3%;font-size: 14px;border: solid 5px #c49b33;
}