﻿@charset "UTF-8";

#mainArea {
    width: 740px;
    margin: 0 auto;
}

#mainArea #mainBlock {
    background-color: #FFFFFF;
    /*background: url(/content/dam/diners/img/common/contents_bg_001.gif) left top no-repeat #FFFFFF;*/
}

#mainBlock #mainBlockInner {
    zoom: 1;
    /*background: url(/content/dam/diners/img/common/contents_bg_002.gif) left bottom no-repeat;*/
}

#mainArea .page_section {
    padding: 0 30px 50px 29px;
}

#mainArea .page_section h2, #mainArea .page_headerBlock01 h2, #mainArea .page_headerBlock02 h2 {
    padding-top: 40px;
    margin-bottom: 10px;
}

#eventReportDetail img {
    width: 100%;
}
#eventReportDetail .eventTitle img {
    width: auto;
}

.imageTextColumn01 .image {position:relative; float: left; margin-right: 20px;}
.imageTextColumn01 .text {zoom: 1; overflow: hidden;}

.imageTextColumn02 .image {position:relative; float: right; margin-left: 20px;}
.imageTextColumn02 .text {zoom: 1; overflow: hidden;}

.imageTextColumnBlock01 .imageTextColumn01,
.imageTextColumnBlock01 .imageTextColumn02 {
    float: left;
    width: 330px;
    padding-right: 10px;
}
.imageTextColumn01 .image .balloon,
.imageTextColumn02 .image .balloon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 5px;
    background: #000;
    color: #fff;
    font-size: 83%;
}

.fLeft { float:left !important; }
.fRight { float:right !important; }
.clear { clear:both !important; }

.clearfix {zoom:1;}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    height: 1%;
}

.w220 {
    width: 220px !important;
}
.w250 {
    width: 40% !important;
}
.w270 {
    width: 270px !important;
}
.w290 {
    width: 290px !important;
}
.w330 {
    width: 330px !important;
}
.w335 {
    width: 335px !important;
}
.w360 {
    width: 360px !important;
}
.w380 {
    width: 380px !important;
}
.mt5 {
    margin-top: 5px !important;
}
.mt15 {
    margin-top: 15px !important;
}
.mt20 {
    margin-top: 20px !important;
}
.mt30 {
    margin-top: 30px !important;
}
.mt40 {
    margin-top: 40px !important;
}
.pl5 {
    padding-left: 5px !important;
}
.pl30 {
    padding-left: 30px !important;
}
.pr5 {
    padding-right: 5px !important;
}
.pr25 {
    padding-right: 25px !important;
}
.pr30 {
    padding-right: 30px !important;
}
.pt0 {
    padding-top: 0px !important;
}
.pt30 {
    padding-top: 30px !important;
}
.pb30 {
    padding-bottom: 30px !important;
}

.borderBox03 {
    border: 1px solid #c4c4c4;
    padding: 10px 15px;
    word-break: break-all;
}
@media (max-width:768px){
	.borderBox03 img{
		height: auto;
	}
}

a.btnBlock05:before {
    font-family: fontello;
    speak: none;
    font-variant: normal;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    text-align: center;
    width: 2rem;
    height: 2rem;
    font-style: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    content: '\f105';
    text-decoration: none;
    left: 0;
    font-size: 1.2em;
}



/* repotr_common.css */

.eventIcon {
    padding: 6px 0;
}

.eventIcon span {
    display: inline-block;
    padding: 2px 10px;
    margin: 0 6px 0 0;
    color: #fff;
    border-radius: 2px;
}

.eventIcon .category {
    background: #74b3c9;
}

.eventIcon .area {
    background: #b98c5c;
}

.eventIcon .video {
    background: #4d73ab;
}

#eventList li:hover {
    cursor: pointer;
}

#eventList li img {
    -moz-transition: all linear .3s;
    -o-transition: all linear .3s;
    -webkit-transition: all linear .3s;
    transition: all linear .3s;
}

#eventList li:hover img {
    opacity: .7;
    filter: alpha(opacity=70);
}

#eventList li:hover a {
    text-decoration: underline;
}

#eventList li .txt p {
    margin-bottom: .2em;
}

#eventList li .txt p.date {
    font-weight: bold;
}

#navEventReport #eventList {
    margin-bottom: 20px;
    border-bottom: 1px solid #D1D1D1;
}

#navEventReport #eventList li {
    margin-bottom: 30px;
}

#navEventReport #eventList li img {
    width: 110px;
    height: 110px;
    float: left;
}

#navEventReport #eventList li .txt {
    width: 185px;
    float: right;
}

#eventReport #eventFilter {
    text-align: right;
    margin-bottom: 20px;
}

#eventReport #eventFilter select {
    padding: 1px 1px;
    color: #fff;
    font-size: 12px;
}

#eventReport #eventFilter select.category {
    background: #74b3c9;
}

#eventReport #eventFilter select.area {
    background: #b98c5c;
}

#eventReport #eventFilter select.video {
    background: #4d73ab;
}

#eventReport #eventList {
    margin-left: -19px;
}

#eventReport #eventList li {
    display: inline-block;
    vertical-align: top;
    margin-left: 19px;
    margin-bottom: 30px;
    width: 330px;
}

#eventReport #eventList li:first-child {
    position: relative;
    width: 679px;
    font-size: 115%;
}

#eventReport #eventList li:first-child img {
    width: 679px;
}

#eventReport #eventList li:first-child .date {
    position: absolute;
    right: 0;
    top: 290px;
}

#eventReport #eventList li img {
    width: 330px;
}

#eventReportDetail.page_section {
    padding-top: 40px;
}

#eventReportDetail .eventTitle {
    margin: 0 0 10px;
}

#eventReportDetail .eventTitle th {
    vertical-align: middle;
    width: 115px;
    border-right: 1px solid #a1a1a1;
    text-align: left;
}

#eventReportDetail .eventTitle td {
    padding: 5px 10px;
}

#eventReportDetail .eventTitle h1 {
    font-size: 133%;
    color: #633633;
    margin-bottom: .2em;
}

#eventReportDetail .date {
    font-weight: bold;
    text-align: right;
    margin: 10px 0;
}

#eventReportDetail .lastComment {
    padding: 10px;
    border: 1px solid #bbb
}

#eventSlide {
    position: relative;
    width: 678px;
    height: auto;
    margin: 0 auto;
}

#eventSlide li {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 0;
    -moz-transition: all linear 1s;
    -o-transition: all linear 1s;
    -webkit-transition: all linear 1s;
    transition: all linear 1s;
}

#eventSlide li.active {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 1;
}

#eventSlide li img {
    display: block;
    width: 100%;
    height: auto;
}

#eventSlide .btn a {
    position: absolute;
    top: 50%;
    margin-top: -18px;
    opacity: .5;
    filter: alpha(opacity=50);
    z-index: 10;
    -moz-transition: all linear .3s;
    -o-transition: all linear .3s;
    -webkit-transition: all linear .3s;
    transition: all linear .3s;
}

#eventSlide .btn a.fwd {
    right: 0;
}

#eventSlide .btn a:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

#eventSlide .pager {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35px;
    overflow: hidden;
    text-align: center;
    font-size: 0;
    z-index: 10;
}

#eventSlide .pager a {
    display: inline-block;
    width: 21px;
    height: 21px;
    background: url(/content/dam/diners/img/event/report/dcon.png) no-repeat;
}

#eventSlide .pager a.active {
    background: url(/content/dam/diners/img/event/report/curr_dcon.png) no-repeat;
}

#eventSlide ul li {
    position: absolute;
    width: 100%;
    height: 100%;
}

div#eventSlide:before {
    content: "";
    display: block;
    padding-top: 41%; /* 1:1 */
}

#eventReportDetail #eventReportOther h2 {
    margin-bottom: 3rem;
}

#eventReportOther #eventList {
    margin-left: -19px;
}

#eventReportOther #eventList li {
    display: inline-block;
    vertical-align: top;
    margin-left: 19px;
    margin-bottom: 30px;
    width: 328px;
}

#eventReportOther #eventList li img {
    width: 100%;
    margin-bottom: 6px;
}

iframe{
    display: block;
    margin: 0 auto;
}

@media (max-width:768px){
    #eventReportDetail .eventTitle th {
        display:block;
        border-right:none;
    }
    #eventReportDetail .eventTitle td {
        display:block;
    }
    .imageTextColumn01 .text {width:100%;padding-top: 5%;}
    .imageTextColumn01 .image { width:100%; }
    .imageTextColumn02 .text {width:100%;padding-top: 5%;}
    .imageTextColumn02 .image { width:100%; }
    .w250 {
        width: 100% !important;
    }
    #eventSlide {
        width: 100%;
    }
    #eventSlide .btn a.fwd {
        right: -11px;
    }
    #eventSlide .btn a img {
        width: 70%;
    }
    #eventReportOther #eventList li {
        width: auto;
    }
    .youtube_report {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 56.25%;
        overflow: hidden;
	margin-top: 30px;
    }
    .youtube_report iframe{
        position: absolute;
    	top: 0;
    	left: 0;
    	width: 100% !important;
    	height: 100% !important;
    }
    .youtube_report .mt30{
        margin-top: 0 !important;
    }
}
/* headerBlock01 */
#mainBlock .index_headerBlock01 .main{
    float:left;
    width:470px;
    padding:28px 0 0 30px;
}
#mainBlock .index_headerBlock01 .nav{
    float:right;
    width:171px;
    background:url(/content/dam/diners/img/common/innerright_bg_001.gif) left top no-repeat #EAEAEA;
    padding:13px 15px 50px 15px;
}
#mainBlock .index_headerBlock01 h1{
    margin-bottom:25px;
}
#mainBlock .index_headerBlock01 h2{font-size:117%;}

#mainBlock .index_headerBlock01 .conBlock01{
    margin-bottom:40px;
}
#mainBlock .index_headerBlock01 .conBlock01 .txt{
    width:325px;
}
#mainBlock .index_headerBlock01 .conBlock01 .img{
    width:125px;
}

#mainBlock .index_headerBlock01 .nav_list li{
    border-top:1px solid #c9caca;
    padding:20px 0;
}
#mainBlock .index_headerBlock01 .nav_list li.first{
    border-top:0;
}

#mainBlock #aClubhotels .nav_list li {
    border-top: 0;
    border-bottom:1px solid #c9caca;
}


#mainBlock .page_headerBlock01 .main{
    float:left;
    width:440px;
    padding:30px 0 0 0px;
}
#mainBlock .page_headerBlock01 .main02{
    float:left;
    padding:30px 0 0 0px;
}
#mainBlock .page_headerBlock01 .nav{
    float:right;
    width:290px;
    text-align:right;
}

#mainBlock .page_headerBlock01 .nav02{
    float:right;
    text-align:right;
}


#mainBlock .page_headerBlock01 .main .section{
    padding-left:30px;
}
#mainBlock .page_headerBlock01 .main02 .section{
    padding-left:30px;
}
#mainBlock .page_headerBlock01 .main .list{
    margin-top:20px;
    padding:6px 30px;
    /*width:370px;*/
    background:#ededed;
}
#mainBlock .page_headerBlock01 .main .list .tableBlock_in th{
    width:90px;
    text-align:left;
    vertical-align:middle;
}
#mainBlock .page_headerBlock01 .main .list .tableBlock_in td{
    width:270px;
    text-align:left;
    vertical-align:middle;
}


/* headerBlock02 */

#mainBlock .page_headerBlock02 .main{
    float:right;
    width:412px;
    padding:30px 0 0 0px;
}
#mainBlock .page_headerBlock02 .nav{
    float:left;
    width:328px;
}

#mainBlock .page_headerBlock02 .main .section{
}
#mainBlock .page_headerBlock02 .main .list{
    margin-top:20px;
    padding:6px 11px;
    /*width:348px;*/
    background:#ededed;
}
#mainBlock .page_headerBlock02 .main .list .tableBlock_in th{
    width:90px;
    text-align:left;
    vertical-align:middle;
}
#mainBlock .page_headerBlock02 .main .list .tableBlock_in td{
    width:270px;
    text-align:left;
    vertical-align:middle;
}

.eventIcon {
    padding: 6px 0;
}

.eventIcon span {
    display: inline-block;
    padding: 2px 10px;
    margin: 0 6px 0 0;
    color: #fff;
    border-radius: 2px;
}

.eventIcon .category {
    background: #74b3c9;
}

.eventIcon .area {
    background: #b98c5c;
}

.eventIcon .video {
    background: #4d73ab;
}

#eventList li:hover {
    cursor: pointer;
}
@media (max-width:768px){
    #mainArea {
        width: 95%;
    }
    #mainArea .page_section {
        padding: 30px 1.5rem 29px;
    }
}



/* module.css対応 */

.dc__ele_btn {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    padding: 0;
}


/******************************

現行ページから、HTMLを移植したページのSP表示対応

******************************/

#mainArea .page_section .imageTextColumn02 .text h2,
#mainArea .page_section h2, 
#mainArea .page_headerBlock01 h2, 
#mainArea .page_headerBlock02 h2 {
    margin-top: 3.5rem;
    margin-bottom: 1.0rem;
    padding-top: 0px;
}
#mainArea .page_section .imageTextColumn01 .text_pt0 h2,
#mainArea .page_section .imageTextColumn02 .text_pt0 h2 {
    margin-top: 0rem;
    margin-bottom: 1.0rem;
    padding-top: 0px;
}
#eventReportDetail h2 img,
#eventReportDetail .w360 img,
#eventReportDetail .w380 img,
#eventReportDetail p img {
    width: auto;
}
#mainBlock .page_headerBlock01 .nav {
    margin-top: 18px;
}

.w332 {
    width: 332px !important;
}
.mr17 {
    margin-right: 17px !important;
}
.mt0 {
    margin-top: 0px !important;;
}
@media (max-width: 768px){
    .w380,.w360,.w290,.w270,.w220,.w335,.w332 {
        width: 100% !important;
    }
    #mainArea .page_section h2 {
        margin-top: 3.5rem;
        margin-bottom: 1.0rem;
        padding-top: 0px;
    }
    .imageTextColumn01 .text_pt0,.imageTextColumn02 .text_pt0 {
        padding-top: 0 !important;;
    }
    #mainArea .page_section .imageTextColumn01 .text_pt0 h2,
    #mainArea .page_section .imageTextColumn02 .text_pt0 h2 {
        margin-top: 3.5rem;
        margin-bottom: 1.0rem;
        padding-top: 0px;
    }
    #eventReportDetail h2 img,
    #eventReportDetail .w360 img,
    #eventReportDetail .w380 img,
    #eventReportDetail p img  {
        width: 100%;
    }

    #mainBlock .page_headerBlock01 .main .section {
        padding-left: 0px;
    }
    #mainBlock .page_headerBlock01 .main {
        padding: 30px 0 30px 0px;
    }
    #mainBlock .page_headerBlock01 .main.w380 {
        padding: 0px 0 30px 0px;
        margin: 0px !important;
    }
    h1.dc__sp_noimg {
        display: none;
    }
    #mainBlock .page_headerBlock01 .nav {
        margin-top: 0px;
    }
    #mainBlock .page_headerBlock01 .nav.pr30 {
        padding-right: 0px !important;
    }
    #eventReportDetail .fLeft {
        float: none;
        padding: 0 0 0px 0;
        margin: 0 0 30px 0;
        width: 100%;
    }
    #eventReportDetail .fLeft.pr5,
    #eventReportDetail .fLeft.pl5,
    #eventReportDetail .fLeft.pr25 {
        padding: 0 !important;
        margin: 0 !important;
    }
    #eventReportDetail .fLeft.pr5 {
        margin-top: 20px !important;
    }
    #eventReportDetail .fLeft img {
        width: 100%;
    }
}


/* ==========================================================================
シェアボタン　左寄せ　コンテンツ幅左合わせ
========================================================================== */

/* PC */
@media (min-width: 769px) {
    /* share btn */
    .CCM001_Grid .left {
        position: relative;
        float: left;
        margin-left: 0px;
        }
}

/* SP */
@media (max-width: 768px) {
    /* share btn */
    .CCM001_Grid .dc__cont--sns_share .dc__cont_share {
        float: none;
    }
    
    .CCM001_Grid .dc__cont--sns_share .dc__box_share {
        position: absolute;
        top: 40px;
        right: 0;
        text-align: left !important;
        z-index: 1000;

    }
}

@media (min-width: 769px) {
    .dc__fixed_content.dc__grid_01.dc__comp_mtb {
        min-width: 740px;
        max-width: 740px;
        width: 740px !important;
        padding: 0px;
    }
}
