@charset "utf-8";

/*
========== CSS of CONTENTS ==========

Created: 2012-03-28
Modified: 2018-05-01

page of P03,P09
1:content（mainColumn）

========== /CSS of CONTENTS ==========
*/

/* 1:content（mainColumn）
   --------------------------------------------- */

/*---  boxStatus  ---*/
.boxStatus{
margin:0 0 10px;
min-height:58px;
height:auto !important;
height:58px;
}

.boxStatus .modCircleIcon{
padding:5px;
display:inline;
float:left;
width:32px;
background:url(/images/ja_JP/common/bg_icon.png) no-repeat 0 0;
}

.boxStatus .modCircleName{
display:inline;
float:right;
width:505px;
}

.boxStatus .modCircleName h2{
padding:10px 0 0;
font-weight:bold;
font-size:116%;
}

.boxStatus .modCircleName p{
margin:0 0 0 135px;
padding:15px 0 0;
}

.boxStatus .modSnsBtn{
margin:5px 0 0;
float:right;
text-align:right;
}


/*---  modTabCircle  ---*/
#modTabCircle{
margin:0 0 10px;
position:relative;
height:37px;
}

#modTabCircle li{
position:absolute;
top:0;
left:0;
width:112px;
height:37px;
}

#modTabCircle li.modtab02{
left:112px;
}

#modTabCircle li.modtab03{
left:224px;
}

#modTabCircle li.modtab04{
left:336px;
}

#modTabCircle li.modtab05{
left:448px;
}

#modTabCircle li a,
#modTabCircle li span{
display:block;
width:112px;
height:37px;
background:url(/images/ja_JP/circle/nav_tab_circle.gif) no-repeat 0 0;
text-indent:-9999px;
}

#modTabCircle li.modtab02 a,
#modTabCircle li.modtab02 span{
background-position:-112px 0;
}

#modTabCircle li.modtab03 a,
#modTabCircle li.modtab03 span{
background-position:-224px 0;
}

#modTabCircle li.modtab04 a,
#modTabCircle li.modtab04 span{
background-position:-336px 0;
}

#modTabCircle li.modtab05 a,
#modTabCircle li.modtab05 span{
background-position:-448px 0;
}

#modTabCircle li.modtab01 a:hover{
background-position:0 -37px;
}

#modTabCircle li.modtab02 a:hover{
background-position:-112px -37px;
}

#modTabCircle li.modtab03 a:hover{
background-position:-224px -37px;
}

#modTabCircle li.modtab04 a:hover{
background-position:-336px -37px;
}

#modTabCircle li.modtab05 a:hover{
background-position:-448px -37px;
}

#modTabCircle li.modtab01 span.modTabStay{
background-position:0 -74px;
}

#modTabCircle li.modtab02 span.modTabStay{
background-position:-112px -74px;
}

#modTabCircle li.modtab03 span.modTabStay{
background-position:-224px -74px;
}

#modTabCircle li.modtab04 span.modTabStay{
background-position:-336px -74px;
}

#modTabCircle li.modtab05 span.modTabStay{
background-position:-448px -74px;
}


/*---  boxSignboardCircle  ---*/
#boxSignboardCircle{
margin-bottom:15px;
}

#boxSignboardCircle p img{
vertical-align:bottom;
}

#boxSignboardCircle .modCircleImg{
text-align:center;
}

#boxSignboardCircle .modEditLink{
font-size:85%;
text-align:right;
}

#boxSignboardCircle .modSignboardBg01{
padding:7px;
-webkit-border-radius:6px;
border-radius:6px;
background:#ffffff;
}

#boxSignboardCircle .modSignboardBg01 .modSignboardBg02{
width:534px;
}


/*---  boxRemarkSearch  ---*/
#boxRemarkSearch{
margin:0 0 10px;
padding:10px 8px 5px 13px;
-webkit-border-radius:6px;
border-radius:6px;
position:relative;
background:#f5f5f5;
}

#boxRemarkSearch p.modRemarkTxt{
padding:4px 5px 0 0;
float:left;
font-size:85%;
}

#boxRemarkSearch .modInput input{
padding:1px 0 0 25px;
border:none;
width:288px;
height:26px;
line-height:2.0;
background:url(/images/ja_JP/circle/bg_search_remark.png) no-repeat 0 0;
}

#boxRemarkSearch .modKeywordTxt{
margin:0 0 0 10px;
font-size:85%;
color:#999999;
}

#boxRemarkSearch .modInputMember input{
margin:0 20px 0 0;
padding:1px 0 0 25px;
border:none;
width:214px;
height:26px;
line-height:2.0;
background:url(/images/ja_JP/circle/bg_search_member.png) no-repeat 0 0;
}

#boxRemarkSearch .modInputStatus{
padding:2px 0 0;
}

#boxRemarkSearch p{
float:left;
}

#boxRemarkSearch p.modSearchBtn{
float:right;
}


/*---  boxNewPhoto  ---*/
#boxNewPhoto{
padding:0 0 0 9px;
width:540px;
overflow:hidden;
}

#boxNewPhoto ul{
margin:0 0 10px;
margin-right:-14px;
font-size:0;
}

#boxNewPhoto ul{
margin-top/*\**/:10px;
}

#boxNewPhoto ul li{
margin:0 14px 10px 0;
padding:2px;
border:1px solid #cccccc;
float:left;
width:70px;
height:70px;
background-color:#ffffff;
}

#boxNewPhoto ul li p{
display:table-cell;
width:70px;
height:70px;
text-align:center;
vertical-align:middle;
layout-grid-line:70px;
}

#boxNewPhoto ul li p img{
vertical-align:middle;
}


/*---  boxTableList01  ---*/
.boxTableList01{
width:100%;
}

.boxTableList01 th{
padding:5px 0;
border:1px solid #e5e5e5;
border-width:1px 0;
color:#666666;
background-color:#f5f5f5;
text-align:left;
}

.boxTableList01 th li{
float:left;
width:170px;
}

.boxTableList01 th.modCell{
padding-left:10px;
}

.boxTableList01 th span{
padding-left:8px;
border-left:1px solid #e5e5e5;
display:block;
}

.boxTableList01 td{
padding:15px 10px;
border-bottom:1px solid #e5e5e5;
vertical-align:top;
}


/*---  boxCommonInner  ---*/
.boxCommonInner{
/*display:none;*/
margin:0 0 20px;
}

.boxCommonInner ul li{
padding:15px 0;
border-bottom:1px solid #e5e5e5;
}

.boxCommonInner ul.error_list li{
padding:0;
border:none;
}


/*---  contributionInfo  ---*/
.modContributorName{
float:left;
color:#666666;
font-size:93%;
}

.time{
float:right;
color:#666666;
font-size:93%;
}

.close{
padding:3px 0 0 6px;
float:right;
cursor:pointer;
}

.close img{
vertical-align:top;
}


/*---  modContributionArea  ---*/
.modContributionArea{
padding:7px 0 3px;
}

.modContributionArea .modCircleIcon{
margin:0 9px 0 0;
float:left;
width:43px;
}

.modContributionArea .modIcon{
padding:3px 13px 0 0;
float:left;
width:16px;
}

.modContributionArea .modArticleBlock{
float:left;
}

.modContributionArea .modTopicTitle{
font-weight:bold;
font-size:116%;
}

.modContributionArea .modTopicText{
margin:0 0 10px;
float:left;
}

.modContributionArea .modTopicText a{
font-weight:bold;
}

.modPhotoInner{
margin-right:15px;
display:table-cell;
float:left;
text-align:center;
}

.modImgFrame{
padding:2px;
border:1px solid #cccccc;
background:#ffffff;
}

.modDetailImg{
background: #ffffff;
border: 1px solid #cccccc;
height: 70px;
padding: 2px;
width: 70px;
}

.modDetailImg span.modImageCut{
display: table-cell;
height: 70px;
text-align: center;
vertical-align: middle;
width: 70px;
}

.modDetailImg img{
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}

/*-- owner image --*/
.modOwnerPhotoInner{
margin-right:15px;
float:left;
width:76px;
text-align: center;
}

.modOwnerDetailImg{
padding: 2px;
border: 1px solid #cccccc;
width: 70px;
height: 70px;
background-color: #ffffff;
display: table-cell;
vertical-align: middle;
text-align: center;
}

.modOwnerDetailImg img{
height:auto;
width:auto;
max-height: 70px;
max-width: 70px;
vertical-align: middle;
}

.modSentenceLink{
margin:5px 0 0;
font-size:86%;
text-align:right;
}

.modSentenceLink a{
cursor:pointer;
}

.modCreationDate{
margin:0 0 15px;
color:#999999;
font-size:85%
}


/*---  modAllSentence  ---*/
.modAllSentence img{
margin:10px 0;
display:block;
}


/*---  boxClapActions  ---*/
.boxClapActions{
float:right;
position:relative;
}

* html .boxClapActions ul{
float:right;
}

.boxClapActions ul li{
margin:0 0 0 10px;
padding:3px 0 0 !important;
border:none !important;
display:inline;
float:left;
}

* html .boxClapActions ul li{
margin:0;
}

.boxClapActions ul li.modComment,
.boxClapActions ul li.modClap{
padding-top:10px;
font-size:13px;
}

.boxClapActions span.modFukidashi{
margin:0 0 0 3px;
padding:0 0 0 5px;
position:relative;
width:5px;
background:url(/images/ja_JP/circle/bg_clap_fukidashi.png) no-repeat 0 5px;
zoom:1;
}

.boxClapActions span.modClapLink{
margin-left:-1px;
/margin-left:-7px;
padding:0 6px 1px;
border:1px solid #cccccc;
background:#f7f7f7;
}

.boxClapActions ul li a,
.boxClapActions span.modClapLink a{
cursor:pointer;
}

.boxClapActions .modClapList{
padding:10px 15px 15px;
position:absolute;
top:-205px;
right:0;
width:300px;
height:175px;
-webkit-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 0 2px 2px #e7e6e1;
box-shadow:0 0 2px 2px #e7e6e1;
background:#f5f5f5;
display:none;
}

.boxClapActions .modClapList .modClapListTitle{
margin-bottom:5px;
float:left;
width:260px;
font-weight:bold;
}

.boxClapActions .modClapList .modClapListClose{
float:right;
width:10px;
cursor:pointer;
}

.boxClapActions .modClapList .modClapListPerson{
padding:10px;
width:280px;
height:125px;
background:#ffffff;
border:1px solid #cccccc;
overflow-y:scroll;
}


/*---  modFukidashi  ---*/
.modFukidashi{
margin:0 0 10px;
padding:0 0 0 15px;
background:url(/images/ja_JP/common/bg_comment_fukidashi.png) no-repeat 2px 10px;
}

.modFukidashi .modFukidashiInner{
padding:15px;
-webkit-border-radius:6px;
border-radius:6px;
background:#f5f5f5;
}


/*---  modFukidashi02 and 03  ---*/

.modFukidashiWrap .modFukidashi02:first-child{
padding:5px 0 0 ;
background: url(/images/ja_JP/common/bg_comment_fukidashi02_top.png) no-repeat 0 0;
zoom:1;
}

.modFukidashiWrap .modFukidashi02:first-child .modFukidashiInner02{
border:1px solid #edeae6;
}

.modFukidashiWrap a:first-child  + .modFukidashi02 .modFukidashiInner01{
padding:5px 0 0 ;
background: url(/images/ja_JP/common/bg_comment_fukidashi02_top.png) no-repeat 0 0;
zoom:1;
}

.modFukidashi02 .modFukidashiInner02{
padding:10px 5px 5px;
background:#f9f7f4 ;
border:1px solid #edeae6;
border-top:1px solid #ffffff;
}

.modFukidashiWrap a:first-child  + .modFukidashi02 .modFukidashiInner02{
border-top:1px solid #edeae6;
}


/*---  boxSetupNav  ---*/
.boxSetupNav{
margin:0 0 15px;
padding:0 14px;
border-bottom:1px solid #e5e5e5;
color:#666666;
background:#f5f5f5;
}

.boxSetupNav ul li{
padding:8px 11px 5px 0;
display:block;
float:left;
z-index:100;
}

.boxSetupNav ul li a{
cursor:pointer;
}

.boxSetupNav ul li.modManagement{
_padding-top:8px;/* IE6 */
position:relative;
}

li.modManagement a span{
display:inline-block;
width:14px;
background:url(/images/ja_JP/common/icon/ico_sprite.png) no-repeat -38px -112px;
text-indent:-9999px;
vertical-align:middle;
}

.boxSetupNav ul li.modManagement ul{
padding:0 0 5px;
border:1px solid #e5e5e5;
display:none;
position:absolute;
top:32px;
left:-20px;
z-index:150;
background:#ffffff;
text-align:left;
}

.boxSetupNav ul li.modManagement ul li{
padding:0;
display:inline;
float:none;
clear:both;
text-align:left;
}

.boxSetupNav ul li.modManagement ul li a{
padding:4px 25px;
display:block;
font-weight:normal;
text-decoration:none;
width:125px;
}

.boxSetupNav ul li.modManagement ul li a:hover{
background:#e4f0fd;
}


/*---  modPhotoFrame  ---*/
.modPhotoFrame{
padding:2px;
border:1px solid #cccccc;
background:#ffffff;
}


/*---  modImageList  ---*/
.modImageList{
width:504px;
overflow:hidden;
}

.modImageList ul{
margin-right:-28px;
}

.modImageList ul li{
margin-right:28px;
padding:0 0 20px;
display:inline;
float:left;
width:78px;
min-height:130px;
height:auto !important;
height:130px;
}

.modImageList .modImgFrame{
padding:2px;
border:1px solid #cccccc;
background:#ffffff;
line-height:0;
}

.modImageList p.modDetailImg{
padding:2px;
border:1px solid #cccccc;
display:table-cell;
width:70px;
height:70px;
text-align:center;
vertical-align:middle;
layout-grid-line:70px;
background-color:#ffffff;
line-height:0;
}

.modImageList p.modDetailImg img{
position:static;
display:inline;
vertical-align:middle;
}

.modImageList .modSkinFrame{
border:2px solid #f6ab3b;
}


/*---  modIconExplain  ---*/
.modIconExplain{
margin:0 0 20px;
padding:15px;
border:2px solid #e5e5e5;
}

.modIconExplain ul{
margin:0 0 5px;
}

.modIconExplain ul li{
margin-right:5px;
_margin-right:0;/* IE6 */
display:inline;
float:left;
font-size:85%;
}

.modIconExplain p{
font-size:85%;
}


/*--- boxEasyQuestion ---*/
.boxEasyQuestionnaire{
margin:0 0 10px;
padding:15px;
-webkit-border-radius:6px;
border-radius:6px;
position:relative;
background:#f5f5f5;
}

.boxEasyQuestionnaire .modFreeTop{
margin:0 0 15px;
padding:0 0 10px;
border-bottom:1px dotted #cccccc;
}

.boxEasyQuestionnaire .modQuestTitle{
margin:0 0 10px;
padding:5px 20px;
font-weight:bold;
}

.boxEasyQuestionnaire .modQuestDate{
margin:0 0 0 20px;
font-size:11px;
}

.boxEasyQuestionnaire .modQuestExplanation{
margin:0 0 15px 20px;
color:#999999;
font-size:11px;
}

.boxEasyQuestionnaire .modSelectbtn{
margin:0 5px 0 0;
display:inline;
float:left;
width:20px;
line-height:1.4;
}

.boxEasyQuestionnaire .modChoice{
margin:0 10px 0 0;
display:inline;
float:left;
width:220px;
line-height:1.4;
}

.boxEasyQuestionnaire .modGraph{
margin:0 10px 0 0;
display:inline;
float:left;
width:210px;
}

.boxEasyQuestionnaire .modNumericalvalue{
display:inline;
float:left;
width:40px;
text-align: right;
}

.boxEasyQuestionnaire .modFreeBottom{
margin:20px 0 0;
padding:10px 0 0;
border-top:1px dotted #cccccc;
}


/*--- boxConfigurationInfo ---*/
.boxConfigurationInfo dl{
margin:0 0 15px;
width:100%;
}

.boxConfigurationInfo dl dt{
padding-left:4px;
float:left;
width:190px;
}

.boxConfigurationInfo dl dd{
padding:0 3px 0 0;
float:right;
width:340px;
}


/*--- boxTopicPageLink ---*/
#boxTopicPageLink{
margin:-6px 0 0;
height:30px;
position:relative;
}

#boxTopicPageLink .titTopicPageLink{
position:absolute;
top:0;
left:0;
}

#boxTopicPageLink .modTopicPageLink01{
position:absolute;
top:0;
left:112px;
}

#boxTopicPageLink .modTopicPageLink02{
position:absolute;
top:0;
left:224px;
}

#boxTopicPageLink .modTopicPageLink03{
position:absolute;
top:0;
left:336px;
}


/*--- circle ALBUM 2013/03/22 HRA add  ---*/
#boxPhotoContainer li{
margin:0 0 5px 5px;
padding:4px;
width:166px;
background:#fff;
border:1px #e9e9e9 solid;
box-shadow:1px 1px 1px 0 #e9e9e9;
line-height:0.1;
}

#boxPhotoContainer .modNewPhotoImg{
margin:0;
padding:0;
text-align:center;
}

#boxPhotoContainer .modNewPhotoImg img{
width:166px;
}

#modNewPhotoBtn{
cursor: pointer;
}

.modCloseBtn{
padding:2px 16px 2px 0;
background:url(/images/ja_JP/common/icon/ico_close.gif) no-repeat 100% 50%;
cursor: pointer;
}


/*---  boxTooltipLetter(circleLetter page,)  add 20131107 AONO  ---*/
.boxTooltipLetter{
position:relative;
}

.boxTooltipLetter .modTooltipLetterContents{
//background:#f5f5f5;
background:#ffffff;
border:1px solid #e7e6e1;
-webkit-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 0 2px 2px #e7e6e1;
box-shadow:0 0 2px 2px #e7e6e1;
display:none;
padding:10px 15px 15px;
position:absolute;
right:0;
top:-147px;
width:380px;
}

.modTooltipLetterContents .modTooltipLetterTitle{
background:url(/images/ja_JP/common/icon/ico_help.png) no-repeat 0 0.1em;
float:left;
padding:0 0 0 20px;
font-weight:bold;
}

.modTooltipLetterContents .modTooltipClose{
float:right;
}

.modTooltipLetterContents .modTooltipLetterArrow{
background:url(/images/ja_JP/common/bg_tooltip_letter.png) no-repeat 0 0;
height:10px;
left:217px;
position:absolute;
bottom:-10px;
width:15px;
z-index:100;
}

/*---  boxTooltipLoginContents(Login Promotion)  add 20140320 AONO  ---*/
#boxCreateNewTopic{
margin:0 0 20px;
position:relative;
text-align:center;
}

.boxTooltipLoginContents{
background:#ffffff;
border:1px solid #e7e6e1;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-ms-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 0 2px 2px #e7e6e1;
-moz-box-shadow:0 0 2px 2px #e7e6e1;
-ms-box-shadow:0 0 2px 2px #e7e6e1;
box-shadow:0 0 2px 2px #e7e6e1;
display:none;
padding:10px 0 0;
position:absolute;
right:0;
top:0;
width:360px;
}

.boxTooltipLoginContents p{
padding:0 10px;
text-align:left;
}

.boxTooltipLoginContents .modTooltipLoginClose{
border-top:1px solid #e5e5e5;
padding:0;
text-align:center;
}

.boxTooltipLoginContents .modTooltipLoginClose a{
display:block;
padding:10px 0;
text-align:center;
text-decoration:none;
}

/*---  PostFormInpCheck  ---*/
.boxPostFormInpCheck{
color:#666666;
font-size:85%;
margin:0 0 5px;
text-align:center;
}

.boxPostFormInpCheck .modProvisionalPostCaution{
color:#ff0000;
font-size:116%;
margin:5px 0;
text-align:left;
}

.boxPostFormInpCheck .modProvisionalPostCheck li{
display:inline-block;
margin:0 0 10px;
}

.boxPostFormInpCheck .modProvisionalPostCheck li:first-child{
margin:0 30px 0 0;
}

/*---  Draft Comment Frame  ---*/
.boxDraftCommentFrame{
border:2px solid #f00;
}

/*---  Tag Searh Headline  ---*/
.boxTagSearchHeadline { margin-bottom: 20px; }

.boxTagSearchHeadline .modTagName {
  border: 1px solid #E5E5E5;
  border-radius: 3px;
  background-color: #E5E5E5;
  color: #666;
  display: inline-block;
  font-size: 93%;
  margin-right: 5px;
}

.boxTagSearchHeadline .modTagName a {
  color: #666;
  display: inline-block;
  padding: 6px 8px;
  text-decoration: none;
}

.boxTagSearchHeadline .modTagName:hover {
  border: 1px solid #666;
  background-color: rgb(255, 255, 255, 0.6);
}