@charset "utf-8";

/*
 * File    : sub-inside.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * SELECTED
 * NEW & RESEARCH
 * HOVER
 */

 

/* **************************************** *
 * SELECTED
 * **************************************** */
/* INTRO */
.selection-intro { padding: 40rem 0 100rem; }
.selection-intro p { font-size: 30rem; line-height: 1.25; font-weight: 500; }

/* DATA */
.selection-data__bundle { display: grid; grid-template-columns: 48.97fr 51.03fr; align-items: start; gap: 34rem; position: relative; }

.selection-data__gallery { height: 100%; position: relative; }
.selection-data__gallery > img { width: auto; height: auto; max-width: 100%; max-height: 70%; margin: auto; position: absolute; left: -50%; right: -50%; top: -50%; bottom: -50%; overflow: auto; }

.selection-data__list { word-break: break-all; }
.selection-data__list > li { display: grid; grid-template-columns: 167rem 1fr; border-top: 1px solid var(--color-black); }
.selection-data__list > li:last-child { border-bottom: 1px solid var(--color-black); }
.selection-data__list-project > li { display: grid; grid-template-columns: 1fr 249rem; position: relative; }
.selection-data__list-project > li + li:after { content: ''; width: calc(100% - 9rem); height: 1px; position: absolute; top: 0; right: 0; background: var(--color-black); }
.selection-data__list-project > li:has(.selection-data__list-thumb) { cursor: pointer; }
.selection-data__list-month,
.selection-data__list-name,
.selection-data__list-director { padding: 9rem 9rem 16rem; position: relative; font-size: 16rem; line-height: 1.43; font-weight: 500; transition: all .3s; }
.selection-data__list-name:after,
.selection-data__list-director:after { content: ''; width: 1px; height: calc(100% - 20rem); position: absolute; top: 0; left: 0; background: var(--color-black); }
.selection-data__list-thumb { display: none; }
.selection-data__list-thumb .jt-lazyload { padding-top: 100%; }
.selection-data__list-project .selection-data__list-month { display: none; }

.selection-data__list > li:has(.selection-data__list--current) > .selection-data__list-month { font-size: 26rem; line-height: 1.3; font-weight: 700; background: var(--color-primary); }
.selection-data__list-project > li.selection-data__list--current { background: var(--color-primary); }
.selection-data__list-project > li.selection-data__list--current .selection-data__list-name, 
.selection-data__list-project > li.selection-data__list--current .selection-data__list-director { font-size: 26rem; line-height: 1.3; font-weight: 700; }



/* **************************************** *
 * NEW & RESEARCH
 * **************************************** */
.inside-entries { display: grid; grid-template-columns: 31fr 110fr 67fr; word-break: break-all; }
.inside-entries__column { min-width: 0; padding: 9rem 20rem 16rem 9rem; position: relative; }
.inside-entries__column:not(:first-child):after { content: ''; width: 1px; height: 30rem; position: absolute; top: 0; left: 0; background: var(--color-black); }

.inside-entries__column > * { font-size: 16rem; line-height: 1.32; font-weight: 500; }
.inside-entries__column .inside-entries__highlight { font-weight: 900; }

.inside-entries__url > a { text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .3s; }

.inside-entries__thumb { width: 100%; max-width: 740rem; }

.inside-entries__txt p { font-size: 16rem; line-height: 1.32; font-weight: 500; }
.inside-entries__txt p + p { margin-top: 20rem; }

.inside-entries--type-block .inside-entries__column { padding-top: 0; padding-bottom: 0; }
.inside-entries--type-block .inside-entries__column:not(:first-child):after { display: none; }

.jt-board__empty .inside-entries { border: solid var(--color-black); border-width: 1px 0; }

/* WITH ACCORDION */
.jt-accordion__head .inside-entries__column { overflow: hidden; }
.jt-accordion__head .inside-entries__column > * { display: block; white-space: pre; text-overflow: ellipsis; overflow: hidden; transition: font-size .3s, font-weight .3s; }

.jt-accordion__item:not(.jt-accordion--active).jt-accordion--hover .jt-accordion__head .inside-entries__column > * { font-size: 32rem; font-weight: 700; }

html.mac.safari .jt-accordion__head .inside-entries__column > * { transition: none; }

/* RESEARCH */
.research-list { border-top: 1px solid var(--color-black); }
.research-list__item { border-bottom: 1px solid var(--color-black); cursor: pointer; transition: background-color .3s; overflow: hidden; }

.research-list .inside-entries { align-items: self-start; }
.research-list .inside-entries__column { padding-bottom: 73rem; }
.research-list .inside-entries__url { word-break: break-all; }
.research-list .inside-entries__thumb { max-width: 250rem; margin-top: 40rem; transition: max-width .6s cubic-bezier(0.215, 0.61, 0.355, 1); }

.research-list .inside-entries__txt:not(:only-child) { display: none; margin-top: 39rem; }
.research-list .inside-entries__txt:only-child > *:not(:first-child) { display: none; } 

.research-list__item.research-list--active { background: var(--color-primary); }
.research-list__item.research-list--active .inside-entries__column { padding-bottom: 134rem; }
.research-list__item.research-list--active .inside-entries__thumb { max-width: 600rem; }

.research-list--small { display: none; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* SELECTED */
    .selection-data__list > li:has(.selection-data__list-project > li:hover .selection-data__list-thumb) > .selection-data__list-month,
    .selection-data__list-project > li:has(.selection-data__list-thumb):hover .selection-data__list-name,
    .selection-data__list-project > li:has(.selection-data__list-thumb):hover .selection-data__list-director { background: var(--color-primary); }

    /* NEW & RESEARCH */
    .inside-entries__url > a:hover { text-decoration-color: currentColor; }

    .research-list__item:hover { background: var(--color-primary); }

}