@charset "UTF-8";
/* ==========================================================
 【uniqlo Life Wear magazine】(c)visual and echo japan
	Created: 2019-07

【keithhering】
	01.keithheringBlock
 ========================================================== */
.mod_visualFit .firstView {
  background-image: url("../images/keithhering/image01_sp.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* 1. keithheringBlock
* ------------------------- */
.keithheringBlock .hdg02 {
  text-align: center;
  margin-bottom: 9.42029%;
}
.keithheringBlock .hdg02 span {
  display: block;
  line-height: 1;
}
.keithheringBlock .hdg02 .en {
  font-size: 1.66667em;
}
.keithheringBlock .hdg02 .sub {
	font-size: 1.33333em;
	margin-top: 5px;
}
.keithheringBlock .hdg02 .ja {
  font-weight: bold;
  margin-top: 5px;
}
.keithheringBlock .top {
  padding: 11.5942% 0 9.42029%;
  border-bottom: #000 1px solid;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.keithheringBlock .top.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.keithheringBlock .top .image {
  width: 70.57971%;
  margin: 0 auto;
}
.keithheringBlock .top .copy {
	font-size: 0.83333em;
  line-height: 1;
  letter-spacing: -0.01em;
	text-align: center;
	margin: 5px 0 3.62319%;
}
.keithheringBlock .top dl dt {
  font-size: 1.66667em;
  line-height: 1;
  text-align: center;
  margin-bottom: 3.62319%;
}
.keithheringBlock .top dl dd {
  font-size: 1.16667em;
  line-height: 1.45455;
}
.keithheringBlock .archiveBlock {
  padding: 9.42029% 0 12.31884%;
  margin: 0 -4.4%;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.keithheringBlock .archiveBlock.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.keithheringBlock .archiveBlock .hdg02 {
  margin-bottom: 8.66667%;
}
.keithheringBlock .archiveBlock .slider .slick-list {
  padding: 0 4%;
  -webkit-transition: padding 100ms ease;
  transition: padding 100ms ease;
}
.keithheringBlock .archiveBlock .slider.last .slick-list {
  padding-left: calc(96% - 190px);
}
.keithheringBlock .archiveBlock .slider .slide {
  width: 190px;
  margin: 0 12px;
}
.keithheringBlock .archiveBlock .slider .slide figcaption {
  line-height: 1;
  text-align: center;
  margin-top: 4px;
}
.keithheringBlock .textBlock {
  padding: 9.42029% 0 12.31884%;
  border-top: #000 1px solid;
	border-bottom: #000 1px solid;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.keithheringBlock .textBlock.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.keithheringBlock .textBlock .text p {
  font-size: 1.16667em;
  line-height: 1.84615;
  letter-spacing: 0.01em;
  text-indent: 1em;
}
.keithheringBlock .textBlock .text p + p {
  margin-top: 1.5em;
}
.keithheringBlock .textBlock .text p.en {
  text-indent: 0;
}
.keithheringBlock .commentBlock {
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
	padding-top: 8.66666%;
}
.keithheringBlock .commentBlock.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.keithheringBlock .commentBlock .hdg02 {
	margin-bottom: 2%;
}
.keithheringBlock .commentBlock .credit {
	font-size: 0.83333em;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: center;
}
.keithheringBlock .commentBlock .wrap {
	border-bottom: #000 1px solid;
	margin: 9.42029% 0 8%;
}
.keithheringBlock .commentBlock .heading {
	width: 84.63768%;
	margin: 0 auto 10.14493%;
}
.keithheringBlock .commentBlock .heading .image .copy {
	font-size: 0.83333em;
  line-height: 1;
  letter-spacing: -0.01em;
	text-align: center;
	display: block;
}
.keithheringBlock .commentBlock .heading .title {
	margin-bottom: 5px;
}
.keithheringBlock .commentBlock .heading .title .hdg {
  margin-bottom: 4.34783%;
}
.keithheringBlock .commentBlock .heading .title .hdg span {
  display: block;
  line-height: 1;
}
.keithheringBlock .commentBlock .heading .title .hdg .en {
  font-size: 1.66667em;
}
.keithheringBlock .commentBlock .heading .title .hdg .en small {
	font-size: 0.65em;
}
.keithheringBlock .commentBlock .heading .title .hdg .ja {
  font-weight: bold;
	letter-spacing: -0.01em;
  margin-top: 5px;
}
.keithheringBlock .commentBlock .heading .title .credit {
  font-size: 0.83333em;
  line-height: 1;
  letter-spacing: -0.01em;
}
.keithheringBlock .commentBlock .body .text {
  font-size: 1.16667em;
  line-height: 1.84615;
  letter-spacing: 0.01em;
  text-indent: 1em;
}
.keithheringBlock .commentBlock .body .text + .text {
  margin-top: 1.5em;
}
.keithheringBlock .commentBlock .body .text.en {
  text-indent: 0;
}
.keithheringBlock .commentBlock .body .profile {
  margin-top: 5.7971%;
  padding-top: 7.24638%;
  border-top: #e5e5e5 1px solid;
  width: 100%;
  display: table;
  table-layout: fixed;
}
.keithheringBlock .commentBlock .body .profile > * {
  display: table-cell;
  vertical-align: top;
}
.keithheringBlock .commentBlock .body .profile .cap {
  width: 26.37681%;
}
.keithheringBlock .commentBlock .body .profile .in {
  padding-left: 2.6087%;
}
.keithheringBlock .commentBlock .body .profile .in * {
  font-size: 0.91667em;
  line-height: 1.45455;
}
.keithheringBlock .commentBlock .body .profile .in .name {
  line-height: 1.63636;
  font-weight: bold;
}
.keithheringBlock .imageBlock {
  margin: 0 -4.4%;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.keithheringBlock .imageBlock.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.keithheringBlock .imageBlock .hdg02 {
  margin-bottom: 10%;
}
.keithheringBlock .imageBlock .credit {
  font-size: 0.83333em;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: 10%;
}
.keithheringBlock .imageBlock .col {
  position: relative;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.keithheringBlock .imageBlock .col.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.keithheringBlock .imageBlock .col img {
  vertical-align: bottom;
}
.keithheringBlock .imageBlock .col .inner {
  text-decoration: none;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
}
.keithheringBlock .imageBlock .col .inner .detail {
  color: #fff;
  text-decoration: underline;
  line-height: 1;
  display: block;
  position: absolute;
  bottom: 13px;
  left: 13px;
}
.keithheringBlock .imageBlock .col.open .inner {
  opacity: 0;
}
.keithheringBlock .imageBlock .col .links {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  text-align: left;
}
.keithheringBlock .imageBlock .col .links .in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 13px;
}
.keithheringBlock .imageBlock .col .links ul {
  margin-top: auto;
}
.keithheringBlock .imageBlock .col .links ul li {
  margin-top: 12px;
  line-height: 1.666;
}
.keithheringBlock .imageBlock .col .links ul li:first-child {
  margin-top: 0;
}
.keithheringBlock .imageBlock .col .links ul li a {
  font-family: 'TTCommons-Medium';
  letter-spacing: -0.01em;
}
.keithheringBlock .imageBlock .col .links .close {
  margin-top: 25px;
  line-height: 1;
}
.keithheringBlock .imageBlock .col .links .close button {
  font-family: 'TTCommons-Medium';
  letter-spacing: -0.01em;
  text-decoration: underline;
  outline: none;
}
.keithheringBlock .imageBlock .col + .col {
  margin-top: 4%;
}
.keithheringBlock .imageBlock .col.left, .keithheringBlock .imageBlock .col.right {
  width: 80%;
}
.keithheringBlock .imageBlock .col.right {
  margin-left: auto;
}

/*/////////////////////////////
 RWD
/////////////////////////////*/
@media (min-width: 813px) {
  .mod_visualFit .firstView {
    background-image: url("../images/keithhering/image01_pc.jpg");
  }

  .keithheringBlock .hdg02 {
    margin-bottom: 0;
  }
  .keithheringBlock .hdg02 .en {
    font-size: 2em;
  }
	.keithheringBlock .hdg02 .sub {
		font-size: 1.71428em;
    margin-top: 8px;
	}
  .keithheringBlock .hdg02 .ja {
    font-size: 1.14286em;
    margin-top: 8px;
  }
  .keithheringBlock .top {
    margin: 0 8.33333%;
    padding: 5.83333% 0 6.25%;
  }
  .keithheringBlock .top .image {
    width: 59.23077%;
  }
	.keithheringBlock .top .copy {
		font-size: 0.78571em;
		margin-bottom: 6.15385%;
	}
  .keithheringBlock .top dl dt {
    font-size: 2em;
    margin-bottom: 2.30769%;
  }
  .keithheringBlock .top dl dd {
    font-size: 1em;
    line-height: 1.53846;
  }
  .keithheringBlock .archiveBlock {
    padding: 6.25% 0 1.25%;
    margin: 0 8.33333%;
  }
  .keithheringBlock .archiveBlock .hdg02 {
    margin-bottom: 1.5%;
  }
  .keithheringBlock .archiveBlock .slider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .keithheringBlock .archiveBlock .slider .slide {
    width: 27.1%;
    margin: 0 0 30px 3.4%;
  }
  .keithheringBlock .archiveBlock .slider .slide figcaption {
    font-size: 1.14286em;
    margin-top: 5px;
  }
  .keithheringBlock .archiveBlock .slider .slide:first-child {
    margin-left: 0;
  }
  .keithheringBlock .archiveBlock .slider .slide:nth-child(4) {
    margin-left: 11.9%;
  }
  .keithheringBlock .textBlock {
    margin: 0 8.33333%;
    padding: 1.25% 0 5.83333%;
    border-top: none;
  }
  .keithheringBlock .textBlock .hdg02 {
    margin-bottom: 9.23077%;
  }
  .keithheringBlock .textBlock .text p {
    font-size: 1.14286em;
    line-height: 2.125;
  }
	.keithheringBlock .commentBlock {
		padding-top: 5.83333%;
	}
	.keithheringBlock .commentBlock .hdg02 {
		margin-bottom: 1.17187%;
	}
	.keithheringBlock .commentBlock .credit {
		font-size: 0.78571em;
	}
	.keithheringBlock .commentBlock .wrap {
		margin: 5.83333% 8.33333%;
	}
  .keithheringBlock .commentBlock .inner {
    border-top: none;
    padding: 0 6.57276%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .keithheringBlock .commentBlock .heading {
		width: 43%;
    margin-bottom: 0;
  }
	.keithheringBlock .commentBlock .heading .image .copy {
		font-size: 0.78571em;
	}
  .keithheringBlock .commentBlock .heading .title .hdg {
    margin-bottom: 3.77833%;
  }
  .keithheringBlock .commentBlock .heading .title .hdg .en {
    font-size: 2em;
    line-height: 1;
  }
	.keithheringBlock .commentBlock .heading .title .hdg .en small {
		font-size: 0.71428em;
	}
  .keithheringBlock .commentBlock .heading .title .hdg .ja {
    font-size: 1.14286em;
		margin-top: 8px;
  }
  .keithheringBlock .commentBlock .heading .title .credit {
    font-size: 0.78571em;
  }
	.keithheringBlock .commentBlock .body {
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		width: 57%;
		padding-left: 5.4054%;
	}
  .keithheringBlock .commentBlock .body .text {
    font-size: 1.14286em;
    line-height: 2.125;
  }
  .keithheringBlock .commentBlock .body .profile {
    margin-top: 6%;
    padding-top: 8%;
  }
  .keithheringBlock .commentBlock .body .profile .cap {
    width: 18.8%;
  }
  .keithheringBlock .commentBlock .body .profile .in {
    padding-left: 3.6%;
  }
  .keithheringBlock .commentBlock .body .profile .in * {
    font-size: 0.92857em;
    line-height: 1.53846;
  }
  .keithheringBlock .commentBlock .body .profile .in .name {
    line-height: 1.53846;
  }
  .keithheringBlock .imageBlock {
    margin: 0;
    padding: 0 8.33333%;
  }
  .keithheringBlock .imageBlock .hdg02 {
    margin-bottom: 7.5%;
  }
  .keithheringBlock .imageBlock .credit {
    font-size: 0.78571em;
    margin-bottom: 7.5%;
  }
  .keithheringBlock .imageBlock .col {
    overflow: hidden;
  }
  .keithheringBlock .imageBlock .col img {
    width: 100%;
    max-width: none;
    -webkit-transition: .6s ease-out;
    transition: .6s ease-out;
  }
  .keithheringBlock .imageBlock .col .inner {
    z-index: 2;
  }
  .keithheringBlock .imageBlock .col .inner .detail {
    color: #fff;
    bottom: 20px;
    left: 20px;
  }
  .keithheringBlock .imageBlock .col .inner:hover .detail {
    text-decoration: none;
  }
  .keithheringBlock .imageBlock .col .inner:hover + img {
    opacity: .7;
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  .keithheringBlock .imageBlock .col .links {
    z-index: 3;
  }
  .keithheringBlock .imageBlock .col .links .in {
    padding: 20px;
  }
  .keithheringBlock .imageBlock .col .links ul li {
    font-size: 0.92857em;
    margin-top: 23px;
  }
  .keithheringBlock .imageBlock .col .links .close {
    margin-top: 45px;
  }
  .keithheringBlock .imageBlock .col .links .close button:hover {
    text-decoration: none;
  }
  .keithheringBlock .imageBlock .col.open img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  .keithheringBlock .imageBlock .col + .col {
    margin-top: 6%;
  }
  .keithheringBlock .imageBlock .col.left, .keithheringBlock .imageBlock .col.right {
    width: 48%;
  }
  .keithheringBlock .imageBlock .col.wide {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
  }
  .keithheringBlock .imageBlock .col.col01 {
    margin-top: -28.7%;
  }
  .keithheringBlock .imageBlock .col.col02 {
    margin-top: -24.7%;
  }
  .keithheringBlock .imageBlock .col.col03 {
    margin-top: -28.3%;
  }
}