@charset "utf-8";

/*
 * File       : modules/press/style.css
 * Author     : STUDIO-JT (Sumi)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) JT PRESS LIST
 * 2) RWD
 */



/* **************************************** *
 * JT PRESS LIST
 * **************************************** */
.jt-press-list {border-top:3rem solid #000;}
.jt-press-list__item {cursor: pointer; position:relative;display: table;width: 100%;}
.jt-press-list__item > div {position: relative;display: table-cell;vertical-align: middle;border-bottom: 1rem solid #ddd;-webkit-transition: border .3s;transition: border .3s;}

div.jt-press-list__time {width: 262rem;vertical-align: middle;}
.jt-press-list__time time {position:relative; text-align:center;line-height: 1;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.jt-press-list__time time:after {width:1rem;height:100rem;content:'';display:block;background: #ddd;position:absolute;right: 0;top:50%;margin-top:-50rem;}
.jt-press-list__time time b {font-size: 56rem;font-weight: 700;line-height: 1;letter-spacing: -0.03em;display:block;color: #bbb;-webkit-transition: color .3s;transition: color .3s; -ms-flex-order: 1; -webkit-order: 1; -webkit-box-ordinal-group: 2; order: 1;}
.jt-press-list__time time span {margin-top:6rem;font-size:15rem;line-height: 1;font-weight:500;display:block;color: #bbb;-webkit-transition: color .3s;transition: color .3s; -ms-flex-order: 2; -webkit-order: 2; -webkit-box-ordinal-group: 3; order: 2;}

div.jt-press-list__content {padding: 60rem 34.4% 60rem 80rem;}
.jt-press-list__title {font-size: 0;overflow: hidden;white-space: nowrap;}
.jt-press-list__title h2 {max-width: 100%;display: inline-block;vertical-align: middle;font-size: 26rem;font-weight: 400;line-height: 1;letter-spacing:-0.03em;}
.jt-press-list__title h2 span {display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;}
.jt-press-list__desc {margin-top:25rem;display: block;width: 100%;}
.jt-press-list__desc p {font-size: 16rem;line-height:1.8;color: #666;letter-spacing:-0.03em;overflow: hidden;text-overflow: ellipsis;word-wrap: normal;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 3.5em;}

html.desktop .jt-press-list__item:hover .jt-press-list__time time b {color: #000;}
html.desktop .jt-press-list__item:hover .jt-press-list__time time span {color: #999;}

.jt-press-list__thumb {width: 262rem; height:157rem; position: absolute;top: 35rem;right: 6%;z-index: 1;opacity: 0;visibility: hidden;}
.jt-press-list__thumb img {display: block;max-width: 100%;height: 100%; object-fit:cover;}
html.mobile .jt-press-list__thumb {display:none;}
html.mobile div.jt-press-list__content {padding-right:80rem}




/* **************************************** *
 * RWD
 * **************************************** */
@media (max-width: 1480px){
    div.jt-press-list__time {width:200rem;}
    div.jt-press-list__content { padding:60rem 25% 60rem 70rem;}
    .jt-press-list__thumb {right:30rem;}
}

@media (max-width: 1023px){
    .jt-press-list__item {table-layout: fixed;}
    div.jt-press-list__content {padding: 40rem 60rem;}
    div.jt-press-list__time {width: 20%;}
    .jt-press-list__time time b {font-size:50rem;}
    .jt-press-list__thumb {display:none;}
    .jt-press-list__title h2 {font-size:22rem;}
    .jt-press-list__desc {margin-top:20rem;}
}

@media (max-width: 860px){
    .jt-press-list__item { padding:30rem 0; border-bottom:1rem solid #ddd; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
    .jt-press-list__item > div {display:block; border-bottom:none;}
    div.jt-press-list__time { width: auto; padding-top: 0; -ms-flex-order: 2; -webkit-order: 2; -webkit-box-ordinal-group: 3; order: 2;}
    .jt-press-list__time time { margin-top:20rem; display:block; text-align:left;}
    .jt-press-list__time time b {display:inline-block;-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2; font-size:15rem; font-weight:500;}
    .jt-press-list__time time span { display:inline-block;}
    .jt-press-list__time time span:after {content:'.'; display:inline-block;}
    .jt-press-list__time time:after {display:none;}
    div.jt-press-list__content { padding:0;-ms-flex-order: 1; -webkit-order: 1; -webkit-box-ordinal-group: 2; order: 1;}
    .jt-press-list__title h2 {font-size:20rem;}
    .jt-press-list__desc {margin-top:15rem;}
    .jt-press-list__desc p {font-size:15rem;}
    .jt-press-list__time time span, .jt-press-list__time time b {font-size:14rem;}
    html.mobile div.jt-press-list__content {padding-right:0;}

}

@media (max-width: 540px){

    .jt-press-list__item { padding:32rem 0 30rem;}
    .jt-press-list__title h2 {font-size:18rem;}
    .jt-press-list__desc {margin-top:8rem;}
    .jt-press-list__desc p {line-height:1.4; height: 2.8em;}
    .jt-press-list__time time {margin-top:10rem;}
    .jt-press-list__time time span, .jt-press-list__time time b {font-size:13rem;}
    html.ios .jt-press-list__item {padding-top:33rem;}
}