@charset "utf-8";

/* ====================
reset
==================== */
.sc-container {
	background: #ffffff;
}
.sc-container, .sc-container div, 
.sc-container ul, .sc-container ol, .sc-container li,
.sc-container h1, .sc-container h2, .sc-container h3, .sc-container h4,
.sc-container p, .sc-container span {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.sc-container img {
	border: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.sc-container li {
	list-style: none;
}

.sc-container h1, .sc-container h2,
.sc-container h3, .sc-container h4 {
	font-size: 100%;
	font-weight: normal;
	border: none;
}

.sc-container dl {
	font-size: 0;
}

button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

/* ====================
***
==================== */
.sc-container {
    width: 1180px;
    margin: 42px auto;
    background: #ffffff;
    color: #333333;
    font-size: 16px;
    font-family: "Noto Sans JP","Yu Gothic Medium","Yu Gothic","YuGothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    line-height: 1.875;
    overflow: hidden;
}

.sc-container strong {
	font-weight: bold;
}

.sc-container a,
.sc-container a:link,
.sc-container a:visited,
.sc-container a:active {
	text-decoration: none;
}

.sc-container a span {
	-webkit-transition: .4s;
	transition: .4s;
}

.sc-container a:hover,
.sc-container a:active {
	opacity: 1;
	text-decoration: none;
}

#page-top a {
	background: url(../img/btn_pagetop.png) left top;
	width: 100px;
	height: 100px;
	display: block;
	-webkit-transition: .4s;
	transition: .4s;
}

#page-top a:hover {
	opacity: 0.9;
}


/* ====================
keyv-area
==================== */
.sc-container .keyv-area {
    margin: 0 auto 50px;
}

.sc-container .keyv-image {
    width: 100%;
    height: 560px;
    margin: 0 auto 51px;
}

.sc-container .keyv-title {
    font-size: 30px;
    line-height: 1.5;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* ====================
nav-area
==================== */
.sc-container .nav-area {
    width: 1130px;
    margin: 0 auto 82px;
}
.sc-container .nav-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.sc-container .nav-list-item {
    width: calc((100% - 50px) / 6);
}
.sc-container .nav-list-link {
    display: flex;
    position: relative;
    border: solid 2px #e8e8e8;
    border-radius: 5px;
}
.sc-container .nav-list-link::after {
    display: block;
    content: "";
    position: absolute;
    bottom: 13px;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border-right: 1px solid #333333;
    border-top: 1px solid #333333;
    transform: rotate(135deg);
}
.sc-container .nav-list-link:hover img {
    -webkit-transform: scale(1.05,1.05) rotate(0.01deg);
	transform: scale(1.05,1.05) rotate(0.01deg);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.sc-container .nav-list-image {
    width: 73px;
    overflow: hidden;
}
.sc-container .nav-list-desc {
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: 96px;
    padding: 0 0 6px;
}
.sc-container .nav-list-desc-deco {
    display: block;
    position: absolute;
    top: -13px;
    left: 67px;
    padding: 0 5px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Josefin Sans', sans-serif;
}
.sc-container .nav-mens .nav-list-desc-deco {
    color: #3261ab;
}
.sc-container .nav-ladies .nav-list-desc-deco {
    color: #da6272;
}
.sc-container .nav-list-desc-title {
    display: block;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.3;
    margin: 0 0 6px;
}
.sc-container .nav-list-desc-catch {
    display: block;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Josefin Sans', sans-serif;
    line-height: 1;
}

/* ====================
section
==================== */
.sc-container .ladies.section {
    margin: 165px 0 0;
}
.sc-container .intro {
    position: relative;
    z-index: 0;
}
.sc-container .mens .intro {
    padding: 77px 90px 140px;
}
.sc-container .ladies .intro {
    padding: 75px 90px 141px;
}
.sc-container .intro::before {
    position: absolute;
    top: 63px;
    left: 0;
    right: 0;
    z-index: -1;
    transform: skewY(-6.25deg);
    content: "";
}
.sc-container .mens .intro::before {
    background-color: #e8eef7;
    height: calc(100% - 174px);
}
.sc-container .ladies .intro::before {
    background-color: #faecee;
    height: calc(100% - 172px);
}
.sc-container .intro-catch {
    position: absolute;
    z-index: 1;
    top: 45px;
    left: 56px;
    opacity: 0.5;
    font-size: 56px;
    font-weight: 600;
    font-family: 'Josefin Sans', sans-serif;
    line-height: 1;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.sc-container .mens .intro-catch {
    color: #3261ab;
}
.sc-container .ladies .intro-catch {
    color: #da6272;
}
.sc-container .intro-main-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sc-container .intro-image {
    position: relative;
    z-index: 0;
    width: 480px;
}
.sc-container .intro-desc {
    width: 480px;
    padding: 0 0 10px;
}
.sc-container .intro-desc-title {
    font-size: 30px;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
}
.sc-container .parts-list {
    margin: 60px 0 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.sc-container .parts-list-item {
    position: relative;
    width: 310px;
    padding: 33px 30px;
    background: #ffffff;
    box-shadow: 0 0 5px 0 rgba(50, 97, 171, 0.1);
}
.sc-container .parts-image {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 80px;
}
.sc-container .parts-desc-title {
    margin: 0 0 5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 16px;
    text-align: center;
}
.sc-container .parts-desc-text {
    font-size: 15px;
    line-height: 1.87;
}

/* ====================
sc-itemlist-area
==================== */
.sc-container .itemlist-area {
    margin: 0 0 125px;
    position: relative;
    z-index: 1;
}
.sc-container .itemlist-title-wrapper {
    position: relative;
    margin: 0 auto 30px;
    width: 1000px;
}
.sc-container .itemlist-title-wrapper::before {
    display: block;
    position: absolute;
    left: 0;
    bottom: 50%;
    width: 100%;
    height: 1px;
    background: #333333;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform 1s .2s;
    content: "";
}
.sc-container .itemlist-title-wrapper.scrollin::before {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}
.sc-container .itemlist-title {
    position: relative;
    width: 340px;
    margin: 0 auto;
    background: #ffffff;
    font-size: 26px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.08em;
    padding: 4px 0;
}
.sc-container .itemlist-title::before,
.sc-container .itemlist-title::after {
    display: block;
    position: absolute;
    top: calc(50% - 30px);
    width: 1px;
    height: 60px;
    background: #333333;
    content: "";
}
.sc-container .itemlist-title::before {
    left: 0;
}
.sc-container .itemlist-title::after {
    right: 0;
}
.sc-container .itemlist-title span {
    display: block;
    margin: 11px 0 0;
    font-size: 14px;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: 0;
}
.sc-container .itemlist-text {
    margin: 0 auto 53px;
    text-align: center;
}

.sc-container .sc-itemlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 1000px;
    margin: 0 auto;
}

.sc-container .list {
    position: relative;
    width: calc((100% - 120px) / 4);
    padding-bottom: 80px;
}

.sc-container .item-image {
    display: block;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.sc-container .item-image img {
    width: 100%;
    height: 100%;
}

.sc-container .item-image:hover img {
    -webkit-transform: scale(1.05,1.05) rotate(0.01deg);
    transform: scale(1.05,1.05) rotate(0.01deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sc-container .item-name {
    position: absolute;
    bottom: 24px;
    width: 100%;
    font-size: 14px;
    line-height: 1.57;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-container .item-price {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    font-weight: 700;
    line-height: 1;
    font-size: 18px;
}

.sc-container .tax {
    font-size: 12px;
}

/* icon */
.sc-container .icon-wrapper {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    margin-top: 11px;
}

.sc-container .icon {
    display: block;
    width: 105px;
    height: 18px;
    border: solid 1px #d1d1d1;
    font-size: 10px;
    line-height: calc(18px - 2px);
    text-align: center;
}

/* ====================
end-area
==================== */
.sc-container .end-area {
    width: 1000px;
    margin: 68px auto 0;
    padding: 71px 0 0;
    border-top: solid 1px #e8e8e8;
}
.sc-container .end-text {
    margin: 0 0 20px;
    text-align: center;
}
.sc-container .end-list {
    margin: 46px auto 0;
    width: 700px;
    display: flex;
    justify-content: center;
}
.sc-container .end-list-text {
    text-align: center;
}
.sc-container .end-list-text span {
    position: relative;
    font-size: 14px;
}
.sc-container .end-list-text span::before,
.sc-container .end-list-text span::after {
    display: block;
    position: absolute;
    top: 50%;
    width: 12px;
    height: 1px;
    background: #333333;
    content: "";
}
.sc-container .end-list-text span::before {
    left: -19px;
}
.sc-container .end-list-text span::after {
    right: -19px;
}
.sc-container .end-list-btn {
    width: 340px;
    margin: 10px auto 0;
}
.sc-container .end-list-btn-link {
    display: block;
    position: relative;
    border: 2px solid #e8e8e8;
    border-radius: 50px;
    background: #ffffff;
    height: 56px;
    line-height: calc(56px - 4px);
    text-align: center;
}
.sc-container .end-list-btn-link::after {
    display: block;
    content: "";
    position: absolute;
    bottom: calc(50% - 3px);
    right: 22px;
    width: 6px;
    height: 6px;
    border-right: 1px solid #333333;
    border-top: 1px solid #333333;
    transform: rotate(45deg);
}
.sc-container .end-list-btn-link:hover {
    background: #e8e8e8;
}
.sc-container .end-list-btn-link span {
    font-size: 18px;
    font-weight: 500;
}

/* ====================
スクロール
==================== */
/* 右からふわっと */
.intro-desc.fadein {opacity:0;transform:translateX(40px)}
.intro-desc.fadein.scrollin {opacity:1;transition:.8s .4s ease;transform:none}

/* catch部分 上からふわっと */
.intro-catch.fadein {opacity:0;transform:translateY(-40px)}
.intro-catch.fadein.scrollin {opacity:0.5;transition:.8s .2s ease;transform:none}

/* 下からふわっと */
.parts-list-item.fadein,
.list.fadein {opacity:0;transform:translateY(40px)}
.parts-list-item.fadein.scrollin,
.list.fadein.scrollin {opacity:1;transition:.8s .2s ease;transform:none}