@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) LAYOUT
 * 2) VISUAL
 * 3) CASES
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container {padding-top: 113rem;}



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual__picture {height: -webkit-calc(100vh - 240rem);height: calc(100vh - 240rem);position: relative;overflow: hidden;}
.main-visual__picture-inner {width: 100%;height: 100%;}
.main-visual__bg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;}

.main-visual__bg--small {display: none;}

.main-visual__typo {max-width: 650rem;margin-top: 31rem;}
.main-visual__typo .jt-heading--03 a {display: inline-block;max-width: 100%;border-bottom: 1px solid transparent;-webkit-transition: border .3s;transition: border .3s;}
.main-visual__typo .jt-heading--03 span {display: block;white-space: pre;text-overflow: ellipsis;overflow: hidden;}
html.desktop .main-visual__typo .jt-heading--03 a:hover {border-bottom-color: #000;}



/* **************************************** *
 * CASES
 * **************************************** */
.main-cases {margin-top: 172rem;}

/* title */
.main-cases__title {margin-bottom: 28rem;}
.main-cases__title h2 {font-size: 0;}
.main-cases__title h2 > * {display: inline-block;}
.main-cases__title h2 > span {vertical-align: baseline;}
.main-cases__title h2 > .jt-text--04 {margin-top: 18rem;margin-left: 11rem;vertical-align: top;font-style: normal;}

/* button */
.main-cases__more {display: block;width: 100%;padding: 85rem 241rem 85rem 43rem;position: relative;border-top: 1px solid #000;-webkit-transition: background .3s;transition: background .3s;}
.main-cases__more:after {content: '';display: block;width: 1px;height: 100%;position: absolute;top: 0;right: 198rem;background: #000;}
.main-cases__more:before {content: '';width: 198rem;height: 100%;position: absolute;top: 0;right:0;background: #f4f4f4;opacity: 0;-webkit-transition: opacity .3s;transition: opacity .3s;}
.main-cases__more > .jt-guide--icon {width: 68rem;height: 42rem;margin-top: -21rem;position: absolute;right: 70rem;top: 50%;}
html.desktop .main-cases__more:hover:before {opacity: 1;}

/* illust */
.main-cases__illust {width: 70rem;margin: 0 auto;}
.main-cases__illust svg {display: block;width: 100%;height: auto;}

/* layout */
.main-cases__group {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;position: relative;border-top: 1px solid #000;}
.main-cases__group:after {content: '';width: 1px;height: 100%;position: absolute;top: 0;background: #000;}
.main-cases__group > div {position: relative;padding-top: 114rem;padding-bottom: 114rem;}
.main-cases__first {padding-right: 114rem;}
.main-cases__last {padding-left: 114rem;}

.main-cases__group--primary:after {left: 63%;}
.main-cases__group--secondary:after {left: 37%;}
.main-cases__group--third:after {left: 50%;}
.main-cases__group--primary .main-cases__first {width: 63%;}
.main-cases__group--primary .main-cases__last {width: 37%;}
.main-cases__group--secondary .main-cases__first {width: 37%;}
.main-cases__group--secondary .main-cases__last {width: 63%;}
.main-cases__group--third .main-cases__first, .main-cases__group--third .main-cases__last {width: 50%;padding: 175rem;}

/* case item */
.main-cases__first .main-cases__item {float: right;}
.main-cases__last .main-cases__item {float: left;}

.main-cases__item {width: 100%;}
.main-cases__item--primary {max-width: 1020rem;}
.main-cases__item--secondary {max-width: 552rem;}
.main-cases__item a {display: block;}
.main-cases__thumb {position: relative;}
.main-cases__thumb .jt-lazyload {padding-top: 100%;}
.main-cases__thumb--base {position: relative;z-index: 1;}
.main-cases__thumb--hover {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;opacity: 0;-webkit-transition: opacity .3s cubic-bezier(0,0,.58,.32);transition: opacity .3s cubic-bezier(0,0,.58,.32);z-index: 2;}
.main-cases__item .jt-heading--03 {margin-top: 31rem;}
.main-cases__item .jt-heading--03 > span {border-bottom: 1px solid transparent;-webkit-transition: border .3s;transition: border .3s;}
html.desktop .main-cases__item a:hover .main-cases__thumb--hover {opacity: 1;}
html.desktop .main-cases__item a:hover .jt-heading--03 > span {border-bottom-color: #000;}

/* detail */
.main-cases__group--03 {-webkit-box-align: end;-webkit-align-items: flex-end;-ms-flex-align: end;align-items: flex-end;}
.main-cases__group--05 {-webkit-box-align: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
.main-cases__group--05 .main-cases__last {padding: 0;}
.main-cases__group--05 .main-cases__typo {width: 100%;height: 52.4%;padding: 60rem;position: absolute;left: 0;bottom: 0;border-top: 1px solid #000;}
.main-cases__group--06 {-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.main-cases__group--06 .main-cases__last {padding-left: 0;}
.main-cases__group--07 {-webkit-box-align: end;-webkit-align-items: flex-end;-ms-flex-align: end;align-items: flex-end;}
.main-cases__group--07 .main-cases__first {padding: 0;}