@charset "UTF-8";

.style-block {
  position: relative;
  overflow: hidden;
/*  padding-top: 20px;*/
}
.style-block::before, .style-block::after {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: left top;
}
.style-block::before {
  top: -50vw;
  left: 0;
  background-image: url(../img/style-bg.jpg);
}
.style-block::after {
  top: calc(100% - 21.25vw);
  left: 0;
  background-image: url(../img/style-bg2.jpg);
}

.title_cool {
	margin: 0 auto;
	width: 192px;
	position: relative !important;
	left: 240px;
}

.title_casual {
	margin: 0 auto;
	width: 245px;
	position: relative !important;
	left: -290px;
}

.style-container.style2020aw {
  position: relative;
  padding-top: calc(8.25vw - 20px);
}

.style2020aw .style-img-list {
  position: relative;
  width: 100%;
  z-index: 10;
  margin-top: 160px;
}

.modal-content-style {
  position: relative;
  width: 100%;
  z-index: 10;
}

.style2020aw .style-img-list > ul, .modal-content-style > ul {
	position: relative;
	width: 100%;
	pointer-events: none;
}

.style2020aw .style-img-list > ul:first-child, .modal-content-style > ul:first-child {
	margin-bottom: 125px;
	height: 38vw;
}

.style2020aw .style-img-list > ul:nth-child(2), .modal-content-style > ul:nth-child(2) {
	margin-bottom: 4.5vw;
	height: 43vw;
}

.style2020aw .style-img-list > ul > li, .modal-content-style > ul > li {
  display: block;
  position: absolute;
  pointer-events: auto;
}

.style2020aw .style-img-list > ul > li a, .modal-content-style > ul > li a {
  display: block;
  position: relative;
  overflow: hidden;
  height: 26.875vw;
}

.style2020aw .style-img-list > ul > li a div, .modal-content-style > ul > li a div {
  width: 100%;
  height: 100%;
  transform-origin: center;
  transition: .6s;
  transition-timing-function: ease-out;
}

.style2020aw .style-img-list > ul > li a img, .modal-content-style > ul > li a img {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: none;
  height: 100%;
}

.style2020aw .style-img-list > ul > li a .icon, .modal-content-style > ul > li a .icon {
  display: block;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 25px;
  height: 25px;
  opacity: .5;
  transition: .6s;
}

.style2020aw .style-img-list > ul > li a .icon::before,
.style2020aw .style-img-list > ul > li a .icon::after,
.modal-content-style > ul > li a .icon::before,
.modal-content-style > ul > li a .icon::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 25px;
  height: 1px;
  background-color: white;
}

.style2020aw .style-img-list > ul > li a .icon::after,
.modal-content-style > ul > li a .icon::after {
  transform: rotate(90deg);
}

.style2020aw .style-img-list > ul > li .description,
.modal-content-style > ul > li .description {
  padding: 5px;
}

.style2020aw .style-img-list > ul > li .description li,
.modal-content-style > ul > li .description li {
  font-size: 10px;
  line-height: 16px;
}

.style2020aw .style-img-list > ul > li .description li:first-child,
.modal-content-style > ul > li .description li:first-child {
  font-size: 14px;
  line-height: 20px;
}

.style2020aw .style-img-list > ul > li.img1,
.modal-content-style > ul > li.img1 {
  top: 2vw;
  left: 0;
  width: 30%;
  transform: translate(-100px, 100px);
}

.style2020aw .style-img-list > ul > li.img2,
.modal-content-style > ul > li.img2 {
  top: 5vw;
  left: 0;
  right: 0;
  margin: auto;
  width: 30%;
  transform: translateY(100px);
}

.style2020aw .style-img-list > ul > li.img3,
.modal-content-style > ul > li.img3 {
  top: 8vw;
  right: 0;
  left: auto;
  width: 30%;
  transform: translate(100px, 100px);
}

.style2020aw .style-img-list > ul > li.img4,
.modal-content-style > ul > li.img4 {
  top: 8vw;
  left: 0;
  width: 30%;
  transform: translate(-100px, 100px);
}

.style2020aw .style-img-list > ul > li.img5,
.modal-content-style > ul > li.img5 {
  top: 5vw;
  left: 0;
  right: 0;
  margin: auto;
  width: 30%;
  transform: translateY(100px);
}

.style2020aw .style-img-list > ul > li.img6,
.modal-content-style > ul > li.img6 {
  top: 11vw;
  right: 0;
  left: auto;
  width: 30%;
  transform: translate(100px, 100px);
}

.style2020aw .style-img-list > ul > li {
  opacity: 0;
  pointer-events: none;
  transition: .6s;
}

.style2020aw .style-img-list > ul > li a:hover div {
  transform: scale(1.05);
}

.style2020aw .style-img-list > ul > li a:hover .icon {
  transform: rotate(360deg);
}

.style2020aw .style-img-list > ul > li.is-show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0);
}

.style2020aw .style-img-list > ul > li p b {
	font-size: 12px;
	font-weight: normal;
}

.style2020aw .style-img-list > ul > li h4 {
	margin: 7px 0 0 4px;
	font-size: 24px;
	line-height: 1.2;
}

.style2020aw .style-img-list > ul > li.img1 h4 {
	color: #945a35;
}

.style2020aw .style-img-list > ul > li.img2 h4 {
	color: #7d6b48;
}

.style2020aw .style-img-list > ul > li.img3 h4 {
	color: #945a35;
}

.style2020aw .style-img-list > ul > li.img4 h4 {
	color: #804c37;
}

.style2020aw .style-img-list > ul > li.img5 h4 {
	color: #a8453b;
}

.style2020aw .style-img-list > ul > li.img6 h4 {
	color: #89654c;
}

.style2020aw .style-img-list > ul > li p {
	margin: 7px 0 0 4px;
	font-size: 10px;
	line-height: 1.2;
}

.style2020aw .style-img-list > ul > li p br {
	display: none;
}

.archives .style-block {
	padding-bottom: 150px;
}

.style-block::before {
	height: 120%;
}

.modal-content-style > ul > li {
  position: relative;
  top: auto !important;
  left: auto !important;
  width: 720px !important;
  transform: translate(0, 0) !important;
}
.modal-content-style > ul > li a {
	margin: 0 0 12px 0;
  width: 100%;
  height: 650px;
}
.modal-content-style > ul > li a img {
  width: 720px;
  height: 100% !important;
  pointer-events: auto;
}

.modal-content-style p,
.modal-content-style h4,
.modal-content-style .description {
  color: white;
}

.modal-content-style p {
	margin: 3px 0;
}

.modal-content-style p b {
	font-weight: normal;
}

.modal-content-style h4 {
	margin: 0;
	font-size: 24px;
	line-height: 1.4;
}

@media screen and (max-width: 690px) {

	.style2020aw .style-img-list {
		margin-top: 40px;
	}

	.style2020aw .style-img-list .title_cool {
		margin: 0 20px 30px auto;
		width: 150px;
		left: auto;
	}

	.style2020aw .style-img-list .title_casual {
		margin: 0 0 30px 20px;
		width: 190px;
		left: auto;
	}

	.style-block {
		position: relative;
		overflow: hidden;
	}

	.style-block .block-title {
		position: static;
	}

	.style-block::before {
		top: 0;
		background-position: -260px -520px;
		background-size: 900px auto;
	}

	.style-block::after {
		top: calc(100% - 28vw);
		background-size: 150%;
	}

	.style-container.style2020aw  {
		position: relative;
		padding-top: 20px;
	}

	.style2020aw .style-img-list {
		position: relative;
		margin-top: 40px;
		width: 100%;
		z-index: 10;
	}
	
	.style2020aw .style-img-list > ul {
		margin-bottom: 15vw !important;
		height: auto !important;
	}

	.style2020aw .style-img-list > ul > li {
		position: relative;
		margin-bottom: 40px;
	}

	.style2020aw .style-img-list > ul > li a {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		position: relative;
		overflow: hidden;
		pointer-events: none;
		height: 89.32vw;
	}

	.style2020aw .style-img-list > ul > li a .icon {
		display: none;
	}

	.style2020aw .style-img-list > ul > li a:hover img {
		transform: scale(1);
	}

	.style2020aw .style-img-list > ul > li .description {
		padding: 5px;
	}

	.style2020aw .style-img-list > ul > li .description li {
		font-size: 10px;
		line-height: 16px;
		white-space: nowrap;
	}

	.style2020aw .style-img-list > ul > li .description li:first-child {
		font-size: 14px;
		line-height: 20px;
	}

	.style2020aw .style-img-list > ul > li.img1 {
		top: auto;
		left: 0;
		width: 88%;
		transform: translate(-30px, 30px);
		clear: both;
	}

	.style2020aw .style-img-list > ul > li.img2 {
		top: auto;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
		width: 88%;
		transform: translateY(30px);
	}

	.style2020aw .style-img-list > ul > li.img3 {
		top: auto;
		right: 0;
		width: 88%;
		left: auto;
		margin-left: auto;
		margin-right: 0;
		transform: translate(30px, 30px);
	}

	.style2020aw .style-img-list > ul > li.img4 {
		top: auto;
		left: 0;
		width: 88%;
		transform: translate(-30px, 30px);
	}

	.style2020aw .style-img-list > ul > li.img5 {
		top: auto;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
		width: 88%;
		transform: translateY(30px);
	}

	.style2020aw .style-img-list > ul > li.img6 {
		top: auto;
		right: 0;
		width: 88%;
		left: auto;
		margin-left: auto;
		margin-right: 0;
		transform: translate(30px, 30px);
	}

	.style2020aw .style-img-list > ul > li {
		opacity: 0;
		pointer-events: none;
		transition: .6s;
	}
	
	.style2020aw .style-img-list > ul > li.is-show {
		opacity: 1;
		pointer-events: auto;
		transform: translate(0, 0);
	}

	.style2020aw .style-img-list > ul > li p b {
		font-size: 12px;
	}

	.style2020aw .style-img-list > ul > li h4 {
		margin: 3px 0 0 5px;
		font-size: 20px;
	}

	.style2020aw .style-img-list > ul > li p {
		margin: 5px 0 0 5px;
		line-height: 1.6;
	}

	.style2020aw .style-img-list > ul > li p br {
		display: block;
	}

	.archives .style-block {
		padding-bottom: 10px;
	}

}