@charset "utf-8";

body {
	font-family: "Noto Serif JP", serif;
	padding: 0;
	margin: 0;
	width: 100%;
}

@media screen and (max-width: 768px) {
	body {
		font-size: 14px;
	}
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}


a {
	text-decoration: none;
	transition: 0.3s;
	cursor: pointer;
}

a:hover {
	opacity: 0.8;
}



p {
	line-height: 1.4;
}

img {
	width: 100%;
}

.pc_only {
	display: block;
}

@media screen and (max-width: 768px) {
	.pc_only {
		display: none;
	}
}

.sp_only {
	display: none;
}

@media screen and (max-width: 768px) {
	.sp_only {
		display: block;
	}
}


.logo {
	position: absolute;
	z-index: 2;
	width: 80px;
	left: 10px;
	top: 10px;
}

@media screen and (max-width: 767px) {
	.logo {
		width: 60px;
		margin-block: 0;
	}
}


/*****************fv***************/

.logo {
	position: absolute;
	z-index: 2;
	width: 160px;
	left: 10px;
	top: 10px;
}

@media screen and (max-width: 767px) {
	.logo {
		width: 90px;
	}
}


#fv {
	background-color: #FFF34B;
	overflow-x: hidden;
	padding: 10px;
	padding-top: 1em;
	position: relative;
	padding-bottom: 9%;
}

@media screen and (max-width: 767px) {
	#fv {
		padding: 10px 0 100px;
	}
}


.fvparts1, .fvparts2, .fvparts3, .fvparts4, .fvparts5, .fvparts6 {
	position: absolute;
}

.fvparts1 {
	max-width: 20%;
	top: 10%;
	left: 16%;
}

.fvparts2 {
	max-width: 20%;
	top: 37%;
	right: -10%;
}

.fvparts3 {
	max-width: 11%;
	top: 32%;
	left: 6%;
}

.fvparts4 {
	max-width: 3%;
	bottom: 29%;
	left: 10%;
}

.fvparts5 {
	max-width: 8%;
	top: 10%;
	right: 10%;
}

.fvparts6 {
	max-width: 4%;
	bottom: 19%;
	right: 10%;
}

@media screen and (max-width: 767px) {
	.fvparts1 {
		max-width: 50%;
		top: 1%;
		left: 66%;
	}

	.fvparts3 {
		max-width: 20%;
		top: 6%;
		left: -7%;
	}
}


.fvparts3,
.fvparts4,
.fvparts5,
.fvparts6 {
	animation: katakata 3s infinite ease-in-out;
	transform-origin: center;
}

/* それぞれ少しズラす */

.fvparts3 {
	animation-delay: .9s;
}

.fvparts4 {
	animation-delay: 1.3s;
}

.fvparts5 {
	animation-delay: 1.8s;
}

.fvparts6 {
	animation-delay: 2.2s;
}

@keyframes katakata {
	0% {
		transform: rotate(0deg);
	}

	3% {
		transform: rotate(2deg);
	}

	6% {
		transform: rotate(-2deg);
	}

	9% {
		transform: rotate(1deg);
	}

	12% {
		transform: rotate(0deg);
	}

	40% {
		transform: rotate(0deg);
	}

	43% {
		transform: rotate(-3deg);
	}

	46% {
		transform: rotate(2deg);
	}

	49% {
		transform: rotate(-1deg);
	}

	52% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(0deg);
	}
}






.fv-wrap {
	position: relative;
	z-index: 1;
}



.line-coupon {
	max-width: 580px;
	margin: 0 auto;
}

@media screen and (max-width: 900px) {
	.line-coupon {
		max-width: 500px;
		margin: 0 0 0 auto;
	}
}

@media screen and (max-width: 767px) {
	.line-coupon {
		max-width: 60%;
		margin: 0 0 0 auto;
	}
}

.fv-copy {
	max-width: 24%;
	margin: 0 auto;
	margin-top: 1em;
}

@media screen and (max-width: 767px) {
	.fv-copy {
		max-width: 70%;
	}

}

.fv-ttl {
	max-width: 60%;
	margin: 0 auto;
	margin-top: 1em;
	position: relative;
	z-index: 1;
	animation: fvZoomIn 1s ease-out forwards;
}

@keyframes fvZoomIn {
	0% {
		opacity: 0;
		transform: scale(0.7);
	}

	70% {
		opacity: 1;
		transform: scale(1.08);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@media screen and (max-width: 767px) {
	.fv-ttl {
		max-width: 85%;
	}
}

.fv-img {
	max-width: 73%;
	margin: 0 auto;
	margin-top: -14%;
	position: relative;
}

@media screen and (max-width: 767px) {
	.fv-img {
		max-width: 100%;
		margin-top: -14%;
	}
}

.fv-imgbefore, .fv-imgafter {
	position: absolute;
}

.fv-imgbefore {
	max-width: 8%;
	left: 2%;
	bottom: 41%;
}

.fv-imgafter {
	max-width: 8%;
	right: 8%;
	bottom: 6%;
}


.day-box {
	max-width: 35%;
	margin: 0 auto;
	margin-top: -0.8em;
}

@media screen and (max-width: 767px) {
	.day-box {
		max-width: 75%;
		margin: 0 auto;
		margin-top: 0;
		margin-bottom: 4em;
	}
}


#fv::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 70%;
	height: 18%;
	background: #9CE8FF;

	clip-path: polygon(100% 100%, 100% 0, 0 100%);
	z-index: 0;
}

#fv::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 70%;
	height: 18%;
	background: #9CE8FF;

	clip-path: polygon(0 100%, 0 0, 100% 100%);
	z-index: 0;
}

@media screen and (max-width: 767px) {
	#fv::after {
		height: 15%;
	}

	#fv::before {
		height: 15%;
	}

}


/**************all-wrap*****************/
.all-wrap {
	background-color: #9CE8FF;
	padding-top: 10px;
	font-family: "Noto Sans JP", sans-serif;
}

.point-mv {
	max-width: 760px;
	margin: 0 auto;
	width: 95%;
	margin-top: 1em;
	margin-bottom: 4em;
}


/***********menu**************/
.menuttl {
	text-align: center;

}

.menuttl p {
	display: inline-block;
	font-size: 2em;
	font-weight: bold;
	color: #fff;
	position: relative;
}

.menu-before {
	max-width: 33%;
	margin: 0 auto;
	left: -40%;
	top: 0%;
	position: absolute;
}

.menu-after {
	max-width: 33%;
	margin: 0 auto;
	right: -40%;
	top: 0%;
	transform: scaleX(-1);
	position: absolute;
}


.menu-bk {
	background-color: #FEFFE4;
	padding: 10px;
	border-radius: 40px;
	max-width: 1080px;
	margin: 0 auto;
	padding-top: 3em;
	width: 85%;
}

.menuFlex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 70%;
	margin: 0 auto;
}

@media screen and (max-width: 900px) {
	.menuFlex {
		max-width: 100%;
	}
}


.menuFlex_con {
	width: calc((100% - 50px) / 2);
	text-align: center;
	background-color: #FF79AE;
	box-shadow: 0px 3px 6px 0px rgba(0, 56, 150, 0.3);
	border-radius: 50px;
	font-size: 1.2em;
	color: #fff;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 10px;
	padding-top: 1.2em;
	padding-bottom: 1.2em;
	margin-bottom: 2em;
	margin-top: 5em;
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 768px) {
	.menuFlex_con {
		font-size: 1.2em;
		margin-left: 10px;
		margin-right: 10px;
		padding-top: 1em;
		padding-bottom: 1em;
		margin-bottom: 2em;
		margin-top: 2em;
	}
}

.menuFlex_con img {
	position: absolute;
	max-width: 37%;
	left: 50%;
	transform: translateY(-84%) translateX(-50%);
	z-index: -1;
}


@media screen and (max-width: 768px) {
	.menuFlex_con img {
		max-width: 90px;
		transform: translateY(-75%) translateX(-50%);
	}
}

@media screen and (max-width: 600px) {
	.menuFlex_con img {
		max-width: 50%;
	}
}


/*****************ladies********************/

#ladies {
	margin-top: 5em;
	position: relative;
	overflow-x: hidden;
	padding-bottom: 5em;
}

.con-bk1, .con-bk2, .con-bk2-2, .con-bk3, .con-bk4, .con-bk4-2, .con-bk5, .con-bk6 {
	position: absolute;
}

.con-bk1 {
	left: -2%;
	top: 5%;
	max-width: 300px;
	margin: 0 auto;
}

.con-bk2 {
	right: 6%;
	top: 5%;
	max-width: 300px;
	margin: 0 auto;
	transform: scaleX(-1);
}

.con-bk2-2 {
	right: 6%;
	top: 5%;
	max-width: 150px;
	margin: 0 auto;
	transform: scaleX(-1);
}


.con-bk3 {
	right: -8%;
	bottom: 6%;
	max-width: 300px;
	margin: 0 auto;
}


.con-bk4 {
	left: 6%;
	bottom: 5%;
	max-width: 300px;
	margin: 0 auto;

}

.con-bk4-2 {
	left: 6%;
	bottom: 5%;
	max-width: 150px;
	margin: 0 auto;

}

.con-bk5 {
	left: 6%;
	top: 5%;
	max-width: 6%;
	margin: 0 auto;

}

.con-bk6 {
	right: 8%;
	bottom: 6%;
	max-width: 6%;
	margin: 0 auto;
}

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

	.con-bk1 {
		left: -12%;
		top: -1%;
		max-width: 190px;
		margin: 0 auto;
	}

	.con-bk2 {
		right: 3%;
		top: 0%;
		max-width: 68px;
		margin: 0 auto;
		transform: scaleX(-1);
	}


	.con-bk2-2 {
		right: 3%;
		top: 0%;
		max-width: 68px;
		margin: 0 auto;
		transform: scaleX(-1);
	}

	.con-bk3 {
		right: -8%;
		bottom: 6%;
		max-width: 150px;
		margin: 0 auto;
	}

	.con-bk4 {
		left: 6%;
		bottom: 5%;
		max-width: 150px;
		margin: 0 auto;

	}


}


.select-con {
	max-width: 168px;
	width: 95%;
	margin: 0 auto;
}

.ladies-ttl {
	max-width: 745px;
	margin: 0 auto;
	width: 95%;
	margin-top: 1em;
	position: relative;
	z-index: 1;
}


.ladies_wrap {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: auto;
}

.kids_wrap {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: auto;
}

/*******************item*****************/
.tenpo-name, .item-name, .item-small, .item-prce {
	margin: 0;
}

.tenpo-name:hover {
	color: #FF3535;
}

.list-box {

	justify-content: center;
	width: fit-content;
	margin: 0 auto;
	flex-wrap: wrap;
	font-family: "Noto Serif JP", serif;
	display: flex;
	align-items: stretch;

}

.list-box-sale {
	position: relative;
	justify-content: center;
	max-width: 1100px;
	width: 90%;
	margin: 0 auto;
	flex-wrap: wrap;
	gap: 1em;
	font-family: "Noto Serif JP", serif;
	display: flex;
	align-items: stretch;
	z-index: 1;

}

/* 左 */
.list-box-sale::before {
	content: "";
	position: absolute;
	top: 0;
	left: -3%;
	width: 80px;
	height: 100%;
	background: url("../img/l-acc.png") no-repeat center / contain;
	z-index: 0;
}

/* 右 */
.list-box-sale::after {
	content: "";
	position: absolute;
	top: 0;
	right: -3%;
	width: 80px;
	height: 100%;
	background: url("../img/r-acc.png") no-repeat center / contain;
	z-index: 0;
}

@media screen and (max-width: 768px) {
	.list-con {
		width: calc((100% - 60px) / 2);
		padding: 10px;
	}

	.list-box-sale::before, .list-box-sale::after {
		display: none;
	}

	.list-box {

		justify-content: flex-start;
	}
}


.list-con {
	display: flex;
	flex-direction: column;
	width: 220px;

	margin: 0 5px;
	background: #fff;
	border-radius: 20px 0 20px 0;
	box-shadow: 3px 3px 6px 0px rgba(0, 115, 144, 0.38);
	padding: 20px;
	margin-bottom: 2em;
}

@media screen and (max-width: 768px) {
	.list-con {
		width: calc((100% - 60px) / 2);
		padding: 10px;
	}
}

.list-con-sale {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 380px;
	gap: 1em;
	background: #fff;
	box-shadow: 3px 3px 6px 0px rgba(0, 115, 144, 0.38);
	padding: 20px 30px;
	margin-bottom: 2em;
	z-index: 1;
}

@media screen and (max-width: 768px) {
	.list-con-sale {
		padding: 20px 30px;
	}
}

.list-con-sale::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 100%;
	background: #FFD8E7;
}

.tenpo-name {
	text-align: left;
	font-size: 1em;
	font-weight: 400;
	color: #707070;
	text-decoration: underline;
	margin-top: 10px;
}

.item-name {
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
	color: #252525;
	margin-top: 10px;
}

.item-small {
	text-align: left;
	font-size: 0.9em;
	font-weight: 400;
	color: #707070;
	margin-top: 1.1em;
}

.red-txt {
	color: #FF3535;
}

.item-prce {
	text-align: end;
	font-size: 2.2em;
	font-weight: 500;
	color: #FF3535;

}

.txt-small {
	font-size: 0.7em;
}

.item-notice {
	text-align: center;
	font-size: 0.9em;
	font-weight: 400;
	color: #707070;
	margin-top: 1.1em;

}


/***********アコーディオン************/
.acd-content {
	max-height: 0;
	overflow: hidden;

	opacity: 0;

	transition:
		max-height .4s ease,
		opacity .3s ease;
}

.list-con.is-open .acd-content {
	max-height: 1000px;
	opacity: 1;
}

/**********ボタン***********/
.acd-btn {
	/*	margin-top: auto;*/

	background: none;
	border: none;

	cursor: pointer;

	font-size: 1.2em;
	color: #17306C;
	padding-top: 1em;
}

.txt-close {
	display: none;
}

.list-con.is-open .txt-open {
	display: none;
}

.list-con.is-open .txt-close {
	display: inline;
}

/********三色四角********/
.color-chip {
	display: flex;
	justify-content: center;
	gap: 6px;

	margin-top: 15px;
}

.color-chip span {
	width: 14px;
	height: 14px;
}

.color-chip span:nth-child(1) {
	background: #6BD7F0;
}

.color-chip span:nth-child(2) {
	background: #F0E64A;
}

.color-chip span:nth-child(3) {
	background: #F66A73;
}



/************KIDS*****************/
.yellow-top {
	line-height: 0;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}

#kids {
	background-color: #FFF34B;
	position: relative;


	overflow-x: hidden;
	padding-bottom: 5em;
}


.kids-ttl {
	max-width: 560px;
	margin: 0 auto;
	width: 95%;
	margin-top: 1em;
	position: relative;
	z-index: 1;
}

.mint-top {
	line-height: 0;
	width: 100%;
	height: 100%;
	background-color: #FFF34B;
	position: relative;
	z-index: 2;

}

#acc {
	background-color: #8FEDF2;
	position: relative;
	overflow-x: hidden;
	padding-bottom: 5em;
}

.acc-ttl {
	max-width: 780px;
	margin: 0 auto;
	width: 95%;
	margin-top: 1em;
	position: relative;
	z-index: 1;
}

.green-top {
	line-height: 0;
	width: 100%;
	height: 100%;
	background-color: #8FEDF2;
	position: relative;
	z-index: 2;
}

@media screen and (max-width: 768px) {
	.yellow-top, .mint-top, .green-top {
		width: 110%;
		left: 50%;
		transform: translateX(-50%);
	}
}

#shoes {
	background-color: #B9F8D8;
	position: relative;
	overflow-x: hidden;
	padding-bottom: 5em;
}

.shoes-ttl {
	max-width: 656px;
	margin: 0 auto;
	width: 95%;
	margin-top: 1em;
	position: relative;
	z-index: 1;
}

#sale {
	background-color: #ffffff;
	position: relative;
	overflow-x: hidden;
	padding: 5em 0;
}

.sale_wrap {
	background-color: #44C9D0;
	max-width: 1200px;
	width: 100%;
	margin: auto;
	padding: 2% 0 5%;
}

.sale-ttl {
	max-width: 740px;
	margin: 0 auto;
	width: 95%;
	margin-top: 1em;
}

#attention {
	background-color: #ffffff;
	padding-bottom: 10em;
}

.attention-wrap {
	border-top: #707070 solid 1px;
	max-width: 1100px;
	width: 95%;
	margin: auto;
}

.atte-txt {
	padding: 0.5em 1em;
	color: #6F6F6F;
	text-align: left;
}

@media screen and (max-width: 768px) {
	.atte-txt {
		text-align: center;
	}
}

#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #FEFFE4;
	padding: 0.5em 0;
	width: 100%;
}

.ft-txt {
	color: #6F6F6F;
	text-align: center;
}

article {
	position: relative;
	overflow-x: hidden;
}

.topbtn {
	display: inline-block;
	padding-top: 0;
	position: fixed;
	bottom: 16px;
	right: 15px;
	z-index: 9999;
}

.topbtn a {
	text-decoration: none;
	color: #231815;
}

.topbtn::before {
	animation: scroll 3.5s infinite;
	border: solid #231815;
	border-width: 0 0 1px 1px;
	content: "";
	display: inline-block;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	transform: rotate(135deg);
	width: 20px;
	height: 20px;
}

@keyframes scroll {
	0% {
		transform: rotate(135deg) translate(0, 0);
	}

	80% {
		transform: rotate(135deg) translate(-20px, 20px);
	}

	0%,
	80%,
	100% {
		opacity: 0;
	}

	40% {
		opacity: 1;
	}
}

.section-btn {
	position: relative;
	text-align: center;
	font-weight: 800;
	line-height: 1.2;
	width: 300px;
	margin: 3% auto 0;
	background: #FFF56D;
	border-radius: 100px;
	box-shadow: 0 3px 6px #00000020;
}

.section-btn:hover {
	opacity: 0.8;
}

.section-btn a {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	text-align: center;
	color: #1FBCC4;
	font-size: 1.5em;
	font-weight: bold;
	padding: 20px 0;
}

@media screen and (max-width: 767px) {
	.section-btn a {
		font-size: 1.2em;
		padding: 10px 0;
	}

	.section-btn {
		position: relative;
		text-align: center;
		font-weight: 800;
		line-height: 1.2;
		padding: 10px;
	}
}

.section-btn a::before {
	position: absolute;
	content: "";
	right: 35px;
	top: 36%;
	width: 16px;
	height: 16px;
	border-top: 2px solid #1FBCC4;
	border-right: 2px solid #1FBCC4;
	transform: rotate(45deg);
}

.section-btn a:hover {
	opacity: 1;
}

.section-btn a:hover::before {
	right: 30px;
}

@media screen and (max-width: 767px) {
	.section-btn a::before {
		top: 38%;
		width: 10px;
		height: 10px;
		right: 20px;
	}

	.section-btn a:hover::before {
		right: 15px;
	}
}

.per-icon {
	position: absolute;
	width: 106px;
	top: -1em;
	left: -1em;

}

@media screen and (max-width: 767px) {
	.per-icon {
		position: absolute;
		width: 78px;
		top: -2.5em;
		left: 0;

	}
}

.check {
	position: absolute;
	width: 107px;
	top: -1.5em;
	left: 0;
	animation: flashBlink 1.5s steps(1) infinite;
}

@keyframes flashBlink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@media screen and (max-width: 767px) {
	.check {
		position: absolute;
		width: 98px;
	}
}

.list-box .list-con {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}

.list-box .list-con.show {
	opacity: 1;
	transform: translateY(0);
}

.flip-both {
	transform: scale(-1, -1);
}

.fadein-diagonal {
	opacity: 0;
	transform: translate(80px, -80px);
	transition:
		opacity 0.8s ease,
		transform 0.8s ease;
}

.fadein-diagonal.is-show {
	opacity: 1;
	transform: translate(0, 0);
}