@charset "utf-8";

/* ////////////////////////////////////////////////////////////////////////////////////////////////////
 *
 * ■□■□■　トップページ専用の定義CSS　■□■□■
 *
 * Author   : hada
 * LastDate : 2014/1/6
 *
 * ///////////////////////////////////////////////////////////////////////////////////////////////// */

/*--------------------------------------------------------------------------------
　▼　共通CSS
--------------------------------------------------------------------------------*/

    /*///boxset内容///*/
    .main,
    .topInfo,
    .bigBox01,
    .bigBox02,
    .bigBox03,
    .bigBox04,
    .bigBox05,
    .bigBox06,
    .middleBox01,
    .middleBox02,
    .middleBox03,
    .middleBox04,
    .middleBox05,
    .middleBox06,
    .smallBox01,
    .smallBox02,
    .smallBox03,
    .smallBox04,
    .smallBox05,
    .smallBox06,
    .surveyBox {
        clear: both;
    }
    .main {
        position: relative;
    }
    .boxWrap {
        display: grid;
    }
    /*///.mainスライダー///*/

    /* .flickSlider
    --------------------------- */
    .flickSlider {
        margin: 0 auto;
        text-align: left;
        display: none;
    }
    .flickSlider .flickView {
        width: 100%;
        text-align: left;
        position: relative;
        overflow: hidden;
    }
    .flickSlider .flickView ul {
        top: 0;
        left: 0;
        width: 100%;
        height: 270px !important;
        position: absolute;
        overflow: hidden;
    }
    .flickSlider .flickView ul li {
        width: 100%;
        float: left;
        display: inline;
        overflow: hidden;
        white-space:nowrap;
        margin: 0;
    }
    .flickSlider .flickView ul li img {
        width: 100%;
    }

    /* .flickThumb
    --------------------------- */
    .flickSlider .flickThumb {
        background: url(https://test-contents.pachiseven.jp/img/main_iconbg_18.png) no-repeat center 3px;
        display: table;
        position: absolute;
        bottom: 0;
        width: 98%;
        overflow: hidden;
        float: left;
        text-align: center;/* added */
    }
    .flickSlider .flickThumb ul {
        display: table-cell;
        text-align: center;
        margin: 0 auto;
        display: inline-block;
        padding: 0 16px;
    }
    .flickSlider .flickThumb ul li {
        float: left;
        cursor: pointer;
        height: 10px;
        width: 8px;/* added */
        color: #666;/* added */
        font-size: 1em;
        line-height: 1em;
        margin-right: 2px;
        background: url(https://test-contents.pachiseven.jp/img/icon/maru_non.png) no-repeat left 2px;
        background-size: 8px;
    }
    .flickSlider .flickThumb ul li:last-child {
        margin-right: 0;
    }
    .flickSlider .flickThumb ul li.active {
        background: url(https://test-contents.pachiseven.jp/img/icon/maru_activ.png) no-repeat left 2px;
    }

    /* =======================================
        ClearFixElements
    ======================================= */
    .flickSlider .flickView ul:after,
    .flickSlider .flickThumb ul:after {
        content: ".";
        height: 0;
        clear: both;
        display: block;
        visibility: hidden;
    }

    .flickSlider .flickView ul,
    .flickSlider .flickThumb ul {
        display: inline-block;
        overflow: hidden;
    }
    /*//スライダーここまで//*/

    .mainBannerBox,
    .banner01,
    .banner02,
    .banner03,
    .banner04,
    .banner05,
    .banner06 {
        overflow: hidden;
        zoom:1;
        clear: both;
    }
    .mainBannerBox li,
    .banner01 li,
    .banner02 li,
    .banner03 li,
    .banner04 li,
    .banner05 li,
    .banner06 li {
        position: relative;
    }
    .mainBannerBox li p.ad_icon,
    .banner01 li p.ad_icon,
    .banner02 li p.ad_icon,
    .banner03 li p.ad_icon,
    .banner04 li p.ad_icon,
    .banner05 li p.ad_icon,
    .banner06 li p.ad_icon  {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 35px;
    }
    .mainBannerBox li p.ad_icon img,
    .banner01 li p.ad_icon img,
    .banner02 li p.ad_icon img,
    .banner03 li p.ad_icon img,
    .banner04 li p.ad_icon img,
    .banner05 li p.ad_icon img,
    .banner06 li p.ad_icon img {
        width: 100%;
    }

    #bannerBox {
        clear: both;
    }
    #bannerBox li {
        background-color: #000;
    }
    .twitter-timeline iframe {
        width: 100% !important;
    }

    /* /////2014.12.04追加分/// */
    .surveyBox {
        margin-bottom: 3%;
    }
    .surveyBox div {
        background-color: #FFFFFF;
        border-radius: 5px;
        overflow: hidden;
        zoom:1;
    }
    .surveyBox div h3 {
        background: url(https://test-contents.pachiseven.jp/img/logo2.png) no-repeat 18px center #006EAB;
        background-size: 80px;
        padding: 2% 12% 2% 20%;
        color: #FFFFFF;
        font-size: 1.6em;
        font-weight: bold;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        text-align: right;
    }
    .qList li {
        background: url(https://test-contents.pachiseven.jp/img/enquete/q.png) no-repeat 5px center;
        background-size: 45px;
        border: solid 4px #006EAB;
        border-radius: 4px;
        text-align: left;
        margin: 3% 3% 1% 3%;
    }
    .qList .nonEnquete {
        background: none;
    }
    .qList li a {
        display: block;
        padding: 4% 8% 4% 19%;
        line-height: 1.2em;
        font-size: 2.2em;
        font-weight: bold;
    }
    .qList .nonEnquete a {
        padding-left: 8%;
        text-align: center;
        font-size: 1.0em;
    }
    .redText {
        font-weight: bold;
        color: #FF0004;
        font-size: 1.4em;
        margin: 3%;
    }
    .linkBtn a {
        background-color: #006EAB;
        border-radius: 4px;
        color: #FFFFFF;
        padding: 3%;
        margin: 2% 3% 4% 3%;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
    }
/* /////2015.02.20追加分/// */
    .mainBannerBox {
        background-color: #000000;
/*        height: 64px;*/
        margin: 2% 1%;
    }
    .mainBannerBox img {
/*        height: 64px !important;*/
    }
    .topInfo,
    .topInfo h2 {
        margin: 0;
        color: #fff;
        font-weight: bold;
        -moz-text-shadow: 2px 2px 2px #000;
        -webkit-text-shadow: 2px 2px 2px #000;
        text-shadow: 2px 2px 2px #000;

    }
    #site_info p {
        line-height: 1.25em;
        margin: 0;
        font-weight: bold;
        text-shadow: 1px 1px 1px #fff,
                     -1px 1px 1px #fff,
                     1px -1px 1px #fff,
                     -1px -1px 1px #fff;
    }

    #articleListBar {
        overflow: hidden;
        zoom: 1;
        display: block;
        color: #fff;
        background-color: #000;
        text-align: left;
    }
    #articleListBar h3 {
        margin: 0 0 2px 0;
        font-weight: bold;
        font-size: 1.2em;
        line-height: 1.1em;
    }
    #articleListBar ol {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }
    #articleListBar li {
        list-style: none;
        overflow: hidden;
    }
    #articleListBar a {
        color: #fff;
    }

/*--------------------------------------------------------------------------------
　▼　■□■スマホサイト用（幅680px未満）CSSの記述■□■
--------------------------------------------------------------------------------*/

@media screen and (max-width:680px) {
    .main,
    .topInfo,
    .bigBox01,
    .bigBox02,
    .bigBox03,
    .bigBox04,
    .bigBox05,
    .bigBox06,
    .middleBox01,
    .middleBox02,
    .middleBox03,
    .middleBox04,
    .middleBox05,
    .middleBox06,
    .smallBox01,
    .smallBox02,
    .smallBox03,
    .smallBox04,
    .smallBox05,
    .smallBox06 {
        margin-bottom: 1.5%;
        background-color: #000;
        padding: 6px;
    }

    #site_info {
        margin: 0 auto;
        padding: 0;
    }
    #site_info p {
        font-size: 0.5em;
    }

    .topInfo {
        margin: 0 0 1% 0;
        background: url(https://test-contents.pachiseven.jp/img/sp_element.png) no-repeat left top;
        background-size: 100% 61px;
    }
    .topInfo h2 {
        font-size: 1.5em;
        line-height: 1.25em;
    }
    .topInfo h2.sp {
        display: block;
    }
    .topInfo h2.pc {
        display: none;
    }

    .boxWrap {
        grid-template-columns: repeat(6, calc((100% - 30px) / 6));
        grid-template-rows: 232px;
        grid-gap: 6px;
        margin-bottom: 20px;
    }
    .boxWrap > * {
        margin: 0;
    }
    .boxWrap > [class^=banner] {
        display: flex;
        justify-content: space-between;
    }
    .boxWrap > [class^=banner] li {
        position: relative;
        flex-basis: calc(50% - 3px);
        background-color: #000;
        padding: 6px;
        box-sizing: border-box;
    }
    .boxWrap > [class^=banner] li .ad_icon {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 35px;
    }
    .boxWrap > [class^=banner] li .ad_icon img {
        width: 100%;
    }

    .bigBox01 {
        grid-column: 1 / 7;
        grid-row: 1;
    }
    .smallBox01 {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .middleBox01 {
        grid-column: 3 / 7;
        grid-row: 2;
    }
    .banner01 {
        grid-column: 1 / 7;
        grid-row: 3;
    }
    .bigBox02 {
        grid-column: 1 / 7;
        grid-row: 5;
    }
    .smallBox02 {
        grid-column: 5 / 7;
        grid-row: 4;
    }
    .middleBox02 {
        grid-column: 1 / 5;
        grid-row: 4;
    }
    .banner02 {
        grid-column: 1 / 7;
        grid-row: 6;
    }
    .bigBox03 {
        grid-column: 1 / 7;
        grid-row: 7;
    }
    .smallBox03 {
        grid-column: 1 / 3;
        grid-row: 8;
    }
    .middleBox03 {
        grid-column: 3 / 7;
        grid-row: 8;
    }
    .banner03 {
        grid-column: 1 / 7;
        grid-row: 9;
    }
    .bigBox04 {
        grid-column: 1 / 7;
        grid-row: 11;
    }
    .smallBox04 {
        grid-column: 5 / 7;
        grid-row: 10;
    }
    .middleBox04 {
        grid-column: 1 / 5;
        grid-row: 10;
    }
    .banner04 {
        grid-column: 1 / 7;
        grid-row: 12;
    }
    .bigBox05 {
        grid-column: 1 / 7;
        grid-row: 14;
    }
    .smallBox05 {
        grid-column: 1 / 3;
        grid-row: 13;
    }
    .middleBox05 {
        grid-column: 3 / 7;
        grid-row: 13;
    }
    .banner05 {
        grid-column: 1 / 7;
        grid-row: 15;
    }
    .bigBox06 {
        grid-column: 1 / 7;
        grid-row: 16;
    }
    .smallBox06 {
        grid-column: 5 / 7;
        grid-row: 17;
    }
    .middleBox06 {
        grid-column: 1 / 5;
        grid-row: 17;
    }
    .banner06 {
        grid-column: 1 / 7;
        grid-row: 18;
    }

    #bannerBox {
        width: 100%;
        margin: 0 0 3% 0;
    }
    #bannerBox li {
        margin-bottom: 1.5%;
        position: relative;
        background-color: #000;
        padding: 5.5px;
    }
    #bannerBox li p {
        margin: 0;
    }
    #bannerBox li p.ad_icon {
        position: absolute;
        left: 0;
        bottom: 0;
        margin: 0;
        width: 35px;
    }
    #bannerBox li p.ad_icon img {
        width: 100%;
    }
    .timeline_frame {
        display: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    /* pachiad.com */
    .pachiad_frame {
        margin: 0;
        padding: 0;
        width: 100%;
        margin-bottom: 5px;
    }
    .pachiad_frame a img {
        width: 300px; height: 250px;
    }
    /* Google Adsense */
    .my_adslot {
        width: 300px; height: 250px;
    }
    .adsbygoogle_frame {
        margin-bottom: 5px;
    }

    #articleListBar {
        font-size: 0.85em;
        padding: 5.5px;
        margin: 0 0 1% 0;
    }
    #articleListBar li {
        margin: 0 0 1% 0;
        padding: 0;
        height: 45px;
    }
    #articleListBar li img {
        float: left;
        width: 35%;
    }
    #articleListBar li .title {
        float: left;
        background-color: #0271cb;
        width: 63%;
        height: 41px;
        padding: 2px 1%;
    }
    #articleListBar .moreLink {
        margin-top: 1.5%;
        margin-bottom: 1.5%;
    }

    #banner_pc {
        display: none;
    }
}

/*--------------------------------------------------------------------------------
　▼　■□■PCサイト用（幅550px以上）CSSの記述■□■
--------------------------------------------------------------------------------*/

@media screen and (min-width:680px) {

    #site_info {
        width: 922px;
        margin: 0 auto;
    }
    #site_info p {
        margin: 10px 0;
        text-align: center;
        line-height: 1.25em;
    }

    /*///流れるニュース(reportBox)///*/
    #tick_titleBox {
        width: 65px;
        height: 20px;
        float: left;
        text-align: center;
    }
    #tick_titleBox .title {
        vertical-align: middle;
        color: #FFF;
        font-weight: bold;
        line-height: 1em;
    }
    #tick_titleBox .title img {
        width: 45px;
    }
    .ticker {
        margin: 0 auto;
        width: 690px;
        height: 15px;
        text-align: left;
        float: right;
        border: #ccc 1px solid;
        position: relative;
        overflow: hidden;
        padding: 0 3px;
        background-color: #FFF;
    }

    .ticker ul {
        width: 100%;
        position: relative;
    }

    .ticker ul li {
        width: 100%;
        display: none;
        line-height: 1.3em;
    }

    /*///流れるニュースここまで///*/
    /*///boxset内容///*/
    .main,
    .topInfo,
    .bigBox01,
    .bigBox02,
    .bigBox03,
    .bigBox04,
    .bigBox05,
    .bigBox06,
    .middleBox01,
    .middleBox02,
    .middleBox03,
    .middleBox04,
    .middleBox05,
    .middleBox06,
    .smallBox01,
    .smallBox02,
    .smallBox03,
    .smallBox04,
    .smallBox05,
    .smallBox06,
    .surveyBox {
        position: relative !important;
        float: none !important;
        top: auto !important;
        padding: 8px;
        margin: 0;
        background-color: #000;
        border: none;
        box-sizing: border-box;
    }
    [class*=Box0] > a {
        display: block;
        width: 100%;
        height: 100%;
    }
    .main {
        width: 100%;
    }
    .topInfo {
        margin: 0 0 7px 0;
        padding: 0;
        background: url(https://test-contents.pachiseven.jp/img/pc_element.png) no-repeat left top;
        background-size: 100%;
        height: 43px;
    }
    .topInfo h2 {
        font-size: 1.8em;
    }
    .topInfo h2.sp {
        display: none;
    }
    .topInfo h2.pc {
        display: block;
        text-align: center;
        line-height: 1.8em;
    }

    /* .flickSlider
    --------------------------- */
    .flickSlider,
    .flickSlider .flickView {
        width: 100%;
        box-sizing: border-box;
    }

    .boxWrap {
        grid-template-columns: repeat(4, calc((100% - 24px) / 4));
        grid-template-rows: 240px;
        grid-gap: 8px;
    }
    .boxWrap > [class^=banner] {
        display: none;
    }
    .bigBox01 {
        grid-column: 1 / 4;
        grid-row: 1;
        /*
        width: 576px;
        position: absolute;
        top: 771px;
        */
    }
    .smallBox01 {
        grid-column: 4 / 5;
        grid-row: 1;
    }
    .smallBox01 img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
    .middleBox01 {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .middleBox02 {
        grid-column: 3 / 5;
        grid-row: 2;
    }
    .smallBox02 {
        grid-column: 1 / 2;
        grid-row: 3;
    }
    .bigBox02 {
        grid-column: 2 / 5;
        grid-row: 3;
    }
    .bigBox02 p {
        margin-bottom: 0;
    }

    .bigBox03 {
        grid-column: 1 / 4;
        grid-row: 4;
    }
    .smallBox03 {
        grid-column: 4 / 5;
        grid-row: 4;
    }
    .middleBox03 {
        grid-column: 1 / 3;
        grid-row: 5;
    }
    .middleBox04 {
        grid-column: 3 / 5;
        grid-row: 5;
    }
    .smallBox04 {
        grid-column: 1 / 2;
        grid-row: 6;
    }
    .bigBox04 {
        grid-column: 2 / 5;
        grid-row: 6;
    }
    .bigBox04 p {
        margin-bottom: 0;
    }

    .bigBox05 {
        grid-column: 1 / 4;
        grid-row: 7;
    }
    .smallBox05 {
        grid-column: 4 / 5;
        grid-row: 7;
    }
    .middleBox05 {
        grid-column: 1 / 3;
        grid-row: 8;
    }
    .middleBox06 {
        grid-column: 3 / 5;
        grid-row: 8;
    }
    .smallBox06 {
        grid-column: 1 / 2;
        grid-row: 9;
    }
    .bigBox06 {
        grid-column: 2 / 5;
        grid-row: 9;
    }

    #secondary > [class^=banner] {
        width: 192px;
        margin: 0;
    }
    #secondary > [class^=banner] li {
        position: relative;
        width: 100%;
        padding: 8px;
        float: none;
        text-align: left;
        margin-bottom: 5px;
        background-color: #000;
        box-sizing: border-box;
    }
    #secondary > [class^=banner] li .ad_icon {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 35px;
    }
    #secondary > [class^=banner] p {
        padding: 0;
    }
    #secondary > [class^=banner] img {
        width: 100%;
    }

    #bannerBox {
        clear: both;
        text-align: left;
        margin: 0;
        margin-top: 8px;
        width: 776px;
    }
    #bannerBox li {
        margin-bottom: 10px;
        background: none;
        padding: 8px;
        background-color: #000;
        position: relative;
    }
    #bannerBox li img {
        width: 100%;
    }
    .mainBannerBox li p.ad_icon,
    #bannerBox li p.ad_icon,
    #btnBox li p.ad_icon {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 35px;
    }
    #bannerBox li p,
    #btnBox li p {
        margin-bottom: 0;
    }
    .mainBannerBox li p.ad_icon img {
        height: auto !important;
    }
    .mainBannerBox li p.ad_icon img,
    #bannerBox li p.ad_icon img,
    #btnBox li p.ad_icon img {
        width: 100%;
    }
    .timeline_frame {
        display: none;
        margin: 0;
        padding: 0;
        width: 192px;
        position: absolute;
        right: 0;
        top: 2214px;
        /*top: 1796px;*/
    }
    /* pachiad.com */
    .pachiad_frame {
        margin: 0;
        padding: 0;
        width: 192px;
        position: absolute;
        right: 0;
        top: 2624px;
        /* top: 2206px;*/
    }
    .pachiad_frame a img {
        width: 190px; height: auto;
    }
    /* Google Adsense */
    .my_adslot {
        width: 190px; height: 190px;
    }
    .adsbygoogle_frame {
        margin: 0;
        padding: 0;
        width: 192px;
        /*
        position: absolute;
        right: 0;
        top: 2792px;
        */
        /*top: 2374px;*/
        /*top: 2206px;*/
    }
    /* /////2014.12.04追加分/// */
    .surveyBox {
        width: 100%;
        position: absolute;
        top: 479px;
        right: 0;
        padding: 0 8px;
        margin: 0 0 8px;
        box-sizing: border-box;
    }
    .surveyBox div h3 {
        background: url(https://test-contents.pachiseven.jp/img/logo2.png) no-repeat 5px center #006EAB;
        background-size: 40px;
        font-size: 1.0em;
        text-align: right;
        padding: 5px;
    }
    .qList {
        margin-bottom: 0;
    }
    .qList li {
        background: url(https://test-contents.pachiseven.jp/img/enquete/q.png) no-repeat 3px center;
        background-size: 28px;
    }
    .qList li a {
        padding : 14px 5px 14px 36px;
        line-height: 1.2em;
        font-size: 1.0em;
        font-weight: bold;
        height: 32px;
        position: relative;
    }
    .qList .nonEnquete a {
        padding: 24px 5px 4px 5px;
        font-size: 0.9em;
    }
    .qList li a span {
        background: none;
        padding: 0;
        position: absolute;
        /*top: 50%;*/
        /*margin-top: -0.5em;*/
    }
    .redText {
        font-weight: bold;
        color: #FF0004;
        font-size: 0.9em;
    }
    .linkBtn a {
        padding: 9px;
        line-height: 1.2em;
        border-radius: 2px;
        margin: 0 5px 5px 5px;
        font-size: 1.0em;
    }
/* /////2015.02.20追加分/// */
    .mainBannerBox {
        background-color: #000000;
        height: 200px;
        margin: 0px;
    }
    .mainBannerBox img {
        height: 200px !important;
    }

    section#primary {
        border: none;
        background-color: transparent !important;
    }

    #articleListBar {
        padding: 0 8px 8px 8px;
        margin: 0 0 8px 0;
        font-size: 0.8em;
    }
    #articleListBar ol {
        flex-wrap: wrap;
    }
    #articleListBar h3 {
        height: 14px;
    }
    #articleListBar li {
        position: relative;
        flex-basis: calc(20% - (32px / 5));
        padding: 0;
        margin: 0;
        margin-bottom: 8px;
    }
    #articleListBar li:nth-of-type(5n) {}
    #articleListBar li a {
        display: block;
        width: 100%;
    }
    #articleListBar li img {
        position: relative;
        width: 100%;
        aspect-ratio: 4 / 3;
        -o-object-fit: cover;
           object-fit: cover;
        z-index: 1;
    }
    #articleListBar li .title {
        position: absolute;
        bottom: 0px;
        background-color: rgba(2, 113, 203, 0.7);
        width: 100%;
        height: 28px;
        padding: 2px 8px 2px 2px;
        line-height: 1.3em;
        z-index: 2;
    }
    #articleListBar .moreLink {
        clear: both;
        height: 16px;
    }
}