/* MBCで働く人 */

.saiyou-box section.inta-title{
margin: 0 0 1rem 0;
padding:.5rem;
background-image: url("/info/saiyou/interview/img/inta-title_bg.jpg");
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
}


section.inta_top{
margin: 0;
padding:0 0 2rem 0;
position: relative;
}

section.inta_top figure{
margin: 0;
padding:0;
overflow: hidden;
}

section.inta_top figure img.pc {display: none;}
section.inta_top figure img.sp {display: block;}

section.inta_top figure{
margin: 1rem 0 1rem auto;
width: 95%;
border-radius: 1rem 0 0 1rem;
}

section.inta_top h2{
width: 70%;
height: 6rem;
background: #57c3f2;
color:#fff;
position: absolute;
bottom:0 ;
left: 0;
border-radius: 0 1rem 1rem 0;
z-index: 2;
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
background: linear-gradient(124deg, #f97e3c, #f54c4c, #f4c83f, #daed37, #5ce373, #72dfe5, #7268f0, #e971f5, #ec6abd);
/*background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);*/
background-size: 1800% 1800%;

-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap::before {
  animation: img-wrap 1s cubic-bezier(0.2, 0, 0.1, 1) forwards;
  background: #76e5cf;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}


@media screen and (min-width: 769px) {
section.inta_top{
padding:0 0 4rem 0;
}

section.inta_top h2{
width: 36%;
height: 10rem;
border-radius: 0 1.5rem 1.5rem 0;
font-size:2em;
}


section.inta_top figure{
width: 85%;
height: 25rem;
border-radius: 1.5rem 0 0 1.5rem;
}

section.inta_top figure img.pc {display: block;}
section.inta_top figure img.sp {display: none;}
}





.saiyou-box h3.intatop {
margin: 0 1em 1em 1em;
position: relative;
padding: 1rem 1rem calc(1rem + 10px);
border: 2px solid #000;
text-align: left;
color:#fff;
background:#1fd6ec;
}

.saiyou-box h3.intatop:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  border-top: 2px solid #000;
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.inta_top{
text-align: center;
}

main.saiyou-box section.inta_movie{
margin: 0 0 2rem 0;
}
.inta_movie p.movie_title{
padding:1em;
display: inline-block;
font-size: 24px;
font-family: "Roboto", sans-serif;
font-weight: bold;
background: repeating-linear-gradient(90deg, #12B7E8, #12B7E8 20px, #0FCB7C 0, #0FCB7C 40px);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.inta_movie ul{
margin: 0 1rem;
padding:0;
list-style:none;
display:flex;
box-sizing: border-box;
flex-direction: row;
flex-wrap: wrap;
}

.inta_movie li{
box-sizing: border-box;
width:33.333%;
margin: 0;
padding: 1rem;
}


@media screen and (max-width: 768px) {
.inta_movie li{
width:100%;
}
}



/* インタビューリスト */

.inta-title h2{
padding:0;
text-align: center;
color:#fff;
text-shadow: #0d7c69 0 0 10px;
}


main.saiyou-box section.inta-list{
margin: 2rem auto;
box-sizing: border-box;
max-:
}
.inta-list a{
text-decoration: none;
color:#000;
}

.inta-list ul{
margin: 0 1rem;
padding:0;
list-style:none;
display:flex;
box-sizing: border-box;
flex-direction: row;
flex-wrap: wrap;
}

.inta-list li{
margin: 0;
padding:1rem;
box-sizing: border-box;
width: 25%;
}

.inta-list figure{
margin: 0;
padding:0;
position: relative;
}

.inta-list figure img{
border-radius:1rem;
}


.inta-list figure figcaption {
position: absolute;
width: 100%;
height: 100%;
top:0 ;
left: 0;
color: #fff;
background-color: rgba(79,155,178,0.66);
opacity: 0;
transition: .3s ease-in-out;
border-radius:1rem;
index-z:10;
padding:1em;
box-sizing: border-box;
display: flex;
align-items: center;
}

.inta-list figure:hover figcaption {
opacity: 1;/*不透明にして表示*/
}

.inta-list figure figcaption span{
font-size:1.65em;
font-weight:900;
}

.inta-list figure .tag{
position: absolute;
bottom:7px;
left:14px;
}

.inta-list p.tag span {
text-align: center;
color: #29c086;
background: #fff;
letter-spacing: .1em;
padding: .3rem .5rem;
font-size:.75em;
}

.inta-list p.tag span:nth-child(2) {
background: #29c086;
color: #fff;
}

.saiyou-box p.name{
margin: .7em 0 0 0;
padding:0;
font-size:1.2em;
font-weight:bold;
}
.saiyou-box p.name span{
margin: -.8em 0 0 .1em;
padding:0;
font-size:.65em;
display:block;
color:#666;
}

.saiyou-box p.prof{
margin: 0;
padding:0;
font-size:.9em;
}


@media screen and (max-width: 768px) {
.inta-list li{
width:50%;
}
}

@media screen and (max-width: 480px) {
.inta-list li{
width:100%;
}
}

#ono .ono{display:none;}
#tagami .tagami{display:none;}
#ishimoto .ishimoto{display:none;}
#michiyama .michiyama{display:none;}
#tamatani .tamatani{display:none;}
#iwasaki .iwasaki{display:none;}
#sugimoto .sugimoto{display:none;}
#uchiyama .uchiyama{display:none;}



/* 個別 */

/*main.saiyou-box{
background-image: url("../img/intro_bg.png");
background-attachment: fixed;
background-size: 100%;
background-position: top;
}
*/

section.inta_detail{
margin: 0;
padding:0;
position: relative;
}

section.inta_detail figure{
margin: 0;
padding:0;
overflow: hidden;
}

section.inta_detail figure img.pc {display: none;}
section.inta_detail figure img.sp {display: block;}


.inta_detail .txt {
position: absolute;
right: 0;
bottom:35%;
}

.inta_detail .txt p{
margin:0 0 5px 0;
font-size:1.15rem;
font-weight:bold;
box-sizing: border-box;
}

.inta_detail .txt p span{
background:#fff;
padding:8px;
}

.inta_detail .profile{
margin: 20px 1rem 10px 1rem;
padding:1.5rem 1rem;
background: #309fc6;
color: #fff;
border-radius: 1rem;
}

.inta_detail .profile p{
margin: 0;
padding:.2rem .5rem;
}

.inta_detail .profile p span{
font-size:1.4rem;
font-weight:bold;
}

main.saiyou-box section.inta_yt{
margin: 2rem auto;
}

main.saiyou-box section.inta_msg_l,main.saiyou-box section.inta_msg_r{
margin: 2rem auto;
padding:0;
}

main.saiyou-box section.inta_msg_l figure,main.saiyou-box section.inta_msg_r figure{
margin: 0;
padding:0;
}

main.saiyou-box section.inta_yt{
background: repeating-linear-gradient(135deg, #eaeaea, #eaeaea 5px, #f2f2f2 5px, #f2f2f2 10px);
}
.movie{
padding:1rem;
}

.yt
{
position: relative;
width: 100%;
padding-top: 56.25%;
}

.yt iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

.msg_in{
padding:1rem 2rem;
box-sizing: border-box;
}

main.saiyou-box section.inta_msg_l figure,main.saiyou-box section.inta_msg_r figure{
margin: 1rem auto;
width:94%;
box-sizing: border-box;
}

.inta-otherlist{
margin: 3rem auto 2rem auto;
max-width:960px;
}

.inta-otherlist h3{
margin: 0;
padding:0 1rem;
text-align: center;
}


@media screen and (min-width: 769px) {
section.inta_detail figure{
width: 80.3333%;
height: 30rem;
overflow: hidden;
border-radius: 0 2rem 2rem 0;
position: relative;
}
section.inta_detail figure img.pc {display: block !important;}
section.inta_detail figure img.sp {display: none !important;}

.inta_detail .txt {
position: absolute;
right: 5%;
top: 15%;
}

.inta_detail .txt p{
font-size:1.5rem;
}

.inta_detail .profile{
position: absolute;
display:inline-block;
right: 6%;
bottom:20px;
width:320px;
}

main.saiyou-box section.inta_msg_l,main.saiyou-box section.inta_msg_r{
display:flex;
background-image: linear-gradient(125deg, rgba(255, 255, 255, 1), rgba(238, 238, 238, 1));
align-items: center;
}

main.saiyou-box section.inta_msg_l{
margin: 2rem 10% 2rem 0;
border-radius:0 1rem 1rem 0;
}

main.saiyou-box section.inta_msg_r{
margin: 2rem 0 2rem 10%;
flex-direction: row-reverse;
border-radius:1rem 0 0 1rem;
}

main.saiyou-box section.inta_yt{
padding: 0 15%;
}

main.saiyou-box section.inta_msg_l figure,main.saiyou-box section.inta_msg_r figure,.msg_in{
margin: 0 auto;
width:100%;
}


}