@charset "UTF-8";
/*
@font-face {
	font-family: 'GUJPCorporate';
	src: url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Light_v2.0.woff2') format('woff2'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Light_v2.0.woff') format('woff'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Light_v2.0.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GUJPCorporate';
	src: url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Regular_v2.0.woff2') format('woff2'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Regular_v2.0.woff') format('woff'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Regular_v2.0.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'GUJPCorporate';
	src: url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Bold_v2.0.woff2') format('woff2'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Bold_v2.0.woff') format('woff'),
	url('/jp/ja/corp/fonts/GUJPCorporate-Kana-Bold_v2.0.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
*/

body{
	background: #ffffff;
	padding: 0;
}
#container {
	min-width: 1160px;
	padding: 0;
	overflow: hidden;
}
.mb-10 {margin-bottom: 10px!important;}
.mb-20 {margin-bottom: 20px!important;}
.mb-30 {margin-bottom: 30px!important;}
.mb-40 {margin-bottom: 40px!important;}
.mb-50 {margin-bottom: 50px!important;}
.mb-55 {margin-bottom: 55px!important;}
.mb-60 {margin-bottom: 60px!important;}
.mb-70 {margin-bottom: 70px!important;}
.mb-80 {margin-bottom: 80px!important;}
.mb-90 {margin-bottom: 90px!important;}
.mb-100 {margin-bottom: 100px!important;}

/* guquality
----------------------------------*/
#guquality {
	width: 1160px;
	margin: 0 auto;
	/*font-family: 'GUJPCorporate', 'Avenir Next', Roboto, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif;*/
	font-weight: 400;
	letter-spacing: 0.05rem;
	font-feature-settings: 'palt';
}

/* main
---------------------------------------------------*/
#guquality .mainVisual {
	margin: 41px auto 55px;
	text-align: right;
	position: relative;
	width: 1160px;
	height: 500px;
	display: table;
}
#guquality .mainVisual .mainImg {
	position: absolute;
	top: 0;
	right: 0;
}
#guquality .mainVisual .ttl {
	width: 410px;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 40px;
	letter-spacing: 5px;
	font-weight: 700;
	line-height: 1.3;
	position: relative;
	z-index: 1;
}
#guquality .mainVisual.large .ttl {
	width: 1160px;
}
#guquality .mainVisual .ttl span.txt {
	display: block;
	font-size: 16px;
	margin-bottom: 20px;
	letter-spacing: 1px;
}
#guquality .mainVisual .ttl span.sub {
	display: block;
	font-size: 19px;
	margin-top: 21px;
	letter-spacing: 1px;
}
#guquality .mainLead .lead {
	margin-bottom: 55px;
	text-align: center;
	letter-spacing: 0.2px;
	line-height: 1.7;
	font-size: 14px;
}
#guquality .mainVisual + .styling,
#guquality .genderMenuArea + .styling,
#guquality .mainLead + .styling,
#guquality .menuImageArea + .styling,
#guquality .menuArea + .styling {
	margin-top: 100px;
}
#guquality .shopList {
	width: 840px;
	background-color: #f5f5f5;
	text-align: center;
	padding: 29px 0 32px;
	margin: 0 auto 58px;;
}

#guquality .shopList p {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 20px;
}

#guquality .shopList .link {
	display: inline-block;
}

#guquality .shopList .link a {
	font-size: 16px;
	color: #1b1b1b;
	letter-spacing: 0.075em;
}

#guquality .shopList .link a:first-of-type {
	margin-right: 48px;
}

#guquality .shopList .link a span {
	position: relative;
	display: inline-block;
	padding-right: 18px;
	text-decoration: underline;
}

#guquality .shopList .link a span::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-right: #1b1b1b 1px solid;
	border-bottom: #1b1b1b 1px solid;
	transform: rotate(-45deg);
}

#guquality .shopList .link a:hover span {
	text-decoration: none;
}

/* menuArea
---------------------------------------------------*/
#guquality .menuArea .ttl {
	font-weight: 700;
	font-size: 21px;
	text-align: center;
	margin-bottom: 40px;
}
#guquality .menuArea .ttl.short {
	margin-bottom: 20px;
}
#guquality .menuArea .lead {
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	margin-bottom: 60px;
}
#guquality .menuArea .ancMenu {
	margin-bottom: 100px;
	letter-spacing: -.5em;
	text-align: center;
}
#guquality .menuArea .ancMenu li {
	letter-spacing: normal;
	display: inline-block;
	margin-right: 20px;
}
#guquality .menuArea .ancMenu li:last-child {
	margin-right: 0;
}
#guquality .menuArea .ancMenu li a {
	display: block;
	width: 275px;
	height: 60px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	background-color: #000000;
	border: solid 1px #000000;
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
#guquality .menuArea .ancMenu li a::after {
	position: absolute;
	right: 17px;
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-right: #ffffff 1px solid;
	border-bottom: #ffffff 1px solid;
	transform: rotate(45deg);
}
#guquality .menuArea .ancMenu li a .new {
	display: block;
	margin-bottom: 8px;
	color: #ffcf47;
}

/* bannerAreaFixed
---------------------------------------------------*/
#guquality .bannerAreaFixed {
	margin-bottom: 115px;
	text-align: center;
}
#guquality .bannerAreaFixed .bnr {
	margin-bottom: 40px;
}
#guquality .bannerAreaFixed .bnr:last-child {
	margin-bottom: 0;
}


/* styling
---------------------------------------------------*/
#guquality .styling {
	margin-bottom: 45px;
}
#guquality .styling .ttl {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 15px;
}
#guquality .styling .ttl.big {
	font-size: 26px;
	margin-bottom: 30px;
}
#guquality .styling .ttl.small {
	font-size: 21px;
	margin-bottom: 50px;
}
#guquality .styling .ttl.small.women {
	color: #ef5c79
}
#guquality .styling .ttl.small.men {
	color: #0083ce;
}
#guquality .styling .ttl.small.kids {
	color: #8fc400;
}
#guquality .styling .ttl.mbSmall {
	margin-bottom: 34px;
}
#guquality .styling .ttl.lh {
	line-height: 1.25;
	margin-top: -5px;
	margin-bottom: 54px;
}
#guquality .styling .ttl.copy {
	margin-bottom: 34px;
}
#guquality .styling .ttl.nocopy {
	margin-bottom: 58px;
}
#guquality .styling .ttl.title {
	width: 956px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
	margin: 0 auto 42px;
    background: #f5f5f5;
    padding: 17px 0;
}
#guquality .styling .ttl.title.large {
    padding: 23px 0;
}
#guquality .styling .ttl.title .small {
    font-size: 16px;
    margin-bottom: 18px;
    display: block;
    text-align: center;
    font-weight: 400;
}
#guquality .styling .ttl.new span {
	color: #f8d269;
	padding-right: 5px;
}
#guquality .styling .lead {
	margin-bottom: 45px;
	text-align: center;
	letter-spacing: 0.2px;
	line-height: 1.5;
	font-size: 16px;
}
#guquality .styling .modelArea {
	margin: 0 auto 120px;
}
#guquality .styling .modelArea.mbsmall {
	margin-bottom: 40px;
}
#guquality .styling .model .coordinateLink {
	cursor: pointer;
	width: 300px;
	height: 60px;
	margin: 0 auto;
}
#guquality .styling .model .coordinateLink p {
	position: relative;
	color: #1b1b1b;
	border: solid 1px #1b1b1b;
	background-color: #fff;
	width: 300px;
	padding: 21px 15px 23px 0px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	box-sizing: border-box;
}
#guquality .styling .model .coordinateLink p:after {
	content: '';
	width: 10px;
	height: 10px;
	border: 0px;
	border-top: solid 1px #1b1b1b;
	border-right: solid 1px #1b1b1b;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	margin-top: -5px;
	margin-left: 6px;
}
#guquality .styling .model .coordinateLink {
	margin-top: 39px;
}
#guquality .styling .model .left {
	float: left;
}
#guquality .styling .model .right {
	float: right;
}
#guquality .styling .model .imgLarge {
	width: 480px;
}
#guquality .styling .model .imgSmall {
	width: 400px;
	margin-top: 63px;
}
#guquality .styling .model .imgNon {
	width: 400px;
	overflow: hidden;
}
#guquality .styling .model .left.imgSmall {
	margin-left: 40px;
}
#guquality .styling .model .imgArea:nth-child(1) {
	margin-left: 100px;
}
#guquality .styling .model .imgArea:nth-child(2) {
	margin-right: 100px;
}
#guquality .styling .model .imgArea.single {
	margin: 0;
	text-align: center;
}
#guquality .styling .model .imgArea.imgSmall.btn2 {
	margin-top: 25px;
}
#guquality .styling .model .imgNon.btn1 {
	margin-top: 283px;
}
#guquality .styling .model .imgArea.btn2 {
	margin-top: 243px;
}
#guquality .styling .model .imgNon.left .coordinateLink {
	float: right;
	margin: 0;
}
#guquality .styling .model .imgNon.right .coordinateLink {
	float: left;
	margin: 0;
}
#guquality .styling .model .imgArea.btn2 .coordinateLink:last-child {
	margin-top: 20px;
}
#guquality .styling .model .imgNon.btn1 .coordinateLink {
	margin: 0;
}
#guquality .styling .model .imgArea img {
	display: inline-block;
}
#guquality .styling .model .lead {
	text-align: center;
	font-size: 16px;
	margin: 0 auto 44px;
}
#guquality .styling .model .lead .note {
	display: block;
	text-align: center;
	font-size: 12px;
	margin: 10px auto 0;
}
#guquality .styling .model .lead.top {
	margin: 0 auto 17px;
}
#guquality .styling .model + .featureLink,
#guquality .styling .model + .listLink {
	margin-bottom: 120px;
}

/* recommendedArea
---------------------------------------------------*/
#guquality .recommendedArea {
	width: 960px;
	margin: 60px auto 130px;
}
#guquality .recommendedArea .ttl {
	text-align: center;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 2px;
	margin: -3px auto 26px;
}
#guquality .recommendedArea .smallTxt {
	font-size: 16px;
	margin: 0 auto 12px;
	text-align: center;
}
#guquality .recommendedArea .ttlSub {
	margin: 0 0 59px;
	padding: 7px 0 0;
	font-size: 21px;
	font-weight: 700;
	text-align: center;
}
#guquality .recommendedArea .ttlSub span {
	position: relative;
}
#guquality .recommendedArea .ttlSub span:before,
#guquality .recommendedArea .ttlSub span:after {
	width: 25px;
	height: 1px;
	background: #000;
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	top: 0;
	margin: auto;
}
#guquality .recommendedArea .ttlSub span:before {
	left: -55px;
}
#guquality .recommendedArea .ttlSub span:after {
	right: -55px;
}
#guquality .recommendedArea .lead {
/*	margin-bottom: 55px;*/
	margin-bottom: 17px;
	margin-left: 7px;
	text-align: center;
	letter-spacing: 0.2px;
	line-height: 1.5;
/*	font-size: 14px;*/
	font-size: 16px;
}
#guquality .recommendedArea .aliasBlock {
	margin-bottom: 50px;
}
#guquality .aliasWrapper.mb60 {
	margin-bottom: 60px;
}
#guquality .aliasWrapper .aliasBlock {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}
#guquality .recommendedArea .itemBlock + .listLink {
	margin-bottom: 39px;
}

#guquality .swiper-pagination {
	position: relative;
	margin: 32px auto 0;
	left: 0;
	width: 100%;
	text-align: center;
}
#guquality .swiper-pagination span {
	margin: 0 5px;
}
#guquality .swiper-pagination-bullet-active {
	opacity: 1;
	background: #535353;
}

#guquality .listLink {
	width: 460px;
	margin: 39px auto 90px;
}
#guquality .listLink a {
	width: 460px;
	display: block;
	color: #1b1b1b;
	border: solid 1px #1b1b1b;
	border-radius: 15px;
	background-color: #fff;
	padding: 22px 0;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	box-sizing: border-box;
}
#guquality .aliasSlider .swiper-slide {
	width: 290px !important;
	margin: 0 !important;
}
#guquality .aliasSlider .swiper-slide img {
	width: 290px !important;
	height: auto !important;
}
#guquality .aliasSlider img {
	width: 290px;
}
#guquality .aliasSlider .aliasSliderBtn .btnPrev,
#guquality .aliasSlider .aliasSliderBtn .btnNext {
	top: -235px;
}

/* itemArea
---------------------------------------------------*/
#guquality .itemArea {
	width: 960px;
	margin: 0 auto 60px;
}
#guquality .itemArea .lead {
	text-align: center;
	font-size: 16px;
	margin: 0 auto 17px;
}
#guquality .itemArea .ttl {
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	margin: 0 auto 40px;
}

@-webkit-keyframes flash{
	0% {opacity: .7;}
	100% {opacity: 1;}
}
@keyframes flash{
	0% {opacity: .7;}
	100% {opacity: 1;}
}

/* bannerArea
---------------------------------------------------*/
#guquality .fe-common-recommend-bnrs {
	margin: 30px auto 20px!important;
}

/* modalArea
---------------------------------------------------*/
#guquality .modalArea {
	margin: 0 auto;
}

#guquality .modalArea .modalList {
	margin: 0 auto 75px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#guquality .modalArea .modalList:before {
	content: "";
	display: block;
	width: 270px;
	height: 0;
	order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}
#guquality .modalArea .modalList:after {
	content: "";
	display: block;
	width: 270px;
}
#guquality .modalArea .modalList .ttl {
	text-align: center;
	font-size: 24px;
	line-height: 1;
	margin: 79px 0 40px;
	font-weight: 700;
	letter-spacing: 3px;
	color: #d2954e;
}
#guquality .modalArea .modalList .note {
	margin: 0 auto 25px;
	text-align: center;
	font-size: 15px;
	color: #d2954e;
	font-weight: bold;
}
#guquality .modalList {
	letter-spacing: -.5em;
	text-align: center;
}
#guquality .modalArea .modalList li {
	position: relative;
	display: inline-block;
	letter-spacing: normal;
	width: 270px;
	margin-bottom: 40px;
	text-align: left;
}
#guquality .modalArea .modalList li:last-child {
	margin-right: 0;
}
#guquality .modalArea .modalList li a {
	color: #1b1b1b;
	display: flex;
	height: 100%;
	flex-direction: column;
}
#guquality .modalArea .modalList li a .icon {
	margin: 15px 0 11px;
}
#guquality .modalArea .modalList li a .icon span {
	display: inline-block;
	font-size: 11px;
	line-height: 1;
	padding: 4px 5px;
	margin-right: 3%;
}
#guquality .modalArea .modalList li a .icon span.women {
	color: #ef5c79;
	border: 1px solid #ef5c79;
}
#guquality .modalArea .modalList li a .icon span.men {
	color: #0083ce;
	border: 1px solid #0083ce;
}
#guquality .modalArea .modalList li a .icon span.kids {
	color: #8fc400;
	border: 1px solid #8fc400;
}
#guquality .modalArea .modalList li a .text {
	font-size: 14px;
	line-height: 1.3;
	margin-bottom: 3px;
}
#guquality .modalArea .modalList li a .title {
	display: inline-block;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 700;
	position: relative;
	margin-top: auto;
}
#guquality .modalArea .modalList li a .title::after {
	content: '';
	width: 8px;
	height: 8px;
	border: 0px;
	border-top: solid 1px #1b1b1b;
	border-right: solid 1px #1b1b1b;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	margin-top: -3px;
	margin-left: 12px;
}
.modaal-content-container {
	padding: 0;
}
.modaal-close:focus, .modaal-close:hover {
	outline: 0;
	background: #fff
}
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
	background: #fff
}
.modaal-fullscreen .modaal-close {
	background: #c0c0c0;
	right: 44px;
	top: 22px;
	width: 45px;
	height: 45px;
}
.modaal-close:after, .modaal-close:before {
	width: 2px;
	top: 11px;
	left: 22px;
}
.modaal-wrapper {
	z-index: 100000;
}

.modalContent {
	width: 750px;
	margin: 0 auto;
	padding: 60px 0;
}
.modalContent .main {
	margin: 0 auto;
	padding: 20px 0 60px;
	display: flex;
	justify-content: space-between;
}
.modalContent .main .itemList {
}
.modalContent .main .itemList li {
	margin-bottom: 25px;
}
.modalContent .title {
	font-size: 26px;
	font-weight: bold;
	margin: 0 auto 18px;
	text-align: center;
}
.modalContent .title span {
	font-size: 18px;
	display: block;
	margin: 0 auto 18px;
}
.modalContent .text {
	font-size: 26px;
	font-weight: bold;
	line-height: 1.4;
	margin: 0 auto 18px;
	text-align: center;
}
.modalContent .obsession img {
	width: 100%;
	vertical-align: bottom;
}
.modalContent .styleimage.multiple {
	position: relative;
	width: 326px;;
	padding-bottom: 425px;
}
.modalContent .styleimage img {
	width: 100%;
	vertical-align: bottom;
}
.modalContent .styleimage.multiple img {
	position: absolute;
	width: 100%;
	opacity: 0;
	animation: change-img-anim 5s infinite;
}
.modalContent .styleimage:not(.multiple) img {
	animation: change-img-anim-single .75s;
}
.modalContent .styleimage.multiple img:nth-of-type(1) {
	animation-delay: 0s;
}
.modalContent .styleimage.multiple img:nth-of-type(2) {
	animation-delay: 2.5s;
}
@keyframes change-img-anim {
	0%{ opacity: 0;}
	15%{ opacity: 1;}
	45%{ opacity: 1;}
	50%{ opacity: 1;}
	60%{ opacity: 0;}
	100%{ opacity: 0;}
}
@keyframes change-img-anim-single {
	0%{ opacity: 0;}
	100%{ opacity: 1;}
}
.modalContent .productTitle {
	text-align: center;
	font-size: 21px;
	font-weight: bold;
	width: 750px;
	margin: 0 auto 16px;
	padding-bottom: 21px;
	border-bottom: solid 2px #1b1b1b;
}
.modalContent .productTitle span {
	display: inline-block;
	line-height: 1;
}
.modalContent .aliasArea {
	margin: 0 -105px 40px;
}
.modalContent .aliasArea:last-child {
	margin: 0 -105px;
}

.display_sp {
	display: none !important;
}