@charset "utf-8";

/*-----------------------------------------------------------------------------------------
parts
-----------------------------------------------------------------------------------------*/
/* breadcrumb */
.breadcrumb {
    background: #f4f4f4;
    margin-bottom: 15px;
    padding: 4px 20px 0;
}
.breadcrumb li a .text {color: #231815; font-size: 11px;}
.breadcrumb li:last-child a .text {font-weight: bold;}
.breadcrumb li a:hover .text {text-decoration: underline;}
.breadcrumb li:last-child a:hover .text {text-decoration: none;}
.breadcrumb .gray-r {
    color: #999;
    font-size: 10px;
    margin: 0 10px;
}
/* fixed pagenation */
.pagenation {width: 100%; z-index: 1000;}
.pagenation {margin-top: -10px;}
.pagenation a span.page-prev,
.pagenation a span.page-next {
    display: block;
    height: 104px;
    margin-top: -52px;
    position: fixed;
    width: 104px;
    top: 50%;
}
.pagenation a span.page-prev {left: 0;}
.pagenation a span.page-next {right: 0;}
.pagenation a span.page-prev {background-position: 0 0;}
.pagenation a span.page-next {background-position: -105px 0;}
.pagenation a:hover span.page-prev {background-position: 0 -105px;}
.pagenation a:hover span.page-next {background-position: -105px -105px;}

/* numbering pagenation */
.article-pagenation {padding: 10px;}
.article-pagenation ul {margin: 0 auto;}
.article-pagenation li {
    color: #9fa0a0;
    line-height: 2.2;
    margin: 0 7px;
    height: 27px;
    width: 27px;
}
.article-pagenation li a,
.article-pagenation li.current span {
    background: #fff;
    border: 2px solid #9fa0a0;
    border-radius: 5px;
    color: #9fa0a0;
    display: block;
    font-weight: bold;
    height: 27px;
    line-height: 2.1;
    width: 27px;
}
.article-pagenation li a:hover,
.article-pagenation li.current span {
    border-color: #E60012;
    color: #E60012;
    text-decoration: none;
}
.article-pagenation .paging,
.article-pagenation .paging a,
.article-pagenation .paging a:hover {
    border: none;
    width: auto;
    height: auto;
}
.article-pagenation .paging .text {font-size: 10px;}
.article-pagenation .paging a:hover .text {color: #E60012;}
.article-pagenation .previous .arrow-g-left,
.article-pagenation .next .arrow-g-right {
    background-position: -216px -149px;
    height: 20px;
    margin-top: 6px;
    width: 18px;
}
.article-pagenation .previous a:hover .arrow-g-left,
.article-pagenation .next a:hover .arrow-g-right {background-position: -248px -149px;}
.article-pagenation .next .arrow-g-right,
.article-pagenation .next a:hover .arrow-g-right {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);  
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);  
}
/* article parts set */
.main-content {position: relative;}
.sp-article .main-content,
.serial-top .main-content,
.serial-article .main-content,
.news-source .main-content,
.tips .main-content {border-top: 5px solid #231815;}/* 記事形式のページの時、上ボーダー入る */

.main-content > .ptn-text-only > .text {margin-top: 15px;}/* タイトルなし／テキストパターンでは上部に15px入る */
.main-content .main-heading {
    margin-bottom: 10px;
    padding: 13px 115px 10px 15px;
    position: relative;
}
.main-content .sub {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 3px;
}
.main-content .heading {
    font-size: 26px;
    line-height: 1.2;
}
.main-content .classification {
    background: #231815;
    border-bottom-left-radius: 5px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    position: absolute;
    right: 0;
    top: 0;
    width: 90px;
    z-index: 1000;
}
.main-content .sns ul {margin: 0 auto;}
.main-content .sns li {width: 95px;}
.main-content .sns li.gp {margin-right: 6px; width: 77px;}
.parts {margin-bottom: 20px;}
.parts .text {font-size: 14px; padding: 0 15px;}
.ptn-text-only .text,
.ptn-photo-left .text,
.ptn-photo-right .text,
.ptn-photo-left-wrap .text,
.ptn-photo-right-wrap .text {
     line-height: 2;
}
/* 文中でリンクかけた時 */
.ptn-text-only .text a,
.ptn-photo-left .text a,
.ptn-photo-right .text a,
.ptn-photo-left-wrap .text a,
.ptn-photo-right-wrap .text a {
     color: #005ead;
}
.ptn-text-only .text a:visited,
.ptn-photo-left .text a:visited,
.ptn-photo-right .text a:visited,
.ptn-photo-left-wrap .text a:visited,
.ptn-photo-right-wrap .text a:visited {
     color: #941d55;
}
/* 文末の補足分としてでsmall使った時 */
.ptn-text-only small,
.ptn-photo-left small,
.ptn-photo-right small,
.ptn-photo-left-wrap small,
.ptn-photo-right-wrap small {
    color: #999;
    font-size: 11px;
}
.parts .text .caption {font-size: 20px; line-height: 1.3; margin-bottom: 7px;}
.parts .photo-caption {color: #999; font-size: 11px; padding: 0 10px;}
.ptn-photo-center,
.ptn-photo-left .photo,
.ptn-photo-right .photo {position: relative;}
.ptn-photo-center .text {margin: 0 15px 7px; width: 504px;}
.ptn-photo-center .text-only {margin: 0 15px 7px;}
.ptn-photo-center .photo {background: #fafafa; margin: 0 auto 5px;}
.ptn-photo-left .photo {width: 300px;}
.ptn-photo-right .photo {width: 300px;}
.ptn-photo-left .text,
.ptn-photo-right .text {width: 350px;}
.ptn-photo-left-wrap .photo {margin-right: 15px;}
.ptn-photo-right-wrap .photo {margin-left: 15px;}
.ptn-photo-left .step-box {border-bottom: 1px dotted #ccc; padding-bottom: 10px;}
.ptn-photo-left .step-box .number {
    background: #231815;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    height: 30px;
    left: 0;
    padding: 5px 10px;
    position: absolute;
    top: 0;
    width: 24px;
}
.ptn-photo-left .content,
.ptn-photo-right .content {width: 300px;}
.ptn-photo-list {margin-right: -13px;}
.ptn-photo-list li {margin: 1px 11px 15px 2px;}
.ptn-photo-list .photo,
.ad-list .photo {
    border: 1px solid #ededed;
    width: 100px;
    height: 100px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.ptn-photo-list .photo .pic,
.ad-list .photo .pic {
    height: 98px;
    display: block;
    display: table-cell;
    /* IE8hack */
    display /*\**/: inline-block\9;
    margin: auto;
    text-align: center;
    text-decoration: none;
    padding: 1px;
    width: 98px;
    vertical-align: middle;
    zoom: 1;
}
.ptn-photo-list .photo .pic img,
.ad-list .photo .pic img {
    max-width: 98px;
    max-height: 98px;
    vertical-align: middle;
    border:none;
    display:inline;
}
.ptn-text-only .text {padding: 0 15px;}
.ptn-data {margin: 0 15px 20px;}
.ptn-map {margin: -5px 15px 20px;}
.ptn-amazon {margin: -15px 15px 20px;}
.ptn-data .caption {font-size: 13px;}
.ptn-data .text {
    color: #999;
    font-size: 11px;
    margin-bottom: 5px;
    padding: 0;
}
.ptn-data .text a,
.notice .text a {color: #005ead;}
.ptn-data .text a:visited,
.notice .text a:visited {color: #941d55;}

/* 2～5列パターン */
.ptn-half,
.ptn-one-third,
.ptn-quarter,
.ptn-one-fifth {margin: 0 -20px 10px 0;}
.ptn-half li,
.ptn-one-third li,
.ptn-quarter li,
.ptn-one-fifth li {margin: 0 20px 10px 0; position: relative;}
.ptn-half .photo,
.ptn-one-third .photo,
.ptn-quarter .photo,
.ptn-one-fifth .photo {margin-bottom: 5px;}
.ptn-half .text .caption,
.ptn-one-third .text .caption,
.ptn-quarter .text .caption,
.ptn-one-fifth .text .caption {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 3px;
}
.ptn-half .text .caption,
.ptn-one-third .text .caption {font-size: 14px;}
.ptn-half .text,
.ptn-one-third .text,
.ptn-quarter .text,
.ptn-one-fifth .text {
    font-size: 13px;
    padding: 0 5px 0 10px;
}
.ptn-half li {width: 330px;}
.ptn-one-third li {width: 213px;}
.ptn-quarter li {width: 155px;}
.ptn-one-fifth li {width: 120px;}

/* 記事下導線リスト用 */
.ad-list .text {width: 213px;}

/* ピンクBGテキストパターン */
.ptn-text-pink {background: #F2ECF0; padding: 60px;}
.ptn-text-pink .inner {
    background-image: url(//img.aacdn.jp/for_m/bg_quote_start.png),url(//img.aacdn.jp/for_m/bg_quote_end.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,100% 100%;
    color: #e60071;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.8;
    padding: 30px;
}

/* ガイド紹介枠 */
.ptn-guide-info {background: #f7f7f7; padding: 15px;}
.ptn-guide-info .photo {
    background: #fff;
    border-radius: 50px;
    height: 100px;
    margin-right: 15px;
    overflow: hidden;
    width: 100px;
}
.ptn-guide-info .photo a {/* chromeで崩れる対応 */
    border-radius: 50px;
    display: inline-block;
    height: 100px;
    overflow: hidden;
}
.ptn-guide-info .text {padding: 0; width: 533px;}
.ptn-guide-info .guide-name {margin-bottom: 7px;}
.ptn-guide-info .guide-name .gs {font-size: 13px; font-weight: normal;}
.ptn-guide-info .name {font-size: 18px;}
.ptn-guide-info .read {color: #666;}

/* エモタグリスト */
.tag-list {padding: 10px 15px;}
.tag-list li {margin-right: 10px;}
.tag-list li.emo .tag-bg,
.tag-list li.other .tag-bg {height: 28px; width: 13px;}
.tag-list li.emo .tag-bg {background-position: -273px -80px;}
.tag-list li.other .tag-bg {background-position: -287px -80px;}
.tag-list li.emo .tag-text,
.tag-list li.other .tag-text {
    color: #fff;
    font-size: 11px;
    height: 18px;
    padding: 5px 10px;
    vertical-align: middle;
}
.tag-list li.emo .tag-text {background: #f39900;}
.tag-list li.other .tag-text {background: #231815;}

/* デクワス */
.recommend-list {border-top: 1px solid #231815; padding: 15px 15px 0;}
.recommend-list li {margin-bottom: 5px;}
.recommend-list .heading-area {margin-bottom: 10px;}
.recommend-list .heading-area.has-grid .heading {letter-spacing: normal;}
.recommend-list .heading-area .heading {
    border: none;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin: 0 15px 0 0;
    padding: 0;
}
.recommend-list .heading-area .credit {color: #888; font-size: 11px; padding-top: 5px;}
.arrow-black {
    background-position: -293px -114px;
    height: 7px;
    margin-right: 7px;
    width: 7px;
}
.recommend-list .text {padding: 0 15px 0 0;}

/* 次のページは... */
.next-page-info,
.recommend-info {
    background: #fbebd0;
    margin: 0 15px 20px;
    padding: 8px;
}
.arrow-orange {
    background-position: -283px -126px;
    height: 17px;
    margin: 2px 7px 0 0;
    vertical-align: top;
    width: 17px;
}
.next-page-info .next-prev,
.recommend-info .next-prev {font-size: 16px;}
.next-page-info .link,
.serial-top-link .link,
.recommend-info .link {font-weight: normal; padding-left: 15px;}
.next-page-info .link:hover,
.serial-top-link .link:hover,
.recommend-info .link:hover {text-decoration: underline;}

/* 連載vol1への導線 */
.serial-top-link {
    background: #fff;
    border: 2px dotted #231815;
    line-height: 1;
    margin: 0 15px 20px;
    padding: 8px;
}
.serial-top-link .vol {
    background: #231815;
    color: #fff;
    padding: 5px 10px;
}
.serial-top-link .link {padding: 5px 0 0 10px;}
.serial-top .ptn-photo-center a {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}
/* おすすめ記事への誘導 */
.recommend-info {background: #fff; border: 1px solid #231815;}
.arrow-red {
    background-position: -255px -211px;
    height: 17px;
    margin: 2px 7px 0 0;
    vertical-align: top;
    width: 17px;
}

/* 前と次の連載への導線 */
.link-serial .label {
    background: #231815;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 0
}
.link-serial .prev-serial {left: 0; padding: 8px 20px 8px 16px;}
.link-serial .next-serial {right: 0; padding: 8px 16px 8px 20px;}
.link-serial a:hover .label {background: #f39900;}
.arrow-white-left,
.arrow-white-right {
    background-position: -279px -149px;
    height: 21px;
    margin-right: 7px;
    width: 18px;
}
.arrow-white-right {margin: 0 0 0 7px;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);  
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);  
}

/* News Source下recommend、backnumber */
.cmn-list .heading {
    background:  #231815;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    margin: 0 20px 10px 0;
    padding: 6px 15px;
}
.backnumber-list li {margin: 0 15px 5px;}

/******* sitemap ******/
.single-wrapper {padding: 0 15px;}
.site-list,
.brand-info,
.resule-list {margin-bottom: 20px;}
.site-list .heading,
.resule-list .heading {
    margin: 0 0 10px;
}
.site-list li {margin: 5px 10px; width: 222px;}
.site-list .arrow-black {margin: 7px 7px 0 0;}
.site-list .text:hover {text-decoration: underline;}

/******* brand-info ******/
.brand-info {background: transparent url(//img.aacdn.jp/for_m/bg_about.jpg) no-repeat 50% 50%; min-height: 654px;}
.brand-info .heading {font-size: 40px; margin-bottom: 10px;}
.brand-info .text {font-size: 18px; line-height: 2.5;}

/******* search-result ******/
.resule-list .count-bar {border-bottom: 1px solid #e9e9e9; padding: 3px 5px 8px;}
.resule-list .count-bar .count {color: #888;}
.resule-list .branding-img {padding: 10px 5px;}
.resule-list .branding-img .text {color: #888; font-size: 11px;}
.resule-list .branding-img .brand-logo {margin: -4px 3px 0;}
.result-contents li {border-bottom: 1px solid #eaeaea; padding: 10px 5px;}
.result-contents li:last-child {border: none;}
.result-contents .title {font-size: 16px; margin-bottom: 4px;}
.result-contents .url {
    color: #005ead;
    font-size: 11px;
    margin-bottom: 7px;
}
.result-contents .photo {
    border: 1px solid #ededed;
    width: 60px;
    height: 60px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.result-contents .photo .pic {
    height: 58px;
    display: block;
    display: table-cell;
    /* IE8hack */
    display /*\**/: inline-block\9;
    margin: auto;
    text-align: center;
    text-decoration: none;
    padding: 1px;
    width: 58px;
    vertical-align: middle;
    zoom: 1;
}
.result-contents .photo .pic img {
    max-width: 58px;
    max-height: 58px;
    vertical-align: middle;
    border:none;
    display:inline;
}
.result-contents .text-area {
    color: #999;
    font-size: 11px;
    margin-left: 75px;
}

/******* tag-page ******/
.tag-contents-list .tag-title {margin: 0 5px 25px;}
.tag-contents-list .tag-title .tag-bg-large {
    background-position: -283px -171px;
    height: 40px;
    width: 17px;
}
.tag-contents-list .tag-title .tag-text {
    background: #231815;
    color: #fff;
    font-size: 18px;
    height: 27px;
    padding: 7px 15px;
    vertical-align: middle;
}
.tag-contents-list .tag-title.emo .tag-bg-large {background-position: -283px -214px;}
.tag-contents-list .tag-title.emo .tag-text { background: #f39900;}

/* TU広告用／テキスト */
.notice .text {color: #8f8f8f; font-size: 12px; padding: 0;}
.notice a {color: #8f8f8f;}

/* トップ、カテゴリートップのタイル用 */
.top-list .sys-insert-article{
    display:none;
}
/* 投稿 */
.main-heading.post{
    margin-bottom: 0;
}
.post-user {
    padding: 0 15px 10px;
    line-height: 1;
}
.post-user a {
    display: inline-block;
}
.post-user .user-thumb:after {
    display: none;
}
.post-user .user-thumb img {
    border-radius: 22px;
}
.post-user .user-name {
    padding: 13px 6px;
    font-size: 15px;
}
.post-user .user-name:after {
    display: none;
}
.post-user .user-name:hover {
    text-decoration: underline;
}
/* オレンジの枠 */
.ptn-box-orange {
    padding: 20px;
    background: #fbebd0;
    border-left: 8px dotted #fff;
}
.ptn-box-orange .caption {
    display: inline-block;
    padding: 2px 3px 0;
    margin-bottom: 10px;
    background: #f39900;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
.ptn-box-orange .inner {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
}

/******* PR ******/
.pr-heading{
    position: relative;
}
.pr-heading:before{
    content:"PR";
    color: #fff;
    opacity: 0.8;
    font-size: 11px;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translate( 0%,-50%);
    -moz-transform: translate( 0%,-50%);
    -ms-transform: translate( 0%,-50%);
    -o-transform: translate( 0%,-50%);
    transform: translate( 0%,-50%);
}

.pr-img{
    position: relative;
}
.pr_img:after {
    content:"PR";
    display: block;
    background: #000;
    color: #fff;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    visibility: visible;
    height: auto !important;
    line-height: 1em;
    opacity: 0.5;
    font-size: 11px;
    padding: 5px 10px;
}
#main-column-box .pr_img:after {
    font-size: 14px;
    padding: 7px 18px;
}
.ptn-one-third .pr_img:after {
    font-size: 10px;
    padding: 3px 4px 1px;
}

.main-content .pr_classification {
    padding: 4px 30px 4px 10px;
        width: 70px;
}
.pr_classification:before {
    content:"PR";
    color: #fff;
    opacity: 0.4;
    font-size: 11px;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translate( 0%,-50%);
    -moz-transform: translate( 0%,-50%);
    -ms-transform: translate( 0%,-50%);
    -o-transform: translate( 0%,-50%);
    transform: translate( 0%,-50%);
    line-height: 1;
    display: inline-block;
    padding: 0 2px;
    margin-top: -2px;
    color: #000;
    background: #fff;
}