@charset "utf-8";

 /* インタビューページ */

.title-img-1, .title-img-2{
    margin: 0;
	padding: 0;
    text-align: center;
}
#title-comment{
    padding-top: 9.0rem;
    padding-bottom: 9.0rem;
    text-align: center;
    background:url(../img/quot1.svg) no-repeat 15% 48%;
    background-size: 13%;
}
#title-comment h1{
    font-family: 'Marck Script', cursive;
    font-size: 2.6rem;
    color: #A7A8FF;
    display: inline-block;
    border-bottom: 0.1rem solid #666;
    padding: 0 1.5rem 0.75rem 1.5rem;
    margin-bottom: 1.2rem;
}
@media screen and (max-width:575.98px) {
    #title-comment{
        text-align: left;
        background-position: 5% 12%;
        background-size: 25%;
    }
}
@media screen and (min-width:576px) and (max-width:767px) {
    #title-comment{
        background-position: 5% 50%;
        background-size: 25%;
    }
}
@media screen and (min-width:768px) and (max-width:991.98px) {
    #title-comment{
        background-position: 0 45%;
        background-size: 18%;
    }
    #title-comment h1{
        font-size: 2.2rem;
    }
}
@media screen and (min-width:992px) and (max-width:1199.98px) {
    #title-comment{
        background-position: 7% 48%;
        background-size: 15%;
    }
}
#title-comment h2{
    font-family: 'Noto Serif JP', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #A7A8FF;
    line-height: 1.5;
}
#interview-1{
    background-color: #B38A5A;
}
#interview-2{
    background-color: #605A99;
}
#interview-3{
    background-color: #b56a87;
}
#interview-4{
    background-color: #5BA0AB;
}
.interviewcontents{
    margin-top: 9.0rem;
    margin-bottom: 9.0rem;
    padding-left: 9.0rem;
    padding-right: 9.0rem;
    color: #fff;
}
@media screen and (max-width:575.98px) {
    .interviewcontents{
        padding-left: 0;
        padding-right: 0;
        margin-top: 6.0rem;
        margin-bottom: 6.0rem;
    }
}
@media screen and (min-width:576px) and (max-width:767px) {
    .interviewcontents{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-top: 6.0rem;
        margin-bottom: 6.0rem;
    }
}
@media screen and (min-width:768px) and (max-width:991.98px) {
    .interviewcontents{
        padding-left: 3.0rem;
        padding-right: 3.0rem;
    }
}
@media screen and (min-width:992px) and (max-width:1199.98px) {
    .interviewcontents{
        padding-left: 6.0rem;
        padding-right: 6.0rem;
    }
}
.interviewcontents > h1{
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 4.5rem;
}
.interviewcontents > p{
    font-size: 1.5rem;
    font-weight: 300;
    position: relative;
    padding-left: 10.0rem;
}
.interviewcontents > p::before {
    position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:9.0rem;
	height:9.0rem;
	background:url("../img/quot2.svg") no-repeat;
	background-size:contain;
}
@media screen and (max-width:575.98px) {
    .interviewcontents > p{
        padding-left: 0;
        margin-top: 6.0rem;
    }
    .interviewcontents > p::before{
        position:absolute;
        top:-4.5rem;
	    width:5.5rem;
	    height:5.5rem;
    }
}
@media screen and (min-width:576px) and (max-width:767px) {
    .interviewcontents > p{
        padding-left: 8.5rem;
    }
    .interviewcontents > p::before{
	    width:7.5rem;
	    height:7.5rem;
    }
}
.interviewcontents > p > span.komidashi{
    display: block;
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 1.6rem;
}
.interviewcontents > p > span.annotation{
    font-size: 85%;
    font-weight: 100;
}
.interviewcontents > div{
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
    -webkit-filter: drop-shadow(0 0 0.5rem rgba(0,0,0,.3));
    filter: drop-shadow(0 0 0.5rem rgba(0,0,0,.3));
}