@charset "UTF-8";

/* color link */

a,
a:visited {
    color: #156176;
    text-decoration: underline;
}

a:hover {
    color: #156176;
    text-decoration: none;
}


/* --------------------------------
    container module
-------------------------------- */

.cd-container {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0 15px;
}

.cd-container::after {
    content: '';
    display: table;
    clear: both;
}


/* --------------------------------
    main component
-------------------------------- */

.cd-main-content {
    height: 100%;
    margin: 0 auto;
    position: relative;
}

.cd-fixed-bg {
    position: relative;
    height: 100%;
    min-height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


/* --------------------------------
    ナビゲーション
-------------------------------- */

nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 5px;
    background: #17282c;
    overflow: hidden;
}

nav.isFixed {
    position: fixed;
    top: 0;
}

nav .nav_top {
    font-size: 0;
    text-align: center;
    vertical-align: middle;
}

nav .nav_top li {
    display: inline;
    padding: 0 5px 0 0;
}

nav .nav_top li:last-child {
    padding: 0;
}

nav .nav_top li a img {
    height: 35px;
}

nav .nav_under {
    width: 300px;
    margin: 5px auto 0;
    font-size: 0;
    text-align: center;
    vertical-align: middle;
}

nav .nav_under li {
    display: inline;
    padding: 0 0 0 0;
    text-align: center;
    vertical-align: middle;
}

nav .nav_under li:last-child {
    padding: 0;
}

nav .nav_under .list_01 img {
    height: 20px;
    vertical-align:top;
    margin: 10px 0 0;
}

nav .nav_under .list_02 {
    text-align: center;
    margin: 5px 15px 0;
}

nav .nav_under .list_03 {
    text-align: center;
    margin: 5px 0 0;
}

nav .nav_under .list_02 a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 55px;
    color: #fff;
    text-decoration: none;
    background: #3b5998;
    border-radius: 3px;
}

nav .nav_under .list_03 a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 55px;
    color: #fff;
    text-decoration: none;
    background: #00a1e9;
    border-radius: 3px;
}

nav .nav_under .list_02 i,
nav .nav_under .list_03 i {
    display: inline;
    margin: 0;
    text-align: center;
    font-size: 25px;
    color: #fff;
}

.bg_head {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.bg_head img {
    max-width: 100%;
    vertical-align: top;
}


/* --------------------------------
    イントロダクション
-------------------------------- */

.cd-scrolling-bg.intro {
    color: #fce2d5;
    background-color: #9facb3;
}

.intro .cd-container {
    padding: 20px 15px 60px;
}

.intro .lead {
    font-weight: bold;
    line-height: 2;
}


/* --------------------------------
    インタビュー
-------------------------------- */

.cd-scrolling-bg.interview {
    color: #ffede4;
    background-color: #9facb3;
}

.cd-scrolling-bg.interview p {
    line-height: 1.7;
}

.interview .cd-container {
    padding: 20px 15px 60px;
}

.interview h2 {
    text-align: center;
    margin: 0 0 15px 0;
}

.interview h2 img {
    max-width: 70%;
}

.interview h3 {
    padding: 0 0 25px;
    font-size: 18px;
    color: #0bf9e9;
    text-align: center;
}

.interview.interview_2 h3 {
    padding: 0;
}

.interview h3 img {
    max-width: 100%;
}

.interview .interviewer {
    margin: 2.5em 0 .5em 0;
    font-weight: bold;
    color: #156176;
}

.interview h3 + .interviewer {
    margin: 10px 0 8px 0;
}

.interview .credit {
    margin: 20px 0;
    padding: 10px 0 10px 11px;
    font-size: 11px;
    color: #156176;
    border-left: 2px solid #156176;
}

#socp-action-buttons {
    display: inline !important;
    height: 44px;
}

#socp-action-buttons .socialplus-widget-wrapper.socialplus-widget-ActionButtonBar {
    display: inline !important;
    line-height: 44px;
}

#socp-action-buttons .socialplus-widget-content {
    height: 44px !important;
    line-height: 44px !important;
}


/* --------------------------------
    関連作品
-------------------------------- */

.cd-scrolling-bg.pickup {
    color: #ffede4;
    background-color: #9facb3;
    word-break: break-all;
}

.pickup .cd-container {
    padding: 15px 15px 60px;
}

.pickup h2 {
    width: 100%;
    text-align: center;
}

.pickup h2 img {
    max-width: 100%;
    padding: 0 0 0 15px;
}

.pickup h3 {
    width: 100%;
    padding: 15px 0;
}

.pickup h3 img {
    max-width: 100%;
}

.pickup .date-box {
    width: 100%;
    margin: 0 0 25px;
    color: #156176;
    text-align: center;
    font-size: 1.5em;
}

.pickup .visual {
    margin: 0 0 20px;
}

.pickup .visual img {
    width: 100%;
}

.pickup .copy {
    margin: 5px 0 0;
    font-size: 12px;
    color: #156176;
    text-align: right;
}

.pickup .cast {
    margin: 20px 0;
    padding: 10px 0 10px 11px;
    color: #156176;
    border-left: 2px solid #156176;
}

.pickup .url {
    text-align: center;
}

.pickup .url a {
    display: inline-block;
    text-align: center;
    max-width: 100%;
    padding: 10px 30px;
    color: #156176;
    text-decoration: none;
    background: linear-gradient(#94f1ea, #00ffed);
    border-radius: 50px;
}


/* --------------------------------
    出演作品
-------------------------------- */

.cd-scrolling-bg.program {
    color: #fce2d5;
    background-color: #9facb3;
    word-break: break-all;
}

.program .cd-container {
    padding: 0 15px 40px;
}

.program h2 {
    max-width: 100%;
}

.program h3 {
    padding: 15px 30px;
    margin: 20px 0;
    text-align: center;
    background: #8699a2;
}

.program h2 img,
.program h3 img {
    max-width: 100%;
}

.program .pg-wrap {
    margin: 0 auto;
    overflow: hidden;
}

.program .pg-box {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 20px;
    padding: 15px 0;
    color: #fce2d5;
    background-color: #8699a2;
}

.pg-box a {
    color: #00ffed;
    text-decoration: none;
}

.pg-box .visual {
    width: 100%;
}

.pg-box .visual img {
    max-width: 100%;
}

.pg-box .visual .copy {
    padding: 0 5px;
    margin: 3px 0 0;
    font-size: 10px;
    text-align: right;
    line-height: 1.25;
}

.pg-box .contents {
    padding: 0 10px;
}

.pg-box .contents .pg-ttl {
    margin: 10px 0;
    font-weight: bold;
    line-height: 1.25;
}

.pg-box .contents .channel {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    border: 1px solid #efc3c4;
    background: linear-gradient(#54666e, #8598a1);
    box-shadow: 0px 3px 1px 0px #777;
    border-radius: 50px;
}

.pg-box .contents .channel a {
    display: block;
    padding: 10px 10px 7px;
}

.pg-box .contents .date {
    margin: 0 0 10px;
    font-size: 14px;
}

.pg-box .contents .btn {
    width: 100%;
}

.pg-box .contents .btn a {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    color: #156176;
    text-align: center;
    background: #22fcec;
    border-radius: 4px;
    box-shadow: 0px 3px 1px 0px #777;
}


/*--------------------------
    myjcom footer
----------------------------*/

.interviewFooter {
    min-height: 5%;
}


/*--------------------------
    background image
----------------------------*/

.cd-fixed-bg.cd-bg-01 {
    background-image: url("../img/sp/bg_photo_01.jpg");
    background-position: top center;
    background-size: cover;
    height: 100%;
}

.bg_photo {
    line-height: 0;
}

.bg_photo p img {
    max-width: 100%;
}


/*.cd-fixed-bg.cd-bg-02 {
    background-image:url("../img/sp/bg_photo_02.jpg");
    background-position:top center;
    background-size:cover;
    height:100%;
}
.cd-fixed-bg.cd-bg-03 {
    background-image:url("../img/sp/bg_photo_03.jpg");
    background-position:top center;
    background-size:cover;
    height:100%;
}
.cd-fixed-bg.cd-bg-04 {
    background-image:url("../img/sp/bg_photo_04.jpg");
    background-position:top center;
    background-size:cover;
    height:100%;
}
.cd-fixed-bg.cd-bg-05 {
    background-image:url("../img/sp/bg_photo_05.jpg");
    background-position:top center;
    background-size:cover;
    height:100%;
}*/

.name_ttl {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
    position: absolute;
    bottom: 92px;
    left: 0;
}

.name_ttl img {
    width: 100%;
    padding: 0 55px;
}

/*--------------------------
    contents background image
----------------------------*/


/*.contents_bg {
    padding: 30px 0;
}*/


/*.intro .contents_bg {
    background: url(../img/contents_bg01.jpg) top center no-repeat;
    background-size:contain;
}
.interview .contents_bg {
    background: url(../img/contents_bg02.jpg) top center no-repeat;
    background-size:contain;
}
.interview_2 .contents_bg {
    background: url(../img/contents_bg03.jpg) top center no-repeat;
    background-size:contain;
}
.pickup .contents_bg {
    background: url(../img/contents_bg04.jpg) top center no-repeat;
    background-size:contain;
}
.program .contents_bg {
    background: url(../img/contents_bg04.jpg) top center no-repeat;
    background-size:contain;
}*/


/*--------------------------
    page top
----------------------------*/

.page_top {
    position: fixed;
    bottom: 2%;
    right: 2%;
    box-sizing: border-box;
    z-index: 999;
}

.page_top img {
    width: 44px;
    height: auto;
}

.btn_line {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 9999;
}


/* ----------------
z-index
---------------- */

.cd-fixed-bg {
    z-index: 0;
}

.cd-scrolling-bg {
    z-index: 2;
}

.contents_bg {
    z-index: 1;
}

.intro_film img {
    z-index: 1;
}

.cd-container {
    z-index: 10;
}

nav {
    z-index: 99;
}