@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

.rakuraku__relation ul {display: flex;justify-content: center;}
.rakuraku__relation dd {font-size:87.5%;height:5em;}
.rakuraku__relation {background-color:#fff;border-top:1px solid #ccc;padding-top:20px;padding-left:0;padding-right:0;max-width:1414px;}
.rakuraku__inner {max-width:1170px;}

#interviews, #interviews a, #top_head, #relation {opacity:0;transition:opacity 1s;}
#interviews.view, #interviews a.view, #top_head.view, #relation.view {opacity:1;}

#int_contents{opacity:0;font-family:'Noto Sans JP',sans-serif;}

#int_contents,#module_titleArea {position:relative;width:auto;margin:0 auto;padding:0;}

#int_contents.top_content {max-width:1414px;margin:0 auto;padding:20px 0;}
#int_contents.top_content img {max-width:100%;height:auto;}

#top_head {margin:0 0 160px 0;}
#top_head h2 {margin-bottom:120px;}
#top_head p {font-size:155%;text-align:center;margin-bottom:30px;line-height:180%;}
#top_head p:first-of-type {font-size:200%;font-weight:bold;line-height:170%;color:#646464;}

#interviews {display:flex;flex-wrap:wrap;justify-content:space-between;width:90%;max-width:1170px;margin:0 auto 120px auto;}
#interviews > * {width:48%;text-align:center;}
#interviews > a {display:block;position:relative;margin-bottom:80px;transition:opacity .5s;cursor:pointer;overflow:hidden;padding-bottom:4em;}
#interviews > a:hover, #interviews > a:visited, #interviews > a:focus, 
#interviews > a:link, #interviews > a:hover {text-decoration:none;color:inherit;}

#interviews > a .interviews_img {position:relative;max-width:76%;overflow:hidden;margin:35px auto;}
#interviews > a .interviews_img:before {content:'';display:block;padding-top:45%;}
#interviews > a .interviews_img img {position:absolute;top:0;left:0;}

#interviews > a:before, #interviews > a:after, #interviews > a .interviews_text:after, 
#interviews > a .interviews_text:before {content:'';position:absolute;display:block;width:70px;height:70px;border-style:solid;border-color:#bdbec0;}
#interviews > a:before {bottom:0;left:0;border-width:0 0 2px 2px;}
#interviews > a:after {bottom:0;right:0;border-width:0 2px 2px 0;}
#interviews > a .interviews_text:before {top:0;left:0;border-width:2px 0 0 2px;}
#interviews > a .interviews_text:after {top:0;right:0;border-width:2px 2px 0 0;}

#interviews > a .interviews_text {padding:0 20px;}
#interviews > a h3 {font-size:190%;font-weight:normal;padding:0 20px;width:80%;margin:0 auto 10px auto;}
#interviews > a h3 span {font-size:80%;font-weight:bold;display:inline-block;margin-bottom:15px;}

#interviews > a p {font-size:115%;line-height:2rem;margin-bottom:20px;}
#interviews > a > p:last-of-type {font-weight:bold;color:#005e8c;width:100%;font-size:100%;padding:0 10px .6em 10px;position:absolute;bottom:0;left:0;}
#interviews > a > p:last-of-type:after {content:'';display:inline-block;width:.66em;height:.6em;border-top:2px solid #005e8c;border-left:2px solid #005e8c;margin-left:10px;transform:rotate(143deg) skew(20deg) translateY(.1em);}
#interviews > a p br, #interviews > a h3 br {display:inline;}


#interviews > a#vol1 .interviews_img img {top:-18%;left:-3%;max-width:103%;}
#interviews > a#vol2 .interviews_img img {top:-2%;max-width:103%;}
#interviews > a#vol3 .interviews_img img {top:-8%;left:auto;right:2%;max-width:96%;}
#interviews > a#vol4 .interviews_img img {top:-14%;left:-1%;max-width:105%;}



@media only screen and (min-width: 981px){
#interviews > a.view:hover, #interviews > a:hover {opacity:.6;}
}

@media only screen and (max-width: 1100px){
#interviews > a p br {display:none;}
}

@media only screen and (max-width: 980px){
#interviews > a p br, #interviews > a h3 br {display:none;}
#interviews > a h3 span + br {display:inline;}
#interviews {width:98%;}
#interviews > * {width:49%;}
}


@media only screen and (max-width: 767px){
.rakuraku__relation ul {display: block;}

#int_contents.top_content {max-width:95%;}

#top_head, #top_head h2 {margin-bottom:50px;}
#top_head p, #interviews > a h3 span {font-size:1.2rem;}
#top_head p:first-of-type, #interviews > a h3 {font-size:1.4rem;}

#interviews > a .interviews_text p {font-size:1rem;}
#interviews > a > p:last-of-type {padding:0;margin:0 0 20px 0;font-size:.9rem;}

#interviews {display:block;width:100%;}
#interviews > * {width:100%;}
#interviews > a {padding-bottom:2.2em;}
#interviews > a:hover {opacity:1;}
#interviews > a .interviews_img {max-width:90%;margin:20px auto;}
#interviews > a h3 {width:100%;max-width:100%;}
#interviews > a .interviews_text {padding:0 60px 10px 60px;}

#interviews > a#vol1 .interviews_img img,
#interviews > a#vol2 .interviews_img img,
#interviews > a#vol3 .interviews_img img {width:100%;max-width:100%;left:0;right:auto;}

#top_head br {display:none;}
}

@media only screen and (max-width: 480px){
#top_head h2 {margin-bottom:30px;}

#interviews > a .interviews_text {padding:0 20px 10px 20px;}


}