@charset "utf-8";
    @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);


    .sp {
        display: none;
    }
    /*765ぁらスマホ*/
    /* CSS Document */

    .clearfix {
        zoom: 1;
        /* for IE5.5 - IE7 */
    }

    .clearfix:after {
        content: url(pixel.gif);
        display: block;
        clear: both;
        height: 0;
    }

    .clearfix {
        display: inline-block;
    }

    .clearfix {
        display: block;
        overflow: hidden;
    }

    a,
    img {
        border-style: none;
    }

    body {
        font-family: 'Noto Sans JP', sans-serif;
        background-image: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/images/back_img.jpg);
        padding: 0;
        margin: 0;
        /*border-top: 1px solid #6e6e6e;*/
    }
    /*
// header css
////////////////*/

    #head_wrap {
        width: 100%;
        margin: 0 auto;
    }

    #header {
        width: 100%;
        max-width: 1330px;
        min-width: 979px;
        color: #fff;
        margin: 0 auto;
    }

    #header #head_top {
        margin: 0 auto;
    }

    #header #head_bottom {
        width: 100%;
    }

    #header #logo {
        float: left;
    }

    #header #logo img {
        width: 100%;
        max-width: 164px;
    }

    #header #nav {
        float: left;
    }

    #header #nav ul {
        list-style: none;
        margin: 2em 0 0;
        padding: 0;
        line-height: 54px;
        margin-left: 4em;
    }


    #header #nav ul li {
        display: inline-block;
        padding: 0 10px 0 10px;
        font-size: 1.2em;
        font-weight: bold;
        line-height: 1em;
    }

    #header #nav ul li+li {
        border-left: 1px solid #FFF;
        /* ここがボーダー線指定しているところ */
        padding: 0 20px 0 20px;
        /* メニューとボーダー線の間の距離感 */
    }

    #header #nav ul li a {
        color: #FFF;
        text-decoration: none;
    }

    #header #nav ul li a:hover {
        opacity: 0.8;
        text-decoration: underline;
    }

    #header #airtime p {
        background: #000;
        padding: 0.4em 0;
        margin: 0;
        border-radius: 0.5em;
        color: #FFF;
        width: 455px;
        text-align: center;
        float: right;
    }


    #header #airtime a {
        font-size: 0.8em;
        text-decoration: underline;
        color: #FFF;
    }
    /*
// スペシャルコンテンツ css
////////////////*/

    #title {
        width: 100%;
        background: #000;
        border-top: 1px solid #6e6e6e;
        border-bottom: 4px double #484747;
    }

    #title .in-title {
        color: #FFF;
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
    }

    #title .in-title h2 {
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/title.png) no-repeat;
        width: 100%;
        height: 0;
        padding-top: calc( 82 / 1330 * 100%);
        background-size: contain;
        font-size: 0em;
        margin: 1% auto;
    }


    #main_img_wrap {
        color: #FFF;
    }

    #main_img_wrap p {
        width: 100%;
        max-width: 1300px;
        margin: 2em auto;
        height: 0;
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/main_img.png) no-repeat;
        padding-top: calc( 478 / 1920 * 100%);
        background-size: cover;
        background-position: center;
        font-size: 0em;
        position: relative;
    }

    #main_img_wrap p a {
        width: 133px;
        position: absolute;
        top: 82%;
        left: 8%;
    }

    #main_img_wrap p a:hover {
        opacity: 0.8;
    }

    #movie_wrap {
        width: 100%;
    }

    #movie_wrap .in-movie {
        width: 100%;
        max-width: 1330px;
        position: relative;
        padding-top: 45.25%;
        margin: 1.5em auto;
    }

    #movie_wrap iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    #read_wrap {
        width: 100%;
        max-width: 1920px;
        margin: 0 auto;
        color: #FFF;
        text-align: center;
    }

    #read_wrap .in-read {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 1em 0;
    }

    #read_wrap .in-read p {
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/read.png) no-repeat;
        width: 100%;
        height: 0;
        padding-top: calc( 318 / 1300 * 100%);
        background-size: contain;
        background-position: center;
        font-size: 0em;
        margin: 0 auto;
    }

    #about_wrap {
        width: 100%;
        max-width: 1920px;
        margin: 0 auto;
        color: #FFF;
        text-align: center;
    }

    #about_wrap .in-about {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 1em 0;
    }

    #about_wrap .in-about .profile {
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/profile.png) no-repeat;
        width: 100%;
        height: 0;
        padding-top: calc( 411 / 1300 * 100%);
        background-size: contain;
        background-position: center;
        font-size: 0em;
        margin: 0 auto;
    }

    #interview_wrap {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 1em 0;
    }

    #interview_wrap .title {
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/interviewmovie.png) no-repeat;
        width: 100%;
        height: 0;
        padding-top: calc( 58 / 1300 * 100%);
        background-size: contain;
        background-position: center;
        font-size: 0em;
        margin: 0 auto;
    }

    #interview_wrap .movie_btn {
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/movie_btn.png) no-repeat;
        width: 100%;
        max-width: 1110px;
        height: 0;
        padding-top: calc( 392 / 1118 * 100%);
        background-size: contain;
        background-position: center;
        font-size: 0em;
        margin: 0 auto;
        position: relative;
    }

    #interview_wrap .movie_btn a {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
    }

    #interview_wrap .movie_btn:hover {
        opacity: 0.8;
    }
    /*
// footer css
////////////////*/

    #footer {
        width: 100%;
        border-top: 4px double #484747;
        color: #FFF;
        background: #000;
    }

    #footer .in-footer {
        width: 91%;
        max-width: 1920px;
        margin: 0 auto;
    }

    #footer .in-footer .left {
        float: left;
    }

    #footer .in-footer .right {
        float: right;
        color: #b4b4b4;
        font-size: 0.8em;
    }

    #footer #footnav ul {
        list-style: none;
        padding: 0;
        font-size: 0.8em;
    }


    #footer #footnav ul li {
        display: inline-block;
        padding: 0 10px 0 10px;

        line-height: 1em;
    }

    #footer #footnav ul li+li {
        border-left: 1px solid #FFF;
        /* ここがボーダー線指定しているところ */
        padding: 0 10px 0 10px;
        /* メニューとボーダー線の間の距離感 */
    }

    #footer #footnav ul li a {
        color: #FFF;
        text-decoration: none;
    }

    #footer #footnav ul li a:hover {
        opacity: 0.8;
        text-decoration: underline;
    }
    /*
// セクション背景 css
////////////////*/

    .contents {
        position: relative;
        overflow: hidden;
        min-width: 979px;
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/back_img01.jpg);
        background-size: cover;
        background-position: center;
        z-index: 0;
    }
    /*.contents:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 80%;
    margin: 30.5% -10% 0;
    background: #242424;
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    z-index: -1;
}
*/

    .contents2 {
        position: relative;
        overflow: hidden;
        min-width: 979px;
        z-index: 0;
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/images/back_img01.jpg) center;
    }

    .contents2:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 120%;
        height: 80%;
        margin: 48.5% -10% 0;
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center;
        -webkit-transform: rotate(-6deg);
        -ms-transform: rotate(-6deg);
        transform: rotate(-6deg);
        z-index: -1;
        background: #242424;
    }

    .contents3 {
        position: relative;
        overflow: hidden;
        min-width: 979px;
        background-color: #000;
        z-index: 0;
    }

    .contents4 {
        position: relative;
        overflow: hidden;
        min-width: 979px;
        padding-bottom: 4em;
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/back_img02.jpg) center;
        background-size: cover;
        z-index: 0;
    }


    .contents5 {
        position: relative;
        overflow: hidden;
        min-width: 979px;
        padding-bottom: 0em;
        background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/images/back_img01.jpg);
        z-index: 0;
    }


    .pdb0 {
        padding-bottom: 0;
    }

    .pdb2 {
        padding-bottom: 2em;
    }
    /*
// 画面横幅1800px未満のとき css
////////////////////////////*/

    @media only screen and (max-width:1799px) {
        .contents {
            padding-bottom: 0;
        }

        .contents:before {
            margin: 36.5% -10% 0;
        }

        .contents2 {
            padding-bottom: 0;
        }

        .contents2:before {
            margin: 44.5% -10% 0;
        }

        .contents3 {
            padding-bottom: 0;
        }

        .contents3:before {
            margin: 48% -10% 0;
        }

        .contents4 {
            padding-bottom: 0;
        }

        .contents5 {
            padding-bottom: 0;
        }
        #main_img_wrap p {
            width: 100%;
            max-width: 1300px;
            margin: 2em auto;
            height: 0;
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/main_img.png) no-repeat;
            padding-top: calc( 478 / 1300 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
        }
    }
    /*
// 画面横幅1400px未満のとき css
////////////////////////////*/

    @media only screen and (max-width:1399px) {
        /*
// header css
////////////////////////////*/
        #header #head_bottom {
            width: 95%;
            margin: 0 auto;
        }

        #header #search {
            line-height: 100%;
            background-position: 0 0;
            margin: 0 0 2em;
        }

        #contents_wrap {
            width: 1000px;
            max-width: 1049px;
            min-width: auto;
            margin: 0 auto;
        }

        #head_wrap {
            min-width: 979px;
            margin: 0 auto;
        }
        #header #head_top {
            width: 100%;
            margin: 0 auto;
        }

        #movie_wrap {
            width: 80%;
            margin: 0 auto;
        }
        #read_wrap {
            margin: 0 auto;
            width: 83%;
        }
        #interview_wrap .title {
    background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/interviewmovie.png) no-repeat;
    width: 95%;
    height: 0;
    padding-top: calc( 58 / 1300 * 100%);
    background-size: contain;
    background-position: center;
    font-size: 0em;
    margin: 0 auto;
}



        /*
    // ページタイトル css
    ////////////////////////////*/
        #title {
            min-width: 979px;
            background: #000;
            border-top: 1px solid #6e6e6e;
            border-bottom: 4px double #484747;
        }

        #title .in-title dl {
            width: 950px;
            margin: 0 auto;
            padding: 1em 0 0.5em;
        }

        #title .in-title {
            width: 1000px;
            margin: 0 auto;
        }

        #title .in-title .page-title {
            width: 950px;
            margin: 0 auto;
            padding: 1em 0 0.5em;
        }



        /*
    // 次回放送 css
    ////////////////////////////*/
        #main_img_wrap {
            max-width: 1000px;
            margin: 0 auto;
        }

        #main_img_wrap .in-main_img {
            width: 95%;
            margin: 2em auto;
        }

        #main_img_wrap .in-main_img img {
            width: 100%;
        }

        #dc_movie_wrap {
            max-width: 1000px;
            margin: 0 auto;
        }

        #dc_movie_wrap .dc_movie {
            width: 95%;
            margin: 2em auto;
            padding: 0;
        }

        #dc_movie_wrap .dc_movie img {
            width: 100%;
        }

        #about_wrap {
            min-width: 979px;
        }

        #about_wrap .in-about {
            width: 950px;
            margin: 0 auto;
        }

        #about_wrap .in-about .about_text {
            width: 550px;
            float: right;
        }

        #about_wrap .in-about .about_text .in-text {
            width: 85%;
            margin: 0 auto 0 4em;
        }

        #map_wrap {
            margin: 2em auto 0;
            color: #FFF;
            min-width: 979px;
        }

        #map_wrap .in-map {
            width: 950px;
            margin: 0 auto;
            padding: 6em 0 2em 0;
        }

        #map_wrap .in-map .map_photo {
            width: 100%;
            margin: 0;
            float: none;
        }

        #map_wrap .in-map .map_photo .left {
            width: 100%;
            float: none;
            text-align: center;
            margin-right: 0;
        }

        #map_wrap .in-map .map_photo img {
            width: 100%;
            margin: 0;
            float: none;
        }

        #map_wrap .in-map .map_photo .left {
            width: 100%;
            float: none;
            text-align: center;
            margin-right: 0;
        }

        #map_wrap .in-map .map_photo .right {
            width: 50%;
            float: left;
            text-align: center;
        }

        #map_wrap .in-map .map_txt {
            width: 100%;
            margin: 2em auto 0;
            float: none;
        }

        #map_wrap .in-map .map_txt dl {
            width: 50%;
        }

        #map_wrap .in-map .map_txt ul {
            margin: 0 auto;
            padding: 1em 0;
            border-bottom: none;
            list-style: none;
            display: table;
            width: 100%;
        }
        #map_wrap .in-map .map_txt li {
            display: block;
            width: 100%;
            margin-bottom: 0%;
            padding: 2% 0;
            border-bottom: 2px solid #545353;
        }
        #map_wrap .in-map .map_txt li a {
            color: #fff600;
        }

        #tackle_wrap {
            margin: 5em auto 2em;
            color: #FFF;
            min-width: 979px;
        }

        #tackle_wrap .in-tackle {
            width: 1000px;
            margin: 0 auto;
            padding: 5em 0 0 0;
            background-image: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/images/tackle_top.png);
            background-repeat: no-repeat;
        }

        #tackle_wrap .in-tackle .tackle_photo {
            margin: 0 auto;
            width: 95%;
        }

        #tackle_wrap .in-tackle .tackle_photo ul li {
            width: 32.5%;
            float: left;
            margin-right: 0.2em;
        }


        /*
    // footer css
    ////////////////////////////*/
        #footer .in-footer {
            width: 91%;
        }

        #footer .in-footer .left {
            width: 100%;
            text-align: center;
        }

        #footer .in-footer .right {
            width: 100%;
            text-align: center;
        }

        .contents {
            min-width: 979px;
            padding-bottom: 0em;
        }

        .contents2 {
            min-width: 979px;
        }

        .contents3 {
            min-width: 979px;
            padding-bottom: 0em;
        }

        .contents4 {
            min-width: 979px;
            padding-bottom: 0em;
        }

        .contents5 {
            min-width: 979px;
        }

        #interview_wrap .movie_btn {
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/movie_btn.png) no-repeat;
            width: 80%;
            max-width: 1110px;
            height: 0;
            padding-top: calc( 392 / 1118 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
            margin: 0 auto;
            position: relative;
        }

        #main_img_wrap p {
    width: 100%;
    max-width: 1000px;
    margin: 2em auto;
    height: 0;
    background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/main_img.png) no-repeat;
    padding-top: calc( 478 / 1300 * 100%);
    background-size: contain;
    background-position: center;
    font-size: 0em;
}
    }
    /*
// 画面横幅1400px未満のとき css
////////////////////////////*/

    @media only screen and (max-width:1050px) {

        /*
// header css
////////////////////////////*/
        #header {
            margin: 0 auto;
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
        }

        #header #nav {
            float: left;
            width: 100%;
        }

        #header #nav ul {
            list-style: none;
            margin: -2em 0 0;
            padding: 0;
            line-height: 54px;
            margin-left: 0em;
        }
        #header #head_bottom {
            width: 95%;
            margin: 0 auto;
        }

        #header #search {
            line-height: 100%;
            background-position: 0 0;
            margin: 0 0 2em;
        }

        #head_wrap {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
            margin: 0 auto;
        }
        #header #head_top {
            width: 100%;
            margin: 0 auto;
        }

        /*
    // ページタイトル css
    ////////////////////////////*/
        #title {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
            background: #000;
            border-top: 1px solid #6e6e6e;
            border-bottom: 4px double #484747;
        }

        #title .in-title {
            width: 95%;
            max-width: 1049px;
            min-width: 745px;
            margin: 0 auto;
        }

        #title .in-title .page-title {
            width: 950px;
            margin: 0 auto;
            padding: 1em 0 0.5em;
        }

        /*
    // 次回放送 css
    ////////////////////////////*/
        #dc_movie_wrap {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
            margin: 0 auto;
        }

        #dc_movie_wrap .dc_movie {
            width: 95%;
            max-width: 1049px;
            min-width: 765px;
            margin: 2em auto;
            padding: 0;
        }

        #dc_movie_wrap .dc_movie img {
            width: 100%;
        }

        #photo_wrap {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
            margin: 0 auto;
            color: #FFF;
            text-align: center;
        }


        #about_wrap {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
        }

        #about_wrap .in-about {
            width: 95%;
            margin: 0 auto;
            max-width: 1049px;
            min-width: 745px;
        }

        #about_wrap .in-about .angler {
            width: 95%;
            margin: 0 auto;
        }

        #map_wrap {
            margin: 2em auto 0;
            color: #FFF;
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
        }

        #map_wrap .in-map {
            width: 95%;
            max-width: 1049px;
            min-width: 745px;
            margin: 0 auto;
            padding: 6em 0 2em 0;
        }

        #map_wrap .in-map .map_photo {
            width: 100%;
            margin: 0;
            float: none;
        }

        #map_wrap .in-map .map_txt li {
            display: block;
            width: 100%;
            margin-bottom: 1%;
        }
        #map_wrap .in-map .map_txt li a {
            color: #fff600;
        }


        /*
    // footer css
    ////////////////////////////*/
        #footer .in-footer {
            width: 91%;
        }

        #footer .in-footer .left {
            width: 100%;
            text-align: center;
        }

        #footer .in-footer .right {
            width: 100%;
            text-align: center;
        }

        .contents {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
            padding-bottom: 0em;
        }

        .contents2 {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
        }

        .contents3 {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
            padding-bottom: 0em;
        }

        .contents4 {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
            padding-bottom: 0em;
        }
        .contents4:before {
            margin: 130% -10% 0;
        }
        .contents5 {
            width: 100%;
            max-width: 1049px;
            min-width: 765px;
        }
        #dc_movie_wrap .dc_movie .video {
            width: 100%;
        }

        #main_img_wrap p {
            width: 100%;
            max-width: 1050px;
            margin: 2em auto;
            height: 0;
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/main_img.png) no-repeat;
            padding-top: calc( 478 / 1050 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
        }

        #movie_wrap {
    width: 95%;
    margin: 0 auto;
}

#read_wrap {
    margin: 0 auto;
    width: 100%;
}
    }
    /*
// 画面横幅765px未満のとき スマホcss
////////////////////////////*/

    @media only screen and (max-width:765px) {
        .pc {
            display: none;
        }

        .sp {
            display: block;
        }

        /*
// header css
////////////////////////////*/
        #header #airtime {
            text-align: right;
            color: #fff;
            padding-right: 1rem;
            width: 90%;
            float: none;
            background-color: #000;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            margin: 0 auto 5px;
            font-size: 0.9rem;
        }

        #header #airtime p {
            width: auto;
            text-align: right;
        }
        #header #airtime a {
            display: inline-block;
            color: #fff;
            font-size: 0.8em;
            margin-left: 20px;
        }
        #header {
            margin: 0 auto;
            width: 100%;
            max-width: 765px;
            min-width: 320px;
        }

        #header #logo {
            float: left;
            width: 35%;
            display: block;
        }
        #header #logo h1 {
            margin: 5px 0 0;
        }

        #header #nav {
            float: none;
            width: 100%;
        }

        #header #nav.sp ul {
            display: table;
            text-align: center;
            width: 100%;
            padding-bottom: 5px;
        }

        #header #nav.sp ul li {
            display: table-cell;
            vertical-align: middle;
            color: #828282;
            font-weight: 100;
            padding: 0;

            font-size: 80%;
        }

        #header #nav.sp ul li+li {
            border-left: none;
            /* ここがボーダー線指定しているところ */
            padding: 0;
            /* メニューとボーダー線の間の距離感 */
        }


        #header #head_bottom {
            width: 95%;
            margin: 0 auto;
        }

        #header #search {
            line-height: 100%;
            background-position: 0 0;
            margin: 0 0 2em;
        }

        #head_wrap {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
            margin: 0 auto;
        }
        #header #head_top {
            width: 100%;
            margin: 0 auto;
        }

        /*
    // ページタイトル css
    ////////////////////////////*/
        #title {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
            background: #000;
            border-top: 1px solid #6e6e6e;
            border-bottom: 4px double #484747;
        }

        #title .in-title {
            width: 95%;
            max-width: 765px;
            min-width: 320px;
            margin: 0 auto;
        }

        #title .in-title h2 {
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/sp_title.png) no-repeat;
            width: 100%;
            height: 0;
            padding-top: calc( 94 / 750 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
            margin: 3% auto;
        }

        /*
    // 次回放送 css
    ////////////////////////////*/
        #dc_movie_wrap {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
            margin: 0 auto;
        }

        #dc_movie_wrap .dc_movie {
            width: 95%;
            max-width: 746px;
            min-width: 320px;
            margin: 2em auto;
            padding: 0;
        }

        #dc_movie_wrap .dc_movie img {
            width: 100%;
        }

        #photo_wrap {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
            margin: 0 auto;
            color: #FFF;
            text-align: center;
        }

        #photo_wrap .in-photo ul {
            width: 95%;
            margin: 3% auto;
        }

        #photo_wrap .in-photo ul li {
            width: 32.5%;
            margin-right: 0.8%;
            margin-bottom: 0;
        }

        #read_wrap .in-read {
            padding: 0em 0;
        }

        #read_wrap .in-read h3 {
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/sp_read.png) no-repeat;
            width: 100%;
            height: 0;
            padding-top: calc( 401 / 765 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
            margin: 0 auto;
        }

        #read_wrap .in-read p {
            width: 90%;
            margin: 1em auto 0;
            text-align: left;
            padding: 0em 0;
        }

        #about_wrap {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
            margin: 0 auto 0;
        }

        #about_wrap .in-about {
            width: 100%;
            margin: 0 auto;
            max-width: 765px;
            min-width: 320px;
            padding: 2em 0;
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/sp_back_img02.jpg) no-repeat;
            background-size: cover;
            background-position: center;
            border-top: 2px solid #242424;
        }

        #about_wrap .in-about .angler {
            width: 95%;
            margin: 0 auto;
        }

        #about_wrap .in-about .angler .in-angler {
            width: 95%;
            margin: 0 auto;
        }

        #about_wrap .in-about .angler .in-angler h3 {
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/angler.png) no-repeat;
            width: 100%;
            height: 0;
            padding-top: calc( 96 / 756 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
            margin: 0 auto;
        }

        #about_wrap .in-about .angler .in-angler .angler_photo dl dt {
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/angler_photo.png) no-repeat;
            width: 100%;
            height: 0;
            padding-top: calc( 387 / 756 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
            margin: 0 auto;
        }

        #about_wrap .in-about .angler .in-angler .angler_photo dl dd {
            width: 100%;
            float: none;
            margin: 1em 0 0;
            text-align: center;
        }

        #about_wrap .in-about .angler .in-angler .angler_photo dl dd p {
            text-align: left;
            display: inline-block;
            margin-top: 0.5em;
            margin-left: 0em;
            line-height: 180%;
        }

        #about_wrap .in-about .angler .in-angler .angler_photo dl dd span {
            text-align: left;
            font-size: 110%;
        }

        #map_wrap {
            margin: 0em auto 2em;
            color: #FFF;
            width: 100%;
            max-width: 765px;
            min-width: 320px;
        }

        #map_wrap .in-map {
            width: 95%;
            max-width: 765px;
            min-width: 280px;
            margin: 0 auto;
            padding: 2em 0;
        }

        #map_wrap .in-map_box {
            width: 85%;
            margin: 0 auto;
        }

        #map_wrap .in-map_box h4 {
            margin: 0 auto 4%;
            font-size: 1.3rem;
            font-weight: 400;
            text-align: center;
        }

        #map_wrap .in-map .map_photo {
            width: 100%;
            margin: 0;
            float: none;
        }


        #map_wrap .in-map .map_txt {
            width: 100%;
            margin: 0em auto 0;
            float: none;
        }

        #map_wrap .in-map .map_txt ul {
            margin: 0 auto;
            padding: 1em 0;
            border-bottom: none;
            list-style: none;
            display: table;
            width: 100%;
        }
        #map_wrap .in-map .map_txt li {
            display: block;
            width: 100%;
            margin-bottom: 0%;
            padding: 2% 0;
            border-bottom: 2px solid #545353;
        }
        #map_wrap .in-map .map_txt li a {
            color: #fff600;
        }

        #main_img_wrap p {
            width: 100%;
            max-width: 1300px;
            margin: 2em auto;
            height: 0;
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/sp_main_img.jpg) no-repeat;
            padding-top: calc( 796 / 750 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
        }

        #movie_wrap .in-movie {
            width: 95%;
            border: 2px solid #FFF;
            position: relative;
            padding-top: 53.25%;
            margin: 1.5em auto;
        }

        #read_wrap .in-read p {
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/read.jpg) no-repeat;
            width: 100%;
            height: 0;
            padding-top: calc( 622 / 750 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
            margin: 0 auto;
        }

        #about_wrap .in-about .profile {
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/sp_profile.png) no-repeat;
            width: 100%;
            height: 0;
            padding-top: calc( 971 / 750 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
            margin: 0 auto;
        }

        #interview_wrap {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 2em 0;
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/sp_back_img01.jpg) no-repeat;
            background-size: cover;
            background-position: center;
        }

        #interview_wrap .title {
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/sp_interviewmovie.png) no-repeat;
            width: 100%;
            height: 0;
            padding-top: calc( 51 / 750 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
            margin: 0 auto;
        }

        #interview_wrap .movie_btn {
            background: url(https://cdn.tv-osaka.co.jp/the_fishing/movie/201808_kobayashimasahiro/img/sp_movie_btn.jpg) no-repeat;
            width: 90%;
            max-width: 1110px;
            height: 0;
            padding-top: calc( 332 / 683 * 100%);
            background-size: contain;
            background-position: center;
            font-size: 0em;
            margin: 1rem auto 0;
            position: relative;
        }



        /*
    // footer css
    ////////////////////////////*/
        #footer .in-footer {
            width: 95%;
        }

        #footer .in-footer .left {
            width: 100%;
            text-align: center;
        }

        #footer .in-footer .right {
            width: 100%;
            text-align: center;
        }

        #footer #footnav ul li {
            float: left;
            display: block;
            margin: 0 5px 10px;
            background-color: #333333;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            padding: 6px 3px;
            line-height: normal;
        }

        #footer #footnav ul li a {
            color: #DCDCDC;
            margin: 0.1rem;
            padding: 0.8rem;
            text-decoration: none;
        }

        #footer #footnav ul li+li {
            border-left: 0;
            /* ここがボーダー線指定しているところ */
            padding: 6px 3px;
            /* メニューとボーダー線の間の距離感 */
        }
        .contents {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
            padding-bottom: 0em;
        }

        .contents2 {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
            padding-bottom: 0em;
        }

        .contents2:before {
            margin: 40.5% -10% 0;
            background-color: #000;
        }

        .contents3 {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
            padding-bottom: 0em;
            background-color: #242424;
        }

        .contents3:before {
            margin: 0 -10% 0;
        }

        .contents4 {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
            padding-bottom: 0em;
        }
        .contents4:before {
            margin: 30% -10% 0;
        }
        .contents5 {
            width: 100%;
            max-width: 765px;
            min-width: 320px;
        }
        #dc_movie_wrap .dc_movie .video {
            width: 100%;
       }
       #main_img_wrap p a {
        width: 120px;
        position: absolute;
        top: 44%;
        left: 65%;
    }
    #footer #footnav ul {
    margin-bottom: 0;
}
#footer {
    border-bottom: 4px double #484747;
}
    }

    @media only screen and (max-width:380px) {
        #main_img_wrap p a img {
    width: 100px;
}
}