@charset "UTF-8";
.tp-list img{width:80%;margin:0 auto 4vw;}
.tp-list li{text-align:center;font-weight:bold;margin-bottom:12vw;}
.tp-list li:nth-last-of-type(1){margin-bottom:0;}
.tp-list li .name{font-size:6vw;line-height:1.4;margin-bottom:1vw;}
.tp-list li small{font-size: 66%;display:block;}
.tp-list .copy{color:var(--red);font-size:6vw;line-height:1.4;}
.tp-list dl{border:1px solid #ccc;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between; justify-content: space-between;margin-bottom:3vw;}
.tp-list dt{background:var(--red);width: 34%;color:#fff;}
.tp-list dd{width: 66%;}
.tp-list dt,.tp-list dd{padding: 2% 0;text-align:center;}

.inbox img{width:80%;margin:0 auto 4vw;}
.inbox  .name{font-size:6vw;line-height:1.4;margin-bottom:1vw;text-align: center;font-weight: bold;margin-bottom: 3vw;}
.inbox small{font-size: 66%;display:block;}
.inbox .copy{color:var(--red);font-size:6vw;line-height:1.4;font-weight: bold;text-align: center;margin-bottom: 0;}
.inbox dl.info{border:1px solid #ccc;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between; justify-content: space-between;margin-bottom:3vw;}
.inbox .info dt{background:var(--red);width: 34%;color:#fff;}
.inbox .info dd{width: 66%;}
.inbox .info dt,.inbox .info dd{padding: 2% 0;text-align:center;}
.voicein dl{margin-bottom:4%;}
.voicein dt{background:var(--red);color:#fff;font-weight:bold;font-size:4vw;padding:2% 4%;position:relative;margin-bottom: 3%;}
.voicein li{margin-bottom: 3%;}
.voicein .date{margin-bottom:0;font-weight:bold;}
.voicein .date span:nth-last-child(1){float:right;}
.voicein .graph{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wra-webkit-justify-content: space-between;justify-content: space-between;}
.voicein .graph i{width:calc(100%/5);height: 4vw;display:block;background: #e5e4e4;border-right: 1px solid #ccc;}
.voicein .graph i:nth-child(1){border-radius:20px 0 0 20px;}
.voicein .graph i:nth-last-child(1){border:none;border-radius:0 20px 20px  0;}
.voicein .graph i.current{background:var(--red);}

/* =============================================
pc-size 
================================================*/
@media screen and (min-width: 736px) {
.tp-list li{margin-bottom:60px;}
.tp-list li .name{font-size: 31px;}
.tp-list li small{display:inline-block;}
.tp-list .copy{font-size: 24px;}
.tp-list img{margin-bottom:20px;}

.inbox img{max-width:400px;}
.inbox .name{font-size: 31px;}
.inbox small{display:inline-block;}
.inbox .copy{font-size: 24px;}
.voicein dl{margin-bottom:20px;}
.voicein dt{font-size:20px;padding:10px 20px;margin-bottom: 10px;}
.voicein .graph i{height:20px;}
}


@media screen and (min-width: 900px) {
.tp-list{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.tp-list li{width:46%;margin-bottom:0;}
.tp-list dl{margin-bottom:20px;}
.tp-list img{width:100%;}
}

@media screen and (min-width: 1000px) {
.inbox img{width:400px;display:inline-block;}
.inbox .textbox{width:560px;display:inline-block;vertical-align:top;margin-left:40px;}
.inbox .copy{text-align:left;font-size:30px;margin-bottom: 6px;}
.inbox .name{text-align:left;}
}