@charset "utf-8";

/***************************************************

body

**************************************************/

body {
color: #333333;
/*
background: #ffffff url(../images/bg_body.jpg) repeat-x left top;
*/
text-align: center;
}

.empty {
background: none;
}

/***************************************************
font-size

10px => 77%       11px => 85%       12px => 93%
13px => 100%      14px => 108%      15px => 116%
16px => 123.1%    17px => 131%      18px => 138.5%
19px => 146.5%    20px => 153.9%    21px => 161.6%
22px => 167%      23px => 174%      24px => 182%
25px => 189%      26px => 197%

**************************************************/

body {
font-size: 13px;
* font-size: small;
* font: x-small;
font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;
line-height: 1.6;
}

select,
input,
button,
textarea {
font: 99% "メイリオ", "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;
}

table {
font-size: inherit;
font: 100%;
}

pre,
code,
kbd,
samp,
tt {
font-family: monospace;
* font-size: 108%;
line-height: 100%;
}


/***************************************************

link

**************************************************/

a:link,
a:visited {
color: #006699;
text-decoration: underline;
}

a:hover,
a:active {
color: #006699;
text-decoration: none;
}


/***************************************************

header

***************************************************/
#header_contents {
min-width: 990px;
background: #ffffff url(../images/bg_header_contents.jpg) repeat-x left top;
}
#header {
min-width: 990px;
background: url(../images/bg_header.jpg) no-repeat center top;
}

#header .inner {
position: relative;
width: 990px;
height: 128px;
margin: 0 auto;
text-align: left;
}

#header .nhkLogo,
#header .summary,
#header .siteLogo,
#header .search { position: absolute;}

#header .nhkLogo { top: 10px; right: 0;}
#header .summary { top: 16px; left: 3px;}
#header .siteLogo { top: 68px; left: 0;}
#header .search { top: 70px; right: 0;}

#header .search { overflow: hidden;}

#header .search form {
overflow: hidden;
float: left;
width: 396px;
height: 30px;
margin: 0 10px 0 0;
padding: 5px 4px 5px 10px;
background: url(../images/bg_search.png) no-repeat left top;
}

#header .search form input { vertical-align: middle;}

#header .search #btn_header_search{
width:30px;
height:30px;
border:0px;
background: url(../images/btn_search.png) left top no-repeat;
}

#header .search form .keyword {
float: left;
width: 356px;
margin: 0 10px 0 0;
padding: 0 0 0 0;
height: 30px;
line-height: 30px;
color: #666666;
border: none;
outline: none;
background: none;
font-size: 108%;
}

#header .search .hint {
float: left;
margin: 0 0 0 0;
padding: 2px 0 0 0;
}

/***************************************************

nav

***************************************************/
#nav_contents {
min-width: 990px;
background: #ffffff url(../images/bg_nav_contents.jpg) repeat-x left top;
}
#nav {
overflow: hidden;
width: 990px;
margin: 0 auto;
background: url(../images/bg_nav.png) no-repeat left 8px;
font-size: 123.1%;
font-weight: bold;
}

#nav li {
float: left;
background: url(../images/bg_nav_li.png) no-repeat right 8px;
}

#nav li.lastChild {
float: right;
}

#nav a {
display: block;
/*width: 157px;*/
/*width: 130px;*/
width: 118px;
height: 39px;
line-height: 39px;
}
#nav li:nth-last-child(2) a {
width: 100px;
}
#nav li:last-child a {
width: 180px;
}

#nav a:link,
#nav a:visited {
color: #fff;
text-decoration: none;
}

#nav a:hover,
#nav a:active {
color: #ffe2b3;
text-decoration: none;
}

#nav li.current a {
color: #f90;
background: url(../images/bg_nav_current.png) no-repeat center 5px;
}

#empty_nav {
overflow: hidden;
width: 990px;
height: 39px;
margin: 0 auto;
font-size: 123.1%;
font-weight: bold;
}

/***************************************************

contents

***************************************************/

#contents {
width: 990px;
padding: 34px 0 50px;
margin: 0 auto;
font-size: 123.1%;
text-align: left;
}

#contents h1 {
padding: 14px 10px 5px;
border-bottom: solid 1px #ff7f00;
font-size: 150%;
font-weight: bold;
}

#contents_enquete {
width: 680px;
padding: 34px 0 50px;
margin: 0 auto;
font-size: 123.1%;
text-align: left;
}

#contents_enquete h1 {
padding: 14px 10px 5px;
border-bottom: solid 1px #ff7f00;
font-size: 150%;
font-weight: bold;
}

/***************************************************

bnr

***************************************************/

#bnr {
padding: 20px;
background: #ededed;
}

#bnr ul {
overflow: hidden;
width: 990px;
margin: 0 auto;
}

#bnr ul li {
float: left;
margin: 0 20px 0 0;
}


/***************************************************

footer

***************************************************/

#footer {
padding: 20px;
background: #dcdcdc;
}

#footer .inner {
position: relative;
width: 920px;
margin: 0 auto;
padding: 0 0 0 70px;
font-size: 93%;
text-align: left;
}

#footer .inner .nhkLogo {
position: absolute;
top: 0;
left: 0;
}

#footer .inner ul {
overflow: hidden;
padding: 5px 0;
margin: 0 0 5px 0;
line-height: 1;
}

#footer .inner ul li { float: left;}

#footer .inner ul li + li {
margin: 0 0 0 10px;
padding: 0 0 0 10px;
border-left: solid 1px #999999;
}

#footer .inner ul li a:link,
#footer .inner ul li a:visited {
color: #333333;
text-decoration: none;
}

#footer .inner ul li a:hover,
#footer .inner ul li a:active {
color: #333333;
text-decoration: underline;
}


/***************************************************

TOP

***************************************************/

/* cloud
--------------------------------------------------*/
.cloud {
min-width: 990px;
background: url(../images/index_bg_cloud.png) no-repeat center top;
}

/* introduction
--------------------------------------------------*/
.introduction {
  min-height: 132px;
  margin: 0;
  padding: 10px 0 0 120px;
  background: url(../images/index_img_chara02.png) no-repeat left top;
  margin-bottom: 30px;
}

.introduction dt {
margin: 0 0 12px 0;
font-size: 150%;
font-weight: bold;
}

/* notice
--------------------------------------------------*/
#notice {
    width: 908px;
    margin: 0 auto 30px;
}
#notice > * {
    display: inline-block;
    vertical-align: middle;
}
#notice .title {
    background: url(../images/info_bg_balloon.png) no-repeat;
    background-size: contain;
    width: 114px;
    height: 107px;
    text-align: center;
    color: #22A7A8;
    font-size: larger;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
}

#notice ul {
    width: 778px;
}
#notice ul li {
    border-bottom: 1px solid #52C0DE;
    line-height: 2em;
    color: #3478A0;
}

/* notice_overview
--------------------------------------------------*/
#notice_overview {
    width: 908px;
    margin: 0 auto 30px;
}
#notice_overview > * {
    background: url(../images/info_bg.png) no-repeat;
    display: inline-block;
    background-size: cover;
    width: 451px;
    height: 240px;
    vertical-align: top;
}
#notice_overview > div .crop img {position:absolute; bottom:-3px;}
#notice_overview > div:nth-child(2) .crop img {position:absolute; left:-46px;}
#notice_overview .crop {
    overflow: hidden;
    position: relative;
    width:46px; height:51px;
}
#notice_overview .title > p:nth-child(2) {
    margin-left:5px;
    color:#14A9A8;
    font-weight:bold; font-size:large;
}
#notice_overview .title > * {display:inline-block; vertical-align:middle;}
#notice_overview .title {padding:11px;}
#notice_overview .desc {padding:7px 30px 0;}
#notice_overview .detail_link {padding-right:30px; float:right;}


/* message
--------------------------------------------------*/
#message {
    background: url(../images/index_img_message.png) no-repeat;
    background-size: cover;
    width: 778px;
    height: 305px;
    vertical-align: top;
    margin:0 auto 30px;
}
#message > div {padding: 43px 79px 43px 107px;}
#message p {
    font-size: 16px;
    line-height: 150%;
    padding-bottom: 6px;
}
#message p.title {
    font-weight: bold;
}


/* pickup
--------------------------------------------------*/
.pickup {
overflow: hidden;
margin: 0 0 30px 0;
padding: 11px;
background: url(../images/index_bg_pickup.png) no-repeat left top;
}

.pickup h2 {
float: left;
width: 146px;
}

.pickup .txt {
float: right;
width: 795px;
padding: 20px 0 0 0;
}

.pickup .txt h3 {
margin: 0 0 10px 0;
font-size: 150%;
font-weight: bold;
}

.pickup .txt .movie {
float: left;
width: 170px;
margin: 0 20px 0 0;
font-size: 75%;
text-align: center;
}

.pickup .txt .movie .btn { margin: 0 0 5px 0;}

.pickup .txt p {
/zoom: 1;
overflow: hidden;
}

.pickup .txt .btnM {
float: right;
margin: 10px 0 0 0;
}

.pickup .txt .btnM a { padding: 0 25px 0 56px;}

.pickup .txt .btnM img {
top: 7px;
left: 15px;
}

/* examine
--------------------------------------------------*/
.examine {
overflow: hidden;
margin: 0 0 30px 0;
padding: 11px;
background: url(../images/index_bg_examine.png) no-repeat left top;
}

.examine h2 {
float: left;
width: 146px;
padding: 0 25px 0 0;
}

.examine .search {
overflow: hidden;
float: left;
width: 797px;
padding: 15px 0 0 0;
}

.examine .search form {
/zoom: 1;
overflow: hidden;
float: left;
width: 482px;
height: 38px;
margin: 0 10px 0 0;
padding: 4px 4px 4px 10px;
background: url(../images/index_bg_search.png) no-repeat left top;
}

.examine .search form input { vertical-align: middle;}

.examine .search #btn_search {
width:37px;
height:37px;
border:0px;
background: url(../images/index_btn_search.png) left top no-repeat;
}

.examine .search form .keyword {
float: left;
width: 435px;
margin: 0 10px 0 0;
padding: 0;
height: 38px;
line-height: 38px;
color: #666666;
border: none;
outline: none;
background: none;
}

.examine .search .hint {
float: left;
margin: 0 10px 0 0;
padding: 5px 0 0 0;
}

.examine .search .btnL { float: left;}

.examine .search .btnL a { padding: 0 30px 0 58px;}

.examine .search .btnL img {
top: 9px;
left: 10px;
}

/* wrap
--------------------------------------------------*/
.wrap { overflow: hidden;  clear:both;}

.wrap_enquete {
    overflow: hidden;
    margin: 0 auto;
    /*text-align: center;*/
    width: 680px;
}

/* column
--------------------------------------------------*/
.column {
position: relative;
float: left;
width: 680px;
background: #d0f0f0;
}

.column .inner { padding: 15px 20px 20px;}

.column h2 { margin: 0 0 15px 0;}

.column .btn {
position: absolute;
top: 20px;
right: 20px;
}

.column .btn .btnS a { padding: 0 40px 0 6px;}

.column .btn .btnS img {
top: 8px;
right: 10px;
}

.column h3 {
margin: 0 0 10px 0;
border-top: solid 1px #15b2b3;
border-bottom: solid 1px #15b2b3;
font-size: 150%;
font-weight: bold;
}

.column h3 span { font-size: 75%;}

.column .imgR {
float: right;
display: inline;
margin: 0 0 20px 20px;
}

.column .imgL {
float: left;
display: inline;
margin: 0 20px 20px 0;
}

/* top_inner_search
--------------------------------------------------*/
.top_resultarea{
  border: 1px solid #15B2B3;
    float: left;
    position: relative;
    width: 670px;
    clear:both;
    margin-left:10px;
}

/* notes
--------------------------------------------------*/
.notes {
float: right;
width: 280px;
}

.notes p {
margin: 16px 0 0 0;
font-size: 87.5%;
}


/***************************************************

FEEDBACK

***************************************************/

/* player
--------------------------------------------------*/
.player {
width: 360px;
margin: 0 auto;
}

/* opinion
--------------------------------------------------*/
.opinion {
float: left;
width: 680px;
}

.opinion .crop {overflow: hidden; position: relative; width: 29px; height: 23px; display:inline-block;}
.opinion .crop.icon_midashi1 img {}
.opinion .crop.icon_midashi2 img {margin-left:-29px;}
.opinion .crop.icon_midashi3 img {margin-left:-58px;}
.opinion .crop.icon_midashi3 {position:relative;}
.opinion .crop.icon_midashi3 img {position:absolute;}

/* main_opinion */
.main_opinion {margin-bottom:35px;}
#main_opinion_item {color: #55B9DC; margin:5px;}

.opinion_item, #opinion_item      {color: #109495;}


.opinion h3 {
margin: 0 0 15px 0;
font-size: 125%;
font-weight: bold;
text-align: center;
}

#opinion_item .crop,
#mail_opinion_list .crop {vertical-align:middle;}
.opinion .main_opinion ul li{
border-width:0 0 5px 0;
border-image:url(../images/info_shadow.png) 200 stretch;
text-indent:-29px;
padding-left:29px;
}

.opinion dl {
margin: 0 0 20px 0;
padding: 10px;
background: #e8e8e8;
}

.opinion dt {
margin: 0 0 3px 0;
font-weight: bold;
}

.opinion dd { font-size: 87.5%;}

.opinion table {
width: 100%;
margin: 0 0 30px 0;
border-top: solid 1px #15b2b3;
}

.opinion table th {
width: 22%;
padding: 12px 15px;
color: #028f90;
border-bottom: solid 1px #15b2b3;
background: #d0f0f0;
font-weight: bold;
vertical-align: top;
}

.indispensable{
    color: #E30000;
    font-size: 15px;
    font-weight: bold;
    margin-left: 3px;
    margin-right: 3px;
    vertical-align: top;
}
.able {
    color: #2A2A2A;
    font-size: 12px;
    text-align: right;
}

.opinion table td {
width: 80%;
padding: 12px 15px;
border-bottom: solid 1px #15b2b3;
font-size: 87.5%;
vertical-align: top;
}

.opinion table td .vertical li + li { margin: 5px 0 0 0;}

.opinion table td .horizon { overflow: hidden;}

.opinion table td .horizon li { float: left;}

.opinion table td .horizon li + li { margin: 0 0 0 15px;}

.opinion table td input { vertical-align: middle;}

.opinion table td input[type=radio] { margin: 0 5px 0 0;}

.opinion table td input[type=text] {
margin: 0 5px 0 0;
width: 4em;
}

.opinion table td textarea {
width: 99%;
height: 8em;
}

form .btn { text-align: center;}

form .btn input {
display: block;
height: 55px;
width: 290px;
margin: 0 auto;
padding: 0 0 0 38px;
color: #ffffff;
border: none;
background: url(../images/btn_submit.png) no-repeat left top;
font-size: 125%;
font-weight: bold;
line-height: 55px;
text-align: left;
cursor: pointer;
}
form .btn_check {
  overflow:hidden;
}

form .btn_check input {
    float:left;

display: block;
height: 55px;
width: 290px;
margin: 0;
padding: 0 0 0 38px;
color: #ffffff;
border: none;
background: url(../images/btn_submit.png) no-repeat left top;
font-size: 125%;
font-weight: bold;
line-height: 55px;
text-align: left;
cursor: pointer;
}
form .btn_check input.back {
    float:left;

display: block;
height: 55px;
width: 290px;
margin-right:20px;
margin-left:50px;
padding: 0 0 0 70px;
color: #ffffff;
border: none;
background: url(../images/btn_submit_back.png) no-repeat left top;
font-size: 125%;
font-weight: bold;
line-height: 55px;
text-align: left;
cursor: pointer;
}

/***
 * movie button
 ***/
.speed_button{
padding:17px 0;
}
.speed_button div{
  color:#bbb;
  font-weight:bold;
  width:150px;
  padding:5px;
  background-color:#444;
  display:inline-block;
  border-radius: 5px;
  cursor:pointer;
}
.speed_button a.btn{
  display:block;
  color:#fff;
  font-weight:bold;
  width:190px;
  height:46px;
  background: url(../images/btn_movie_slow.png);
  background-size: 100% auto;
  display:inline-block;
  cursor:pointer;
  text-decoration:blink;
  line-height:3em;
  margin:0 25px;
  text-indent: 10px;
}
.speed_button .on,
.speed_button a.on.btn{
  background: url(../images/btn_movie_normal.png);
  background-size: 100% auto;
}

/***************************************************

THANKS

***************************************************/

/* thanks
--------------------------------------------------*/
.thanks {
width: 670px;
padding: 0 0 0 10px;
text-align: center;
}

.thanks h2 {
color: #ff7f00;
font-size: 125%;
font-weight: bold;
}

.thanks h2 span { font-size: 120%;}

.thanks .btnLL { display:table; margin:40px auto 0;}

.thanks .btnLL a { padding: 0 70px 0 25px;}

.thanks .btnLL img {
top: 18px;
right: 25px;
}


/***************************************************

common class

***************************************************/

/* hgroup
--------------------------------------------------*/
.hgroup {
min-height: 113px;
background: url(../images/img_chara01.png) no-repeat right top;
}

.hgroup h1 { margin: 0 140px 15px 0;}

.hgroup h2 {
margin: 0 0 12px 0;
padding: 0 150px 0 30px;
font-size: 175%;
font-weight: bold;
}

.hgroup p.word_read {
padding: 0 150px 0 30px;
font-weight: bold;
}
/* section
--------------------------------------------------*/
.section {
padding: 0 30px;
text-align: center;
}

/* btnSS
--------------------------------------------------*/
.btnSS {
position: relative;
padding: 0 0 0 4px;
background: url(../images/bg_btn_ss_l.png) no-repeat left top;
font-size: 112.5%;
font-weight: bold;
}

.btnSS a {
display: block;
height: 28px;
padding: 0 25px 0 20px;
background: url(../images/bg_btn_ss_r.png) no-repeat right top;
line-height: 28px;
}

.btnSS a:link,
.btnSS a:visited,
.btnSS a:hover,
.btnSS a:active {
color: #ffffff;
text-decoration: none;
}

.btnSS img { position: absolute;}
/* btnS
--------------------------------------------------*/
.btnS {
position: relative;
padding: 0 0 0 6px;
background: url(../images/bg_btn_s_l.png) no-repeat left top;
font-weight: bold;
}

.btnS a {
display: block;
height: 34px;
padding: 0 12px 0 6px;
background: url(../images/bg_btn_s_r.png) no-repeat right top;
line-height: 34px;
}

.btnS a:link,
.btnS a:visited,
.btnS a:hover,
.btnS a:active {
color: #ff9900;
text-decoration: none;
}

.btnS img { position: absolute;}

/* btnM
--------------------------------------------------*/
.btnM {
position: relative;
padding: 0 0 0 5px;
background: url(../images/bg_btn_m_l.png) no-repeat left top;
font-size: 112.5%;
font-weight: bold;
}

.btnM a {
display: block;
height: 35px;
padding: 0 25px 0 20px;
background: url(../images/bg_btn_m_r.png) no-repeat right top;
line-height: 35px;
}

.btnM a:link,
.btnM a:visited,
.btnM a:hover,
.btnM a:active {
color: #ffffff;
text-decoration: none;
}

.btnM img { position: absolute;}

/* btnL
--------------------------------------------------*/
.btnL {
position: relative;
padding: 0 0 0 5px;
background: url(../images/bg_btn_l_l.png) no-repeat left top;
font-size: 125%;
font-weight: bold;
}

.btnL a {
display: block;
height: 46px;
padding: 0 30px 0 25px;
background: url(../images/bg_btn_l_r.png) no-repeat right top;
line-height: 46px;
}

.btnL a:link,
.btnL a:visited,
.btnL a:hover,
.btnL a:active {
color: #ffffff;
text-decoration: none;
}

.btnL img { position: absolute;}

/* btnLL
--------------------------------------------------*/
.btnLL {
position: relative;
padding: 0 0 0 5px;
background: url(../images/bg_btn_ll_l.png) no-repeat left top;
font-size: 125%;
font-weight: bold;
}

.btnLL a {
display: block;
height: 55px;
padding: 0 30px 0 25px;
background: url(../images/bg_btn_ll_r.png) no-repeat right top;
line-height: 55px;
}

.btnLL a:link,
.btnLL a:visited,
.btnLL a:hover,
.btnLL a:active {
color: #ffffff;
text-decoration: none;
}

.btnLL img { position: absolute;}

/* text-alignt
--------------------------------------------------*/
.taL { text-align: left !important;}
.taR { text-align: right !important;}
.taC { text-align: center !important;}

/* vertical-alignt
--------------------------------------------------*/
.vaT { vertical-align: top !important;}
.vaB { vertical-align: bottom !important;}
.vaM { vertical-align: middle !important;}

/* float
--------------------------------------------------*/
.flL { float: left;}
.flR { float: right;}

.clrFix { /zoom: 1;}
.clrFix:after {
content: '';
display: block;
clear: both;
line-height: 0;
font-size: 0.1em;
}

/* font-weight
--------------------------------------------------*/
.fwB { font-weight: bold !important;}

/* font-size
--------------------------------------------------*/
.fs10 { font-size: 77% !important;}

/* margin
--------------------------------------------------*/
.mt01 { margin-top:1px !important;}
.mt02 { margin-top:2px !important;}
.mt03 { margin-top:3px !important;}
.mt04 { margin-top:4px !important;}
.mt05 { margin-top:5px !important;}
.mt06 { margin-top:6px !important;}
.mt07 { margin-top:7px !important;}
.mt08 { margin-top:8px !important;}
.mt09 { margin-top:9px !important;}
.mt10 { margin-top:10px !important;}
.mt11 { margin-top:11px !important;}
.mt12 { margin-top:12px !important;}
.mt13 { margin-top:13px !important;}
.mt14 { margin-top:14px !important;}
.mt15 { margin-top:15px !important;}
.mt16 { margin-top:16px !important;}
.mt17 { margin-top:17px !important;}
.mt18 { margin-top:18px !important;}
.mt19 { margin-top:19px !important;}
.mt20 { margin-top:20px !important;}
.mt25 { margin-top:25px !important;}
.mt30 { margin-top:30px !important;}
.mt35 { margin-top:35px !important;}
.mt40 { margin-top:40px !important;}
.mt45 { margin-top:45px !important;}
.mt50 { margin-top:50px !important;}
.mt60 { margin-top:60px !important;}
.mt70 { margin-top:70px !important;}
.mt80 { margin-top:80px !important;}
.mt90 { margin-top:90px !important;}

.mr01 { margin-right:1px !important;}
.mr02 { margin-right:2px !important;}
.mr03 { margin-right:3px !important;}
.mr04 { margin-right:4px !important;}
.mr05 { margin-right:5px !important;}
.mr06 { margin-right:6px !important;}
.mr07 { margin-right:7px !important;}
.mr08 { margin-right:8px !important;}
.mr09 { margin-right:9px !important;}
.mr10 { margin-right:10px !important;}
.mr11 { margin-right:11px !important;}
.mr12 { margin-right:12px !important;}
.mr13 { margin-right:13px !important;}
.mr14 { margin-right:14px !important;}
.mr15 { margin-right:15px !important;}
.mr16 { margin-right:16px !important;}
.mr17 { margin-right:17px !important;}
.mr18 { margin-right:18px !important;}
.mr19 { margin-right:19px !important;}
.mr20 { margin-right:20px !important;}
.mr24 { margin-right:24px !important;}
.mr25 { margin-right:25px !important;}
.mr30 { margin-right:30px !important;}
.mr35 { margin-right:35px !important;}
.mr40 { margin-right:40px !important;}
.mr45 { margin-right:45px !important;}
.mr50 { margin-right:50px !important;}
.mr60 { margin-right:60px !important;}
.mr70 { margin-right:70px !important;}
.mr80 { margin-right:80px !important;}
.mr90 { margin-right:90px !important;}

.mb01 { margin-bottom:1px !important;}
.mb02 { margin-bottom:2px !important;}
.mb03 { margin-bottom:3px !important;}
.mb04 { margin-bottom:4px !important;}
.mb05 { margin-bottom:5px !important;}
.mb06 { margin-bottom:6px !important;}
.mb07 { margin-bottom:7px !important;}
.mb08 { margin-bottom:8px !important;}
.mb09 { margin-bottom:9px !important;}
.mb10 { margin-bottom:10px !important;}
.mb11 { margin-bottom:11px !important;}
.mb12 { margin-bottom:12px !important;}
.mb13 { margin-bottom:13px !important;}
.mb14 { margin-bottom:14px !important;}
.mb15 { margin-bottom:15px !important;}
.mb16 { margin-bottom:16px !important;}
.mb17 { margin-bottom:17px !important;}
.mb18 { margin-bottom:18px !important;}
.mb19 { margin-bottom:19px !important;}
.mb20 { margin-bottom:20px !important;}
.mb21 { margin-bottom:21px !important;}
.mb25 { margin-bottom:25px !important;}
.mb30 { margin-bottom:30px !important;}
.mb35 { margin-bottom:35px !important;}
.mb40 { margin-bottom:40px !important;}
.mb45 { margin-bottom:45px !important;}
.mb50 { margin-bottom:50px !important;}
.mb60 { margin-bottom:60px !important;}
.mb70 { margin-bottom:70px !important;}
.mb80 { margin-bottom:80px !important;}
.mb90 { margin-bottom:90px !important;}

.ml01 { margin-left:1px !important;}
.ml02 { margin-left:2px !important;}
.ml03 { margin-left:3px !important;}
.ml04 { margin-left:4px !important;}
.ml05 { margin-left:5px !important;}
.ml06 { margin-left:6px !important;}
.ml07 { margin-left:7px !important;}
.ml08 { margin-left:8px !important;}
.ml09 { margin-left:9px !important;}
.ml10 { margin-left:10px !important;}
.ml11 { margin-left:11px !important;}
.ml12 { margin-left:12px !important;}
.ml13 { margin-left:13px !important;}
.ml14 { margin-left:14px !important;}
.ml15 { margin-left:15px !important;}
.ml16 { margin-left:16px !important;}
.ml17 { margin-left:17px !important;}
.ml18 { margin-left:18px !important;}
.ml19 { margin-left:19px !important;}
.ml20 { margin-left:20px !important;}
.ml25 { margin-left:25px !important;}
.ml30 { margin-left:30px !important;}
.ml35 { margin-left:35px !important;}
.ml40 { margin-left:40px !important;}
.ml45 { margin-left:45px !important;}
.ml50 { margin-left:50px !important;}
.ml60 { margin-left:60px !important;}
.ml70 { margin-left:70px !important;}
.ml80 { margin-left:80px !important;}
.ml90 { margin-left:90px !important;}


/* --------------------------------------------------------------------------------
 *  report
 * -------------------------------------------------------------------------------- */
#report{
    width:100%;
}
.report_top   {width:100%}
.report_middle{width:100%;background-image:url('../images/report/report_bg_middle.png'); position:relative;z-index:1;padding-bottom:200px;}
.report_bottom{width:100%;margin:0;}

.report_title{
    position:absolute;
    top:0;
    left:50px;
    z-index:2;
}
.report_bg_title{
    position:absolute;
    top:-24px;
    left:0;
    z-index:0;
}
.report_bg_labo{
    position:absolute;
    top:122px;
    left:280px;
    z-index:1;
}

.report_area{
    position:relative;
    top:170px;
}

.report_txt_top{
    margin:0 25px;
    width:940px;
}

.report_txt_bottom{
    margin:0 25px 30px 25px;
    width:940px;
}
#report_txt_area{
    width:auto;
    margin:0 25px;
    padding:40px 40px 20px 40px;
    background-image:url('../images/report/report_txt_bg_middle.png');
    -moz-background-size:contain;
    background-size:contain;
}

.block_title_no, .block_title_txt{
    display:inline-block;
    padding:10px;
    font-size:1.5em;
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    margin:10px 0;
}

.block_title_no{
    text-align:center;
    color:#fff;
    width:10%;
}
.report_txt_area1 .block_title_no { border:1px solid #e91; background-color:#e91; }
.report_txt_area2 .block_title_no { border:1px solid #ac3; background-color:#ac3; }
.report_txt_area3 .block_title_no { border:1px solid #5bd; background-color:#5bd; }
.report_txt_area4 .block_title_no { border:1px solid #e91; background-color:#e91; }
.report_txt_area5 .block_title_no { border:1px solid #e91; background-color:#e91; }

.block_title_txt{
    background-color:#fff;
    width:60%;
}
.report_txt_area1 .block_title_txt { border:1px solid #e91; }
.report_txt_area2 .block_title_txt { border:1px solid #ac3; }
.report_txt_area3 .block_title_txt { border:1px solid #5bd; }
.report_txt_area4 .block_title_txt { border:1px solid #e91; }
.report_txt_area5 .block_title_txt { border:1px solid #e91; }



.block_txt{
    padding:10px 0;
    font-size:1.2em;
}

.other_title{
    text-align:center;
    padding-bottom:10px;
}
.report_page_link{
    text-align:center;
    height:230px;
}
.report_page_link img{
    display:inline-block;
    cursor:pointer;
}

.report_figure{
    width:800px;;
    text-align:center;
    padding-top:30px;
    padding-bottom:50px;
}


/* report1 -------------------------------------------------- */
.user_num{
    font-weight:bold;
    font-size:308%;
}
.report_figure .graph_caption{
    padding:5px 30px;
}

/* report2 -------------------------------------------------- */
.p2_balloon{
    width:793px;
    background-image:url('../images/report/p2_balloon_middle.png');
    -moz-background-size:100% auto;
    background-size:100% auto;
    padding:0 20px;
}

.report2_graph, .report2_txt{
    vertical-align:top;
    text-align:center;
}
.report2_graph{
    width:55%;
}
.report2_txt{
    width:45%;
    margin:0;
    text-align:left;
}
.report2_txt .breakdown{
    width:375px;
    position:absolute;
    z-index:0;
}
.report2_txt .txt_caption{
    font-size:154%;
    font-weight:bold;
    background-color:transparent;
    height:33px;
    padding:20px 35px 0 0;
    color:#fff;
    border:0;
    text-align:right;
    vertical-align:bottom;
    z-index:3;
}

.report2_txt div{
    position:relative;
    margin:0 0 0 15px;
    padding:10px;
    border:1px solid #080;
    background-color:#fff;
    text-align:left;
}

.report2_graph img{
    width:95%;
    margin:5px;
}

.report2_graph .graph_caption{
    padding:0 30px;
}

.graph_space{
    height:50px;
}


/* report3 -------------------------------------------------- */
.p3_balloon{
    width:793px;
    background-image:url('../images/report/p3_balloon_middle.png');
    -moz-background-size:100% auto;
    background-size:100% auto;
    padding:0 20px;
}

.comment_list{
    background-image:url('../images/report/comment_area_head.png');
    background-repeat:repeat-x;
    border:1px solid #41a9cd;
    padding-top:22px;
    margin:15px 0;
}

.comment_block{
    background-image:url('../images/report/p3_txt_bg.jpg');
    -moz-background-size:100% auto;
    background-size:100% auto;
    padding:5px;
}
.comment_block .message{
    padding:5px;
}
.comment_block .balloon{
    padding-right:10px;

}
.commnet_info{
    padding-top:5px;
}

.comment_list .word{
    color:#fff;
    font-weight:bold;
    background-image:url('../images/report/word_bg.png');
    background-repeat:no-repeat;
    width:130px;
    height:28px;
    padding:10px 0 0 40px;
    margin-left:10px;
    display:inline-block;
}
.comment_list .intel{
    position:relative;
    top:-5px;
}
.comment_list .txt{
    margin:5px 0 10px 180px;
}

.report_txt_area3 .last_message{
    text-align:center;
    padding-top:30px;
    font-size:138%;
}


/* report4 -------------------------------------------------- */
.p4_balloon{
    width:793px;
    background-image:url('../images/report/p4_balloon_middle.png');
    -moz-background-size:100% auto;
    background-size:100% auto;
    padding:0 20px;
}

.report_txt_area4 table{
}
.report_txt_area4 th, .report_txt_area4 td{
    border:1px dotted #bbb;
    background-color:#fff;
    padding:5px 10px;
}
.report_txt_area4 th{
    text-align:center;
}
.report_txt_area4 .rank{
    text-align:center;
}
.report_txt_area4 .count{
    text-align:right;
}

.play_best50{
    width:95%;
    margin-top:20px;
}
.play_best50 th{
    background-color:#fdb;
    font-weight:bold;
}
.play_best50 .top5{
    font-size:177%;
    font-weight:bold;
    background-color:#fee;
}

.comment_best{
    width:95%;
    border:1px solid #fb8;
    background-color:#fff;
    background-image:url('../images/report/p4_txt_bg.jpg');
    -moz-background-size:100% auto;
    background-size:100% auto;
    padding:10px;
    margin-bottom:20px;
}
.comment_rank{
    font-weight:bold;
    font-size:120%;
    margin-top:20px;
}
.comment_rank_info{
    margin-left:50px;
    margin-top:5px;
    padding:3px;
}


.search_best{
    width:95%;
}
.search_best th{
    background-color:#fdb;
    font-weight:bold;
}


/* report5 -------------------------------------------------- */
.report_txt_area5 {
    text-align:center;
}

.p5_balloon{
    width:793px;
    color:#fff;
    font-weight:bold;
    -moz-background-size:100% auto;
    background-size:100% auto;
    background-color:#EC7C7D;
    padding:0 20px;
    margin:0 auto;
    text-align:left;
}

.p5_balloon2{
    width:765px;
    color:#EC7C7D;
    font-weight:bold;
    background-image:url('../images/report/p5_balloon2_middle.png');
    -moz-background-size:100% auto;
    background-size:100% auto;
    background-color:#EC7C7D;
    padding:0 20px;
    margin:0 auto;
    text-align:left;
}

.p5_arrow{
    margin:20px 300px;
}

.report_txt_area5 .msg{
    text-align:left;
    margin:10px 50px;
    color:#844;
    font-size:150%;
}