﻿/* TOC */
.TOC {border: #f3f3f3 solid 2px; padding: 15px; margin-bottom: 35px; background: #fafafa;border-radius: 14px 0 14px 0 / 14px 0 14px 0; font-size: 14px !important;}
.TOC p { font-weight: bold; margin:0 0 10px;}
.TOC ul {overflow: hidden;}
.TOC ul li { margin-bottom: 5px; border-bottom: 1px dotted #9B9B9B; padding: 5px 0;}
.TOC ul li:first-child { margin-bottom: 5px; border-top: 1px dotted #9B9B9B;}
.TOC ul li:last-child { margin-bottom:0;}
.TOC a {color:#292929;}
.TOC ul li dl dd:hover {text-decoration: underline !important;}
.TOC ul li dl{ overflow: hidden; font-weight: bold;}
.TOC ul li.mrg-5 dl{margin-left: 5%;overflow: hidden; font-weight: normal;}
.TOC ul li dl dt{ float: left; width: 5%;font-size: 14px !important; display: none;}
/*.TOC ul li dl dd{ float: right; width: 95%;font-size: 14px !important;}*/
.TOC ul li dl dd{ float: left; width: 100%;font-size: 14px !important;}
.TOC ul li dl dd span {font-size: 14px !important;}
.TOC ul li.mrg-5 dl dt{ float: left; width: 10%;font-size: 13px !important; display: none;}
/*.TOC ul li.mrg-5 dl dd{ float: right; width: 90%;font-size: 13px !important;}*/
.TOC ul li.mrg-5 dl dd{ float: left; width: 95%;font-size: 13px !important;}
.TOC ul li.mrg-5 dl dd span {font-size: 13px !important;}
@media screen and (max-width: 800px) {
.TOC {border: #f3f3f3 solid 2px; padding: 4%; margin-bottom: 25px;}
.TOC p { font-weight: bold; margin-bottom: 10px;}
.TOC ul { margin-left: 0;}
.TOC ul li { margin-bottom: 5px; font-weight: bold;}
.TOC ul li:last-child { margin-bottom:0;}
.TOC ul li dl dt{ float: left; width: 7%;font-size: 14px !important;}
/*.TOC ul li dl dd{ float: right; width: 93%;font-size: 14px !important;}*/
.TOC ul li dl dd{ float: left; width: 100%;font-size: 14px !important;}
.TOC ul li dl dd span {font-size: 14px !important;}
.TOC ul li.mrg-5 {font-weight: normal;}
.TOC ul li.mrg-5 dt{ float: left; width: 8%;font-size: 12px !important;}
/*.TOC ul li.mrg-5 dd{ float: right; width: 92%;font-size: 12px !important;}*/
.TOC ul li.mrg-5 dd{ float: left; width: 100%;font-size: 12px !important;}
.TOC ul li.mrg-5 dd span {font-size: 14px !important;}
.descTxt {font-size: 12px;}
}


/* basicInfo */
.basicInfo {overflow: hidden; padding:10px 2%; margin-bottom: 20px;background: #f9f9f9; border: #eee solid 1px; color: #666;border-radius: 3px;}
.basicInfo dl {overflow: hidden;float: left; width: 50%; font-size: 14px; margin-bottom: 10px;}
.basicInfo dl dt {float: left; width: 25%;}
.basicInfo dl dd {float: right; width: 75%;}
.basicInfo dl.long{width: 100%;}
.basicInfo dl.long dt {float: left; width: 12.5%;}
.basicInfo dl.long dd {float: right; width: 87.5%;}
.basicInfo dl.long dd .serviceTag {width: 100%; overflow: hidden;}
.basicInfo dl.long dd .serviceTag li {display: inline-block; padding: 0 5px 0 28px; font-size: 10px; height: 28px; line-height: 29px; background:#E8E8E8 url(../img/icon-ok.png) no-repeat; background-size: 20px; background-position: 5px 45%; border: #eee solid 1px; color: #666; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px;border-radius: 3px; float: left; width: auto; margin: 0 5px 5px 0}
.basicInfo .txt {float: left; width: 50%;}
.basicInfo .btns { float:right;width: 26%; margin-bottom: 0;margin-top: 4px;}
.basicInfo .txt .date {background: url(../img/icon-time.png) no-repeat 0 48%; background-size: 16px; padding-left: 20px;margin-bottom:0;}
.basicInfo .txt .author{background: url(../img/icon-author.png) no-repeat 0 48%; background-size: 16px; padding-left: 20px;margin-bottom: 0}
.basicInfo .btns li {float: left; width: 40%; text-align: right; line-height: 0;}
.basicInfo .btns li img {width: 40px;}
.update { text-align: right; font-size: 12px;}
@media screen and (max-width: 800px) {
.basicInfo {overflow: hidden; padding:2%; margin-bottom: 20px;background: #f9f9f9; border: #eee solid 1px; color: #666; border-radius:0;}
.basicInfo h3 {border-left: 0;color: #fff;font-size: 14px;line-height: 1.5em;margin-bottom: 8px;padding: 2px 5px;background: #0cb2ba;}
.basicInfo dl {width: 98%; margin: 0 1% 10px; font-size: 14px; border-bottom: 1px dotted #C0C0C0;padding-bottom: 2px;}
.basicInfo dl dt {width: 28%;}
.basicInfo dl dd {width: 70%;}
.basicInfo dl.long{width: 98%;}
.basicInfo dl.long dt {width: 28%;}
.basicInfo dl.long dd {width: 70%;}
.basicInfo dl.long dd .serviceTag {width: 100%; overflow: hidden;}
.basicInfo dl.long dd .serviceTag li{display: inline-block; padding:0 2px 0 12px; font-size: 8px; height: 20px; line-height: 20px; background:#E8E8E8 url(../img/icon-ok.png) no-repeat; background-size: 10px; background-position: 1px 50%; border: #eee solid 1px; color: #666; border-radius: 3px; float: left; width: auto; margin: 0 5px 5px 0}
/*.basicInfo dl.serviceList dt {width: 100%; margin-bottom: 5px;}
.basicInfo dl.serviceList dd {width:100%;}*/
.basicInfo .btns {float: right;width: 36%;margin-bottom: 0;margin-top: 4px;}
}


/* balloon */
.balloon { width: 100%; margin: 1.5em 0 2em; overflow: hidden;}
.balloon .faceicon {float: left; margin-right: -90px; width: 80px; height: 80px; overflow: hidden;border: solid 3px #E7E7E7; border-radius: 50%;}
.balloon .faceicon img{width: 100%; height: auto;}
.balloon .faceicon p{font-size: 10px;text-align: center;margin-top:0;position: absolute;width: 80px;}
.balloon .chatting { width: 100%;}
.says {display: inline-block; position: relative; margin: 5px 0 0 105px; padding: 17px 13px; border-radius: 12px; background: #fff;border: 3px solid #E7E7E7;}
.says:before {content: "";position: absolute;top: 32px; left: -8px;margin-top: -9px;display: block;width: 0px;height: 0px;border-style: solid;border-width: 9px 9px 9px 0;border-color: transparent #fff transparent transparent;z-index: 2;}
.says:after {content: "";position: absolute;top: 32px; left: -12px;margin-top: -10px;display: block;width: 0px;height: 0px;border-style: solid;border-width: 10px 10px 10px 0;border-color: transparent #E7E7E7 transparent transparent;z-index: 1;}
.says p,.think p {margin: 0;padding: 0;}
.think{display: inline-block; position: relative; margin: 5px 0 0 145px; padding: 17px 13px; border-radius: 12px; background: #fff;border: 3px solid #E1E1E1;}
.think::before{ content: ''; position: absolute; display: block; border-radius: 50%; background-color: #fff; border: 3px solid #E1E1E1; left: -35px; top: 15px; width: 23px; height: 23px;}
.think::after{content: ''; position: absolute; display: block; border-radius: 50%; background-color: #fff; border: 3px solid #E1E1E1; left: -55px; top: 22px; width: 10px; height: 10px;}

.onePointYuichi {padding:15px; font-size: 14px; background:#CCF4FF;position: relative;margin-bottom: 20px;}
.onePointYuichi h4 {background:none;padding:6px 5px 5px 30px; width: auto;line-height: 1; margin-bottom: 10px;font-size: 16px;}
.onePointYuichi .icon {width: 40px; height: auto; position: absolute; top: -8px; left: -5px;}
.onePointYuichi p {margin-bottom: 0;}

h3.rankingTitle {border-left:none; color:#FF4752;background:url("../img/bg-score.jpg") no-repeat;font-size: 20px; line-height: 1.5em; margin-bottom: 1em; padding:15px 10px;}

/* SNSボタン */
.snsBtns {overflow: hidden; padding: 0 0; margin-top: 30px;}
.snsBtns ul {width: 100%; margin-bottom: 0;margin-top: 4px;}
.snsBtns ul li.tw {float: left; width: 49%; text-align: center; line-height: 1; background: url(../img/icon-tw.png) #00aced; background-repeat: no-repeat; background-position: 20% 50%; background-size: 25px auto; padding: 15px 0; color: #fff;}
.snsBtns ul li.ht {float: right; width: 49%; text-align: center; line-height: 1;background: url(../img/icon-ht.png) #00a4de; background-repeat: no-repeat; background-position: 20% 50%; background-size: 25px auto; padding: 15px 0; color: #fff;}
.snsBtns ul li:hover {opacity: 0.8;}
@media screen and (max-width: 800px) {
.snsBtns {overflow: hidden; padding: 0 0;}
.snsBtns ul {float: none;  width: 100%; margin: 4px 0 0;}
.snsBtns ul li.tw {font-weight: bold; font-size: 14px; width: 46%; background: url(../img/icon-tw.png) #00aced; background-repeat: no-repeat; background-position: 5% 50%; background-size: 20px auto;padding-left: 3%;}
.snsBtns ul li.ht {font-weight: bold; font-size: 14px;width: 46%;background: url(../img/icon-ht.png) #00a4de; background-repeat: no-repeat; background-position: 5% 50%; background-size: 20px auto;padding-left: 3%;}
.snsBtns ul li img {width: 30px;}
}
.twBlock {width: 500px; margin: 0 auto 20px;}
@media screen and (max-width: 800px) {
.twBlock {width: 100%; margin: 0 auto 20px;}
}

/*========================================
CATEGORY LABEL LIST
=======================================*/
.relatedList { width: 100%; margin: 0 auto;}
.relatedList a {color:#292929;}
.relatedList li{border: #f3f3f3 solid 2px; padding: 15px; margin-bottom: 25px; background: #fafafa;border-radius:6px; overflow: hidden;-webkit-transition: 0.3s ease; transition: 0.3s ease;position: relative;display: table;}
.relatedList li .photo {width: 24%; line-height: 0; position: relative;display: table-cell;vertical-align: middle;}
.relatedList li .photo img {width: 100%; height: auto; border-radius: 5px; line-height: 0;}
.relatedList li .txt {width:70%; padding-left: 2%; display: table-cell;vertical-align: middle;}
.relatedList li .txt h3 {padding: 0 0 6px; margin: 0;border: none;font-size: 16px;}
.relatedList li .txt h3.eventTitle {padding: 0 0;}
.relatedList li p {margin: 0 0 10px}
.relatedList li p.desc {font-size: 13px; margin-bottom: 0;}
.relatedList li .txt .authorName {float: left; font-size: 14px;}
.relatedList li .txt .date{float: right; text-align: right; font-size: 14px;}
.relatedList li:hover {webkit-box-shadow: 3px 3px 3px 0 rgba(132,132,132,.5);-moz-box-shadow: 3px 3px 3px 0 rgba(132,132,132,.5);box-shadow: 3px 3px 3px 0 rgba(132,132,132,.5);-webkit-transition: 0.3s ease; transition: 0.3s ease;}
.relatedList li .newFlag {background: #F0C737;color: #fff; padding: 3px 0; position: absolute;z-index: 2; font-weight: bold; font-size: 10px; width: 60px; text-align: center;}
.relatedList li .recFlag {background:#F43235;color: #fff; padding: 3px 0; position: absolute;z-index: 2; font-weight: bold; font-size: 10px; width: 60px;text-align: center;}


.reportList { width: 100%; margin: 0 auto;}
.reportList a {color:#292929;}
.reportList li{border: #f3f3f3 solid 2px; padding: 15px; margin-bottom: 25px; background: #fafafa;border-radius:6px; overflow: hidden;-webkit-transition: 0.3s ease; transition: 0.3s ease;position: relative;display: table;}
.reportList li .photo {width: 30%; line-height: 0; position: relative;display: table-cell;vertical-align: middle;}
.reportList li .photo img {width: 100%; height: auto; border-radius: 5px; line-height: 0;}
.reportList li .txt {width:64%; padding-left: 2%; display: table-cell;vertical-align: middle;}
.reportList li .txt h3 {padding: 0 0 6px; margin: 0;border: none;font-size: 16px;}
.reportList li .txt h3.eventTitle {padding: 0 0;}
.reportList li p {margin: 0 0 10px}
.reportList li p.desc {font-size: 13px; margin-bottom: 0;}
.reportList li .txt .authorName {float: left; font-size: 14px;}
.reportList li .txt .date{float: right; text-align: right; font-size: 14px;}
.reportList li:hover {webkit-box-shadow: 3px 3px 3px 0 rgba(132,132,132,.5);-moz-box-shadow: 3px 3px 3px 0 rgba(132,132,132,.5);box-shadow: 3px 3px 3px 0 rgba(132,132,132,.5);-webkit-transition: 0.3s ease; transition: 0.3s ease;}
@media screen and (max-width: 800px) {
.reportList { width: 98%; margin: 0 auto;}
.reportList li{display: block;padding: 2%;}
.reportList li .photo {width: 100%; line-height: 0; display: block;margin-bottom: 2%;}
.reportList li .txt {width:100%; padding-left:0; display: block;}
}


.labelLink {overflow: hidden; margin-bottom: 15px; border-bottom:#f3f3f3 solid 2px}
.labelLink li { float: left; padding: 4px 8px; text-align: center;background:#00ADBC; border-radius: 4px; margin:0 10px 10px 0; font-size: 12px; font-weight: bold;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}
.labelLink a {color: #fff;}
.labelLink a li:hover {background:#F76265;-moz-transition-property:all;-moz-transition-duration: 0.5s;-moz-transition-timing-function: ease;-moz-transition-delay: 0.1s;-webkit-transition-property:all;-webkit-transition-duration: 0.5s;-webkit-transition-timing-function: ease;-webkit-transition-delay: 0.1s;-o-transition-property:all;-o-transition-duration: 0.5s;-o-transition-timing-function: ease;-o-transition-delay: 0.1s;}
.linkArticle{border: 2px solid #B5B5B5; padding: 2%; overflow: hidden; margin-bottom: 15px; background: #fff; -webkit-transition: 0.3s ease; transition: 0.3s ease; display: table; width: 96%;}
.linkArticle:hover {-webkit-transition: 0.3s ease; transition: 0.3s ease;webkit-box-shadow: 3px 3px 3px 0 rgba(132,132,132,.5);-moz-box-shadow: 3px 3px 3px 0 rgba(132,132,132,.5);box-shadow: 3px 3px 3px 0 rgba(132,132,132,.5);}
.linkArticle .photo {width: 20%; display: table-cell; vertical-align: middle;}
.linkArticle .photo img {width: 100%; height: auto; line-height: 1; border-radius: 8px;}
.linkArticle .txt {width: 78%;display: table-cell; padding-left: 2%; vertical-align: middle;}
.linkArticle .txt .sub {background:rgba(14,14,14,1.00); text-align: center; color: #fff; padding: 3px 10px; font-size: 12px; border-radius: 4px;margin-bottom: 10px;}
.linkArticle .txt .title {font-size: 18px; font-weight: bold; margin:5px 0;}
.linkArticle .txt .sum {font-size: 12px;}

.twBlock {width: 500px; margin: 0 auto 20px;}
@media screen and (max-width: 800px) {
.twBlock {width: 100%; margin: 0 auto 20px;}
}

.mb-5 {margin-bottom: 5%;}
.mb-8 {margin-bottom: 8%;}
.mb-10 {margin-bottom: 10%;}
.mt-5 {margin-top: 5%;}
.mt-8 {margin-top: 8%;}
.mt-10 {margin-top: 10%;}

.uTxt {position: relative;}
.uTxt .readPre {background: rgba(39, 203, 217, .9) url(../img/arrow-white.png);
    background-repeat: no-repeat;
    background-size: 8px auto;
    background-position: 98% 50%;
    position: absolute;
    width: 240px;
    height: 45px;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 10px;
    border-radius: 4px;
    color: #fff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    letter-spacing: 0.1px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 3px 3px 6px -2px #555, 3px 3px 8px rgba(255, 255, 255, 0.8);}