@charset "utf-8";

/*
 * File       : modules/story/style.css
 * Author     : STUDIO-JT (NICO,KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 0) HEADER
 * 1) GRID LIST
 * 2) RWD
 */



/* **************************************** *
 * HEADER
 * **************************************** */
.story-header { text-align: center; padding-top: 80rem; padding-bottom: 20rem; }
.story-visual.wrap { height: 300rem; background: #ddd; margin-bottom: 80rem; }



/* **************************************** *
 *  GRID LIST
 * **************************************** */
.jt-grid-list-wrap{margin-bottom: 105rem;}

.jt-grid-list {position: relative;width: calc(100% + 32rem);margin-left: -32rem;}
.jt-grid-list:after {content: '';display: table;clear: both;}

.jt-grid-list__item {float: left;width: calc(25% - 32rem);margin-left: 32rem;margin-bottom: 40rem;}
.jt-grid-list__item:nth-child(4n) {margin-right: 0;}
.jt-grid-list__item:nth-child(4n+1) {clear: both;}

.jt-grid-list__link {display: block;position: relative;}
.jt-grid-list__link:after {content: '';border: 2rem solid #146af0);opacity: 0;margin: auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: 300ms border, 150ms opacity;transition: 300ms border, 150ms opacity;-webkit-transition-delay: 0ms, 100ms;transition-delay: 0ms, 100ms;position: absolute;top: 0;left: 0;right: 0;height: 190rem;z-index: 2;}
html.desktop .jt-grid-list__link:hover:after {border-width: 6rem;opacity: 1;-webkit-transition: 300ms border, 50ms opacity;transition: 300ms border, 50ms opacity;-webkit-transition-delay: 0ms, 0ms;transition-delay: 0ms, 0ms;}

.jt-grid-list__thumb {display: block;}
.jt-grid-list__thumb img {display: block;width: 100%; height: auto;}

.jt-grid-list__content {padding: 23rem 0 48rem;position: relative;}
.jt-grid-list__title {font-size: 18rem;font-weight: 600;line-height: 1.5;color: #00101d;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.jt-grid-list__title span br {display: none;}
.jt-grid-list__desc {display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;max-height: 7.7em;margin-top: 13rem;font-size: 16rem;font-weight: 400;line-height: 1.85;color: #666;text-overflow: ellipsis;overflow: hidden;}

/* Lazyload */
.jt-grid-list__thumb.jt-lazyload {padding-top: 190rem;}



/* **************************************** *
 * RWD
 * **************************************** */
@media (max-width: 1480px){
    .jt-grid-list__content {padding: 20rem 25rem 33rem;}
}

@media (max-width: 860px){
	
    .story-visual.wrap { margin-bottom: 60rem;}	
	.story-header { margin: 0 40rem;}
	
	.jt-grid-list { width: 100%; margin-left: 0;}
	
	.jt-grid-list-wrap { margin-left: 40rem; margin-right: 40rem;}

    .jt-grid-list__title {font-size: 19rem;}
    .jt-grid-list__desc {margin-top: 10rem;font-size: 15rem;}
	
    .jt-grid-list__link:after {display: none;}
    .jt-grid-list__content {padding: 18rem 0 23rem;}
    .jt-grid-list__title {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height: 2.7em;overflow: hidden;white-space: normal;font-size: 17rem;line-height: 1.35;}
    .jt-grid-list__desc {max-height: 3.2em;margin-top: 8rem;font-size: 14rem;line-height: 1.55;}

    .jt-grid-list__item {width: 48.5%;margin: 0 3% 3% 0;}
	.jt-grid-list__item:nth-child(3n) {margin-right: 3%;}
	.jt-grid-list__item:nth-child(3n+1) {clear: none;}
	.jt-grid-list__item:nth-child(even) {margin-right: 0;}
	.jt-grid-list__item:nth-child(odd) {clear: both;}
}

@media (max-width: 540px){
	
	.story-visual.wrap {  margin-bottom: 40rem;}
	.story-header { padding-top: 50rem; margin: 0 24rem;}

    .jt-grid-list__content {padding: 15rem 0 20rem;}
	.jt-grid-list-wrap { margin-left: 24rem; margin-right: 24rem;}
	
}