@charset "UTF-8";
/* CSS Document */
/*PC*/
@media print, screen and (min-width: 769px) {

.headArea {
background: url("../images/voice/hed_img.jpg") center center no-repeat;
background-size: cover;
}


.bg_wrap{
background: #24211e;
padding: 80px 0;
box-sizing: border-box;
}


.list_wrap{
width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
align-items: center;
}

.list_wrap:nth-child(2n){
flex-direction: row-reverse;
}

.list_wrap_box1{
width: 50%;
position: relative;
padding: 50px 80px;
box-sizing: border-box;
}

.list_wrap_box2{
width: 50%;
position: relative;
}

.list_wrap_box1 h4{
font-size: 30px;
font-style: italic;
color: #FFF;
font-weight: 300;
margin: 0 0 10px;
}

.list_wrap_box1 p{
color: #FFF;
opacity: 0.7;
}

.list_wrap_c_box {
border: 1px solid #00672F;
padding: 20px;
box-sizing: border-box;
color: #FFF;
opacity: 0.7;
margin: 30px 0 0;
font-size: 0.8em;
}

.list_wrap2{
width: 800px;
margin: 0 auto 120px;
color: #FFF;
}

.list_wrap2 h4{
font-size: 18px;
font-style: italic;
opacity: 0.7;
margin: 0 0 10px;
}

.list_wrap2 p{
font-size: 22px;
font-style: italic;
font-weight: 300;
line-height: 2;
}

.list_wrap2 p span{
border-bottom: #00672F 1px solid;
padding-bottom: 5px;
}


.list_wrap3{
width: 800px;
margin: 0 auto 120px;
color: #FFF;
}

.list_wrap3 p{
font-weight: 600;
}



.voice_list{
display: flex;
flex-wrap: wrap;
align-content: center;
width: 100%;
margin: 0 auto 100px;
}

.intvBox {
width: 29.3333%;
height: auto;
position: relative;
display: block;
box-sizing: border-box;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 40px;
transition-property: all;
transition: 0.2s ease;
}

.ph100 {
width: 100%;
height: auto;
float: left;
display: inline-block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
}

.ph100 img {
width: 100%;
height: auto;
float: left;
z-index: 0;
position: relative;
}

.intvProfBox {
width: calc(100% - 40px);
height: auto;
position: relative;
display: block;
float: left;
box-sizing: border-box;
margin-left: 20px;
margin-right: 20px;
background-color: #f2f2f2;
padding: 20px 20px 25px;
top: -20px;
}

.intvProfBox::before {
content: 'MORE';
position: absolute;
bottom: 25px;
right: 20px;
font-size: 12px;
line-height: 1;
color: #00672F;
font-weight: 600;
letter-spacing: 0.03em;
padding-right: 25px;
background-image: url("../images/com/arrow_right_grn.png");
background-size: 12px auto;
background-position: right center;
background-repeat: no-repeat;
}

.profTag {
width: 100%;
margin-bottom: 10px;
}

.profTag span {
font-size: 14px;
color: #FFF;
line-height: 1;
padding: 5px 10px;
background-color: #00672F;
display: inline-block;
font-weight: 500;
}

.voice_list .intvProfName {
width: 100%;
height: auto;
box-sizing: border-box;
position: relative;
float: left;
font-size: 24px;
line-height: 1.4;
display: flex;
justify-content: flex-start;
align-items: flex-end;
font-weight: 500;
margin-top: 5px;
}


.intvBox.syotyo {
width: 100%;
margin-bottom: 50px;
}
.syotyo .intvProfBox {
width: calc(100% - 40px);
height: auto;
position: relative;
display: block;
float: left;
box-sizing: border-box;
margin-left: 20px;
margin-right: 20px;
background-color: #fff;
border: 5px solid #00672F;
padding: 10px 20px 15px;
top: 0px;
}
.syotyo .intvProfBox::before {
content: 'MORE';
position: absolute;
bottom: 25px;
right: 20px;
font-size: 12px;
line-height: 1;
color: #00672F;
font-weight: 600;
letter-spacing: 0.03em;
padding-right: 25px;
background-image: url("../images/com/arrow_right_grn.png");
background-size: 12px auto;
background-position: right center;
background-repeat: no-repeat;
}
.syotyo .intvProfBox .proftit {
font-size: 24px;
margin-bottom: 20px;
font-weight: 700;
border-bottom: 2px solid #00672F;
}
.syotyo .intvProfBox .profTag span {
font-size: 14px;
color: #fff;
line-height: 1;
padding: 5px 10px;
background-color: #00672F;
display: inline-block;
font-weight: 500;
}
.syotyo .profimg {
width: 90%;
margin: auto;
}



/*voice_detail
------------------------*/
.intvHead{
width: 100%;
height: auto;
margin: 0 auto 60px;
max-width: 500px;
padding: 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
position: relative;
text-align: center;
font-size: 30px;
line-height: 1.5;
font-weight: 500;
}
.kakkoLeft {
width: 40px;
height: 40px;
display: block;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
border-top: #00a395 1px solid;
border-left: #00a395 1px solid;
}
.kakkoRight {
width: 40px;
height: 40px;
display: block;
box-sizing: border-box;
position: absolute;
bottom: 0;
right: 0;
border-bottom: #00a395 1px solid;
border-right: #00a395 1px solid;
}

.ph100 {
width: 100%;
height: auto;
float: left;
display: inline-block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
}

.intvMainProfBox{
margin-bottom: 60px;
}
.intvMainProfBox .intvProfName {
width: 100%;
position: relative;
font-size: 24px;
line-height: 1;
display: flex;
justify-content: flex-start;
align-items: flex-end;
font-weight: 500;
margin-top: 5px;
}
.intvProfName span.en {
font-size: 14px;
ont-family: 'Roboto', sans-serif;
letter-spacing: 0.03em;
font-weight: 500;
margin-left: 15px;
color: #00a395;
position: relative;
top:-1px;
}


.lineTitle {
font-size: 36px;
line-height: 2;
font-weight: 700;
display: block;
width: 100%;
letter-spacing: 0.08em;
margin: 0 0 30px;
border-bottom: #00a395 3px solid;
padding-bottom: 5px;
}

/*.lineTitle span {
border-bottom: #00a395 1px solid;
padding-bottom: 5px;
}*/

.message_txt{
margin:  0 0 60px;
}

.message_txt_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 30px;
}
.message_txt span.img{
width: 10%;
text-align: center;
}
.message_txt span.txt{
width: 86%;
}


.list_img {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.list_img li{
position: relative;
width: 31.33%;
margin: 0 1%;
}

.list_img li p{
margin: 10px;
font-size: 0.9em;
}


.cross_tit{
color: #00672F;
font-size: 20px;
font-weight: 600;
margin: 0 0 30px;
}

}
/*sp*/
@media only screen and (max-width: 768px) {

.headArea {
background: url("../images/voice/hed_img.jpg") center center no-repeat;
background-size: cover;
}

.bg_wrap{
background: #24211e;
padding: 40px 0;
box-sizing: border-box;
}


.list_wrap{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
align-items: center;
}

.list_wrap:nth-child(2n){
flex-direction: row-reverse;
}

.list_wrap_box1{
width: 100%;
position: relative;
padding: 30px;
box-sizing: border-box;
}

.list_wrap_box2{
width: 100%;
position: relative;
}

.list_wrap_box1 h4{
font-size: 22px;
font-style: italic;
color: #FFF;
font-weight: 300;
margin: 0 0 10px;
}

.list_wrap_box1 p{
color: #FFF;
opacity: 0.7;
}


.list_wrap_c_box {
border: 1px solid #00672F;
padding: 20px;
box-sizing: border-box;
color: #FFF;
opacity: 0.7;
margin: 30px 0 0;
font-size: 0.8em;
}

.list_wrap2{
width: 90%;
margin: 30px auto 80px;
color: #FFF;
}

.list_wrap2 h4{
font-size: 14px;
font-style: italic;
opacity: 0.7;
margin: 0 0 10px;
}

.list_wrap2 p{
font-size: 18px;
font-style: italic;
font-weight: 300;
line-height: 1.8;
}

.list_wrap2 p span{
border-bottom: #00672F 1px solid;
padding-bottom: 5px;
}

.list_wrap3{
width: 90%;
margin: 0 auto 60px;
color: #FFF;
}

.list_wrap3 p{
font-weight: 600;
}



.voice_list{
width: 90%;
margin: 0 auto 80px;
position: relative;
}


.intvBox {
width: 100%;
height: auto;
display: block;
box-sizing: border-box;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 40px;
transition-property: all;
transition: 0.2s ease;
}

.ph100 {
width: 100%;
height: auto;
float: left;
display: inline-block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
}

.ph100 img {
width: 100%;
height: auto;
float: left;
z-index: 0;
position: relative;
}

.intvProfBox {
width: calc(100% - 40px);
height: auto;
position: relative;
display: block;
float: left;
box-sizing: border-box;
margin-left: 20px;
margin-right: 20px;
background-color: #f2f2f2;
padding: 15px;
top: -20px;
}

.intvProfBox::before {
content: 'MORE';
position: absolute;
bottom: 25px;
right: 20px;
font-size: 10px;
line-height: 1;
color: #00672F;
font-weight: 600;
letter-spacing: 0.03em;
padding-right: 25px;
background-image: url("../images/com/arrow_right_grn.png");
background-size: 12px auto;
background-position: right center;
background-repeat: no-repeat;
}

.profTag {
width: 100%;
height: auto;
box-sizing: border-box;
position: relative;
float: left;
margin-bottom: 10px;
}

.profTag span {
font-size: 12px;
color: #FFF;
line-height: 1;
padding: 5px 10px;
background-color: #00672F;
display: inline-block;
font-weight: 500;
}

.intvProfName {
width: 100%;
height: auto;
box-sizing: border-box;
position: relative;
float: left;
font-size: 18px;
line-height: 1;
display: flex;
justify-content: flex-start;
align-items: flex-end;
font-weight: 500;
margin-top: 5px;
}


.intvBox.syotyo {
width: 100%;
}
.syotyo .intvProfBox {
width: calc(100% - 40px);
height: auto;
position: relative;
display: block;
float: left;
box-sizing: border-box;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 30px;
background-color: #fff;
border: 5px solid #00672F;
padding: 10px 20px 15px;
top: 0px;
}
.syotyo .intvProfBox::before {
content: 'MORE';
position: absolute;
bottom: 25px;
right: 20px;
font-size: 12px;
line-height: 1;
color: #00672F;
font-weight: 600;
letter-spacing: 0.03em;
padding-right: 25px;
background-image: url("../images/com/arrow_right_grn.png");
background-size: 12px auto;
background-position: right center;
background-repeat: no-repeat;
}
.syotyo .intvProfBox .proftit {
font-size: 18px;
margin-bottom: 15px;
font-weight: 700;
border-bottom: 1px solid #00672F;
}
.syotyo .intvProfBox .profTag span {
font-size: 14px;
color: #fff;
line-height: 1;
padding: 5px 10px;
background-color: #00672F;
display: inline-block;
font-weight: 500;
}
.syotyo .profimg {
width: 100%;
margin: auto;
}



/*voice_detail
------------------------*/
.intvHead{
width: 100%;
height: auto;
margin: 0 auto 30px;
padding: 20px 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
position: relative;
text-align: center;
font-size: 20px;
line-height: 1.5;
font-weight: 500;
}
.kakkoLeft {
width: 40px;
height: 40px;
display: block;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
border-top: #00a395 1px solid;
border-left: #00a395 1px solid;
}
.kakkoRight {
width: 40px;
height: 40px;
display: block;
box-sizing: border-box;
position: absolute;
bottom: 0;
right: 0;
border-bottom: #00a395 1px solid;
border-right: #00a395 1px solid;
}

.ph100 {
width: 100%;
height: auto;
float: left;
position: relative;
box-sizing: border-box;
z-index: 0;
}

.intvMainProfBox{
margin-bottom: 40px;
}

.intvMainProfBox .intvProfName {
width: 100%;
height: auto;
box-sizing: border-box;
font-size: 18px;
line-height: 1;
display: flex;
justify-content: flex-start;
align-items: flex-end;
font-weight: 500;
margin-top: 5px;
}


.lineTitle {
font-size: 22px;
line-height: 2;
font-weight: 700;
display: block;
width: 100%;
letter-spacing: -0.03em;
margin: 0 0 20px;
}

.lineTitle span {
border-bottom: #00a395 1px solid;
padding-bottom: 5px;
}

.message_txt{
margin:  0 0 30px;
}

.message_txt_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 30px;
}
.message_txt span.img{
width: 20%;
text-align: center;
}
.message_txt span.txt{
width: 75%;
}

.list_img {
width: 80%;
margin: 0 auto 30px;
}

.list_img li{
position: relative;
width: 100%;
margin: 0 auto 30px;
}

.list_img li p{
margin: 10px;
font-size: 0.9em;
}

.cross_tit{
color: #00672F;
font-size: 16px;
font-weight: 600;
margin: 0 0 20px;
}


}