/*
 *
 *	message style
 *
 */
/*======================================
	contentsBox
======================================*/
/****** messageBox ******/
.contentsBox .messageBox {
    overflow: hidden;
    margin-bottom: 3em
    }
.contentsBox .messageBox p.name {
    float: left;
    width: 74%;
    margin-top: 3em;
    padding-right: 1em;
    text-align: right
    }
.contentsBox .messageBox figure {
    float: right;
    width: 26%
    }
/****** interviewBox ******/
.contentsBox .interviewBox .interviewDetail {
    margin-bottom: 2em;
    padding-bottom: 4em;
    background: url(../images.4054d0acec98bcc56290e2979e8d5b77/hr.png) bottom center no-repeat
    }
.contentsBox .interviewBox .interviewDetail:after {
    display: block;
    clear: both;
    content: ""
    }
.contentsBox .interviewBox .interviewDetail:last-child {
    background: none;
    padding-bottom: 0
    }
.contentsBox .interviewBox .interviewDetail h3 {
    line-height: 1.3;
    margin-bottom: 0.8em;
    font-size: 1.3em;
    text-shadow: #fff 1px 1px 0
    }
.contentsBox .interviewBox .interviewDetail.sumitomo h3 {
    color: #00a0e9
    }
.contentsBox .interviewBox .interviewDetail.saito h3 {
    color: #ed6c00
    }
.contentsBox .interviewBox .interviewDetail.fuse h3 {
    color: #ec6d74
    }
.contentsBox .interviewBox .interviewDetail figure.photo {
    margin-bottom: 1em;
    text-align: center
    }
.contentsBox .interviewBox .interviewDetail .name {
    margin-top: 1em;
    padding: 0.5em;
    font-size: 0.8em;
    color: #fff
    }
.contentsBox .interviewBox .interviewDetail.sumitomo .name {
    background: #00a0e9;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(1, #a3d3e9), color-stop(0, #00a0e9));
    background: -webkit-linear-gradient(top right, #a3d3e9 0%, #00a0e9 100%);
    background: -moz-linear-gradient(top right, #a3d3e9 0%, #00a0e9 100%);
    background: -ms-linear-gradient(top right, #a3d3e9 0%, #00a0e9 100%);
    background: linear-gradient(top right, #a3d3e9 0%, #00a0e9 100%)
    }
.contentsBox .interviewBox .interviewDetail.saito .name {
    background: #ed6c00;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(1, #f3d8aa), color-stop(0, #ed6c00));
    background: -webkit-linear-gradient(top right, #f3d8aa 0%, #ed6c00 100%);
    background: -moz-linear-gradient(top right, #f3d8aa 0%, #ed6c00 100%);
    background: -ms-linear-gradient(top right, #f3d8aa 0%, #ed6c00 100%);
    background: linear-gradient(top right, #f3d8aa 0%, #ed6c00 100%)
    }
.contentsBox .interviewBox .interviewDetail.fuse .name {
    background: #ec6d74;
    background: -webkit-gradient(linear, right top, left bottom, color-stop(1, #ecbabd), color-stop(0, #ec6d74));
    background: -webkit-linear-gradient(top right, #ecbabd 0%, #ec6d74 100%);
    background: -moz-linear-gradient(top right, #ecbabd 0%, #ec6d74 100%);
    background: -ms-linear-gradient(top right, #ecbabd 0%, #ec6d74 100%);
    background: linear-gradient(top right, #ecbabd 0%, #ec6d74 100%)
    }
.contentsBox .interviewBox .interviewDetail .name:after {
    display: block;
    clear: both;
    content: ""
    }
.contentsBox .interviewBox .interviewDetail .name figure {
    float: right;
    width: 20%;
    max-width: 136px;
    margin: -2em 0 0
    }
.contentsBox .interviewBox .interviewDetail.fuse .name figure {
    float: left;
    max-width: 121px;
    margin: 0 0.5em 0 0
    }
.contentsBox .interviewBox .interviewDetail .name p {
    margin-bottom: 0
    }
/*============================================================================

	responsive

============================================================================*/
@media screen and (min-width: 768px) {
    /*======================================
    	contentsBox
    ======================================*/
    /****** messageBox ******/
    .contentsBox .messageBox p {
        float: left;
        width: 74%;
        padding-right: 1em
        }
    .contentsBox .messageBox p.name {
        margin-top: 0
        }
    /****** recreationBox ******/
    .contentsBox .recreationBox {
        overflow: hidden
        }
    .contentsBox .recreationBox p {
        float: left;
        width: 55.5%;
        padding-right: 1em
        }
    .contentsBox .recreationBox figure {
        float: right;
        width: 44.5%;
        margin-top: -3em
        }
    .contentsBox .interviewBox .interviewDetail.sumitomo figure.photo, .contentsBox .interviewBox .interviewDetail.fuse figure.photo {
        float: left;
        width: 33%;
        padding-right: 1em
        }
    .contentsBox .interviewBox .interviewDetail.saito figure.photo {
        float: right;
        width: 33%;
        padding-left: 1em
        }
    .contentsBox .interviewBox .interviewDetail .name {
        width: 67%;
        margin-top: 2em;
        font-size: 1em
        }
    .contentsBox .interviewBox .interviewDetail.sumitomo .name, .contentsBox .interviewBox .interviewDetail.fuse .name {
        float: right
        }
    .contentsBox .interviewBox .interviewDetail.saito .name {
        float: left
        }
    .contentsBox .interviewBox .interviewDetail .name figure {
        margin-top: -3.5em
        }
    }