@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : data.css
Description :
===================================================================== */

/* =====================================================================
*    data_intro
* =================================================================== */
.data {
    padding: calc(110 / 750 * 100%) 0 calc(150 / 750 * 100%);
}

.data_intro {
    margin: 0 0 calc(90 / 750 * 100%);
}

.data_intro .inner {
    width: 100%;
}

.data_intro_ttl {
    width: 100%;
    margin: 0 auto calc(50 / 750 * 100%);
    padding: 0 0 calc(535 / 750 * 100%);
    background: url(../images/data/img_data_tv.png) no-repeat center bottom;
    background-size: calc(510 / 750 * 100%) auto;
}

.data_intro_box p {
    margin: 0 0 2em;
    color: #feec29;
    font-size: 2.8rem;
    line-height: 2;
    text-align: center;
    text-shadow: 0 calc(4 / 750 * 100vw) 0 #a7001a;
}

.data_intro_box p:last-child {
    margin: 0;
}

.data_intro_box p strong {
    font-weight: 700;
}

.data_intro_box .data_intro_img1 {
    display: inline-block;
    width: calc(228 / 750 * 100%);
    margin: 0 0.3em;
    top: 0.2em;
}

.data_intro_box .data_intro_img2 {
    width: calc(242 / 750 * 100%);
    margin: 0.4em auto;
}

.data_intro_box .data_intro_img3 {
    display: inline-block;
    width: calc(113 / 750 * 100%);
    margin: 0 0.2em;
    top: 0.4em;
}

.data_intro_box .data_intro_img4 {
    display: inline-block;
    width: calc(120 / 750 * 100%);
    margin: 0 0.2em;
    top: 0.3em;
}

.data_intro_box .data_intro_img5 {
    width: calc(383 / 750 * 100%);
    margin: 0.9em auto;
}

.data_intro_box .data_intro_img6 {
    width: calc(590 / 750 * 100%);
    margin: 1em auto;
}

.data_intro_txt1 strong {
    padding: 0 calc(3 / 750 * 100%) calc(12 / 750 * 100%);
    line-height: 2.5;
/*
    background: url(../images/data/line_yellow.png) repeat-x left bottom;
    background-size: calc(16 / 750 * 100%) auto;
*/
}

.data_intro_txt1 strong::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(12 / 750 * 100vw);
    background: url(../images/data/line_yellow.png) repeat-x left bottom;
    background-size: auto 100%;
    position: absolute;
    top: 1.5em;
    left: 0;
}

@media screen and (min-width: 768px) {
    .data {
        padding: calc(100 / 1200 * 100%) 0 calc(130 / 1200 * 100%);
    }
    
    .data_intro {
        margin: 0 0 calc(75 / 1000 * 100%);
    }
    
    .data_intro_ttl {
        width: calc(563 / 1000 * 100%);
        margin: 0 auto calc(60 / 1000 * 100%);
        padding: 0 0 calc(548 / 1000 * 100%);
        background-size: calc(510 / 563 * 100%) auto;
    }
    
    .data_intro_box p {
        margin: 0 0 2em;
        font-size: 1.8rem;
        text-shadow: 0 2px 0 #a7001a;
    }
    
    .data_intro_box .data_intro_img1 {
        width: calc(148 / 1000 * 100%);
    }
    
    .data_intro_box .data_intro_img2 {
        width: calc(192 / 1000 * 100%);
        margin: 0.7em auto;
    }
    
    .data_intro_box .data_intro_img3 {
        width: calc(75 / 1000 * 100%);
        margin: 0 0.1em;
        top: 0.45em;
    }
    
    .data_intro_box .data_intro_img4 {
        width: calc(82 / 1000 * 100%);
        top: 0.4em;
    }
    
    .data_intro_box .data_intro_img5 {
        width: calc(383 / 1000 * 100%);
        margin: 1em auto 2.3em;
    }
    
    .data_intro_box .data_intro_img6 {
        width: calc(590 / 1000 * 100%);
        margin: 2em auto;
    }
    
    .data_intro_txt1 strong {
        padding: 0 calc(2 / 1000 * 100%) calc(8 / 1000 * 100%);
        background: url(../images/data/line_yellow.png) repeat-x left bottom;
        background-size: calc(8 / 373 * 100%) auto;
    }
    
    .data_intro_txt1 strong::before,
    .data_intro_txt1 strong::after {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .data {
        padding: 100px 0 130px;
    }
    
    .data_intro {
        margin: 0 0 75px;
    }
}


/* =====================================================================
*    data_present
* =================================================================== */
.data_present {
    margin: 0 0 calc(120 / 750 * 100%);
}

.data_present_wrap {
    padding: calc(60 / 630 * 100%) 0;
    background-color: #fff;
    border-radius: calc(12 / 750 * 100vw);
    overflow: hidden;
}

.data_present_wrap::before {
    content: "";
    display: block;
    width: calc(260 / 630 * 100%);
    padding-top: calc(260 / 630 * 100%);
    background: url(../images/common/bg_dot_g.png) repeat left bottom;
    background-size: calc(24 / 260 * 100%) auto;
    position: absolute;
    bottom: 0;
    right: 0;
}

.data_present_wrap::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(260 / 630 * 100%);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: skewX(-45deg);
    transform: skewX(-45deg);
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
}

.data_present_ttl {
    width: calc(330 / 630 * 100%);
    margin: 0 auto calc(45 / 630 * 100%);
}

.data_present_point {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 calc(35 / 630 * 100%);
}

.data_present_point::before,
.data_present_point::after {
    content: "";
    display: block;
    width: calc(136 / 630 * 100%);
    padding-top: calc(8 / 630 * 100%);
    background: url(../images/common/line_circle_r.png) repeat-x left center;
    background-size: calc(16 / 136 * 100%) auto;
}

.data_present_point .wave_r {
    width: calc(280 / 630 * 100%);
    margin: 0 calc(10 / 630 * 100%);
}

.data_present_point .wave_r::before,
.data_present_point .wave_r::after {
    padding-top: calc(5 / 275 * 100%);
}

.data_present_point .wave_r span {
    padding: 0.2em 0;
}

.data_present_point .wave_r span img {
    width: calc(153 / 280 * 100%);
    margin: 0 auto;
}

.data_present_list {
    z-index: 2;
}

.data_present_list li:not(:last-child) {
    margin: 0 auto calc(80 / 630 * 100%);
}

.data_present_photo {
    width: calc(364 / 630 * 100%);
    margin: 0 auto calc(30 / 630 * 100%);
}

.data_present_txt dt {
    width: calc(542 / 630 * 100%);
    margin: 0 auto calc(30 / 630 * 100%);
}

.data_present_txt dt span {
    display: block;
    margin: 0.5em 0 0;
    color: #cb1013;
    font-size: 3.2rem;
    font-weight: 900;
    text-align: center;
}

.data_present_txt dd {
    width: calc(530 / 630 * 100%);
    margin: 0 auto;
    font-size: 2.8rem;
    line-height: 1.643;
}

.data_present_txt dd a {
    display: inline-block;
    color: #cb1013;    
    font-weight: 700;
}

.data_present_txt dd a::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #cb1013;
}

@media screen and (min-width: 768px) {
    .data_present {
        margin: 0 0 calc(75 / 1200 * 100%);
    }
    
    .data_present_wrap {
        width: calc(840 / 1000 * 100%);
        margin: 0 auto;
        padding: calc(35 / 1000 * 100%) calc(50 / 1000 * 100%) calc(60 / 1000 * 100%);
        border-radius: 6px;
    }
    
    .data_present_wrap::before {
        width: calc(200 / 760 * 100%);
        padding-top: calc(200 / 760 * 100%);
        background-size: calc(16 / 200 * 100%) auto;
    }
    
    .data_present_wrap::after {
        padding-top: calc(200 / 760 * 100%);
    }
    
    .data_present_ttl {
        width: calc(241 / 740 * 100%);
        margin: 0 auto calc(60 / 740 * 100%);
    }
    
    .data_present_point {
        margin: 0 0 calc(20 / 740 * 100%);
    }
    
    .data_present_point::before,
    .data_present_point::after {
        width: calc(258 / 740 * 100%);
        padding-top: calc(8 / 740 * 100%);
        background-size: calc(9 / 258 * 100%) auto;
    }
    
    .data_present_point .wave_r {
        width: calc(190 / 740 * 100%);
        margin: 0 calc(10 / 740 * 100%);
    }
    
    .data_present_point .wave_r span {
        padding: 0.27em 0;
    }
    
    .data_present_point .wave_r span img {
        width: calc(80 / 190 * 100%);
    }
    
    .data_present_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    
    .data_present_list li:not(:last-child) {
        margin: 0 auto calc(50 / 740 * 100%);
    }
    
    .data_present_photo {
        width: calc(274 / 740 * 100%);
        margin: 0;
    }
    
    .data_present_txt {
        width: calc(430 / 740 * 100%);
        margin: calc(35 / 740 * 100%) 0 0;
    }
    
    .data_present_txt dt {
        width: 100%;
        margin: 0 0 calc(20 / 430 * 100%);
    }
    
    .data_present_list li:first-child .data_present_txt dt {
        width: 100%;
    }
    
    .data_present_txt dt span {
        display: block;
        margin: 0.5em 0 0;
        font-size: 1.8rem;
        text-align: left;
    }
    
    .data_present_list li:nth-child(3) .data_present_txt dt span {
        display: block;
        width: 6em;
        position: absolute;
        top: auto;
        bottom: -0.1em;
        left: 0;
        margin: 0 0 0 calc(235 / 430 * 100%);
    }
    
    .data_present_txt dd {
        width: 100%;
        font-size: 1.6rem;
        line-height: 1.875;
    }
}

@media screen and (min-width: 1200px) {
    .data_present {
        margin: 0 0 75px;
    }
}


/* =====================================================================
*    data_notice
* =================================================================== */
.data_notes_list {
    width: calc(530 / 630 * 100%);
    margin: 0 auto;
    z-index: 2;
}

.data_notes_list li {
    margin: 0 0 0.2em;
    padding: 0 0 0 1em;
    font-size: 2.8rem;
    line-height: 1.571;
    text-indent: -1em;
}

.data_notes_list li strong {
    color: #d71518;
}

.data_notes_list li a {
    display: inline;
    color: #333;
    text-decoration: underline;
}

@media screen and (min-width: 768px) {
    .data_notes .data_present_ttl {
        margin: 0 auto calc(40 / 740 * 100%);
    }
    
    .data_notes_list {
        width: calc(700 / 740 * 100%);
    }
    
    .data_notes_list li {
        margin: 0 0 0.2em;
        font-size: 1.4rem;
    }
    
    .data_notes_list li a:hover {
        text-decoration: none;
    }
}

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