/*---------------------------------------------
  
---------------------------------------------*/

.main-title{
position: relative;
}
.main-title h2{
position: absolute;
top:50%;
left: 50%;
width: 80%;
transform: translate(-50%,-50%);
color: #fff;
font-family: "Noto Serif JP", serif;
font-weight: 700;
text-align: center;
}
.main-title h2 .en{
display: block;
font-size: 12px;
}


@media screen and (min-width: 768px) {
.main-title h2{
font-size: 42px;
}
.main-title h2 .en{
font-size: 18px;
}

}

@media screen and (min-width: 1200px) {

.main-title h2{
font-size: 42px;
}
.main-title h2 .en{
font-size: 18px;
}

}


/*---------------------------------------------
  
---------------------------------------------*/

#voice-page{
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 2em 0;
overflow: hidden;
}

#voice-page h3{
width: 90%;
max-width: 550px;
margin: 0 auto 2em;
padding: 0.5em;
font-family: "Noto Serif JP", serif;
font-weight: 400;
text-align: center;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}

#voice-page h4.copy{
margin: 0 auto 2em;
font-family: "Noto Serif JP", serif;
font-weight: 400;
text-align: center;
}



@media screen and (min-width: 768px) {
#voice-page{
padding: 90px 0;
}

#voice-page h3{
font-size: 22px;
}
#voice-page h4.copy{
font-size: 36px;
}

}







/*---------------------------------------------
  
---------------------------------------------*/
#voice-page dl.voice{
clear: both;
overflow: hidden;
margin: 0 0 3em;
font-family: "Noto Serif JP", serif;
font-weight: 400;
}
#voice-page dl.voice dt{

}

#voice-page dl.voice dd{
padding: 0.5em 0 0;
border-top: 1px solid #707070;
}



@media screen and (min-width: 768px) {
#voice-page dl.voice{

}
#voice-page dl.voice dt{
float: left;
width: 10%;
min-width: 3em;
box-sizing: border-box;
}
#voice-page dl.voice dd{
float: left;
width: 90%;
padding:0 0 0 1.5em;
border-top: none;
border-left: 1px solid #707070;
box-sizing: border-box;
}
}

/*---------------------------------------------
  
---------------------------------------------*/
#voice-page .voice-comment{
clear: both;
margin: 2em 4px 2em;
padding: 2em;
color: #fff;
font-family: "Noto Serif JP", serif;
font-weight: 400;
background: #434057;
border: 1px solid #fff; 
outline: 2px solid #434057;
outline-offset: 0;
box-sizing: border-box;
}


@media screen and (min-width: 768px) {
#voice-page .voice-comment{
padding: 50px;
margin-top: 100px;
margin-bottom: 120px;
}
}


/*---------------------------------------------
  prof
---------------------------------------------*/
#voice-page .profile{
clear: both;
overflow: hidden;
position: relative;
padding-top: 1em;
}
#voice-page .profile .int{
overflow: hidden;
padding: 2em;
text-align: left;
color: #434057;
border-top: 1px solid #707070;
border-bottom: 1px solid #707070;
}
#voice-page .profile:before{
content: "Profile";
color: #434057;
position: absolute;
left: 0;
top: 0;
display: inline-block;
background: url("https://gigaplus.makeshop.jp/umogajiin/img/layout/header.jpg") repeat;
}
#voice-page .profile .img{
max-width: 137px;
margin: 0 auto;
}
#voice-page .profile .detail{
padding: 1em 0 0;
font-family: "Noto Serif JP", serif;
font-weight: 400;
}
#voice-page .profile .detail h5{
font-size: 20px;
}

@media screen and (min-width: 768px) {
#voice-page .profile .int{
padding: 50px 0;
}

#voice-page .profile .img{
float: left;
width: 14%;
}
#voice-page .profile .detail{
float: left;
width: 86%;
padding: 0 50px;
box-sizing: border-box;
}


}