@charset "UTF-8";

/* ====================
reset
==================== */
.sc-container {
	background:#ffffff;
}
@media screen and (max-width: 767px) {
	.sc-container {
		background:#ffffff;
	}
}
@media screen and (min-width: 768px) {
	.sc-container, .sc-container * {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 767px) {
	.sc-container, .sc-container * {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		text-align: left;
	}
}


.sc-container img {
	border: 0;
	height: auto;
}

.sc-container li {
	list-style: none;
}
@media screen and (max-width: 767px) {
	.sc-container th {
		text-align: left;
	}
}
/* .sc-container h1, .sc-container h2,
.sc-container h3, .sc-container h4 {
	font-size: 100%;
	font-weight: normal;
} */
@media screen and (min-width: 768px) {
	button{
		background-color: transparent;
		border: none;
		cursor: pointer;
		outline: none;
		padding: 0;
		appearance: none;
	}
}
@media screen and (max-width: 767px) {
	.shoplogo-wrap {
		margin-bottom: 0;
	}
}


/* ====================
PFEC追加
==================== */
@media screen and (min-width: 768px) {
	#main .container-fluid {
		max-width: 100%;
	}
}
@media screen and (max-width: 767px) {
	#main .container-fluid {
		padding-left: 0px;
		padding-right: 0px;
	}
}

.sc-container a,
.sc-container a:link,
.sc-container a:visited,
.sc-container a:active {
	color: #231815;
}
@media screen and (min-width: 768px) {
	.sc-container a[href] img,
	.sc-container a[href] {
		-webkit-transition: .4s;
		transition: .4s;
	}
}

/* ====================
***
==================== */
img {
	height: auto;
}
.view-pc {
	display: block;
}
@media screen and (max-width: 767px) {
	.view-pc {
		display: none;
	}
}
.view-sp {
	display: none;
}
@media screen and (max-width: 767px) {
	.view-sp {
		display: block;
	}
}
#main {
	background-color: #f0c3bc;
}
@media screen and (min-width: 768px) {
	.sc-container {
		width: 1080px;
		margin: 50px auto 0;
		padding-top: 40px;
		padding-bottom: 170px;
		font-size: 16px;
		font-family: "Noto Sans JP", sans-serif;
		font-weight: 400;
		line-height: normal;
		overflow: hidden;
		font-feature-settings: normal;
		background-color: #f0c3bc;
		color: #f0c3bc;
	}
}
@media screen and (max-width: 767px) {
	.sc-container {
		font-family: "Noto Sans JP", sans-serif;
		font-size: calc(32 / 780 * 100vw);
		font-weight: 400;
		margin: calc(35 / 780 * 100vw) auto calc(124 / 780 * 100vw);
		padding-top: calc(30 / 780 * 100vw);
		padding-bottom: calc(200 / 780 * 100vw);
		width: calc(720 / 780 * 100vw);
		min-height: 100%;
		height: auto;
		line-height: normal;
		background-color: #f0c3bc;
		color: #f0c3bc;
	}
}

@media screen and (min-width: 768px) {
	.sc-container strong {
		font-weight: bold;
	}
}
@media screen and (max-width: 767px) {
	.sc-container img {
		width: 100%;
		height: 100%;
	}
	
	.sc-container strong,
	.sc-container em {
		font-weight: bold;
	}
}

.sc-container a,
.sc-container a:link,
.sc-container a:visited,
.sc-container a:active {
	text-decoration: none;
}
@media screen and (max-width: 767px) {
	.sc-container a,
	.sc-container a:link,
	.sc-container a:visited,
	.sc-container a:active {
		opacity: 1;
	}
}
@media screen and (min-width: 768px) {
	.sc-container a:hover {
		opacity: 0.8;
	}
	
	.sc-container a:hover img {
		opacity: 0.8;
	}
	
	.sc-container a.btn:hover {
		opacity: 0.68;
		transition: 0.4s ease;
	}
	
	.sc-container a:focus {
		outline: none;
	}
}


/* ====================
hero
==================== */
@media screen and (max-width: 767px) {
	.hero {
		background-color: #de4f11;
		padding-top: calc(122 / 780 * 100vw);
		padding-bottom: 0;
		width: 100%;
		margin: 0 auto;
	}
	.hero-image {
		width: calc(580 / 780 * 100vw);
		margin: 0 auto;
	}
	.hero-text {
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: calc(34 / 780 * 100vw);
		line-height: calc(50 / 36);
		color: #f0c3bc;
		text-align: center;
		margin-top: calc(39 / 780 * 100vw);
		letter-spacing: 0.01em;
	}
}

@media screen and (min-width: 768px) {
	.hero {
		background-color: #de4f11;
		width: 100%;
		margin: 0 auto;
		padding-top: 80px;
		padding-bottom: 0;
		position: relative;
	}
	.hero-image {
		width: 580px;
		margin: 0 auto;
	}
	.hero-text {
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: 28px;
		line-height: normal;
		color: #f0c3bc;
		text-align: center;
		margin-top: 45px;
	}
}
/* ====================
menu
==================== */
@media screen and (max-width: 767px) {
	.menu {
		display: block;
		background-color: #de4f11;
		padding-top: calc(63 / 780 * 100vw);
		padding-bottom: calc(118 / 780 * 100vw);
		width: 100%;
		margin: 0 auto;
	}
	.menu-title {
		width: 100%;
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: calc(34 / 780 * 100vw);
		line-height: normal;
		color: #f0c3bc;
		text-align: center;
		position: relative;
	}
	.menu-title::after {
		content: "";
		display: block;
		width: calc(250 / 780 * 100vw);
		height: calc(3 / 780 * 100vw);
		background-color: #f0c3bc;
		position: absolute;
		left: calc(50% - (250 / 2 / 780 * 100vw));
		bottom: calc(-21 / 780 * 100vw);
	}
	.memu-list {
		width: calc(476 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(50 / 780 * 100vw);
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		row-gap: calc(43 / 780 * 100vw);
	}
	.menu-list-item {
		width: 100%;
	}
	.menu-list-item a {
		display: block;
	}
	.menu-list-title {
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: calc(30 / 780 * 100vw);
		line-height: normal;
		color: #f0c3bc;
		text-align: center;
		margin-top: calc(12 / 780 * 100vw);
		border: solid 2px #f0c3bc;
		border-radius: 50px;
		padding-top: calc(3 / 780 * 100vw);
		padding-bottom: calc(3 / 780 * 100vw);
	}
	.menu-list-date {
		width: 100%;
		margin-top: calc(20 / 780 * 100vw);
		position: relative;
	}
	.date-end {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: calc(90 / 780 * 100vw);
		position: absolute;
		top: calc(-6 / 780 * 100vw);
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: calc(6 / 780 * 100vw);
	}
	.date-end-text {
		font-size: calc(28 / 780 * 100vw);
		font-weight: 500;
		letter-spacing: 0.04em;
		color: #ffffff;
	}
	.date-list {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		row-gap: calc(5 / 780 * 100vw);
	}
	.date-list-item {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		row-gap: calc(10 / 780 * 100vw);
		width: calc(372 / 780 * 100vw);
		margin: 0 auto;
	}
	.date-list-item dt,
	.date-list-item dd {
		font-size: calc(24 / 780 * 100vw);
		line-height: normal;
		color: #f0c3bc;
	}
}

@media screen and (min-width: 768px) {
	.menu {
		display: block;
		background-color: #de4f11;
		padding-top: 64px;
		padding-bottom: 117px;
		width: 100%;
		margin: 0 auto;
	}
	.menu-title {
		width: 100%;
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: 34px;
		line-height: normal;
		color: #f0c3bc;
		text-align: center;
		position: relative;
	}
	.menu-title::after {
		content: "";
		display: block;
		width: 262px;
		height: 4px;
		background-color: #f0c3bc;
		position: absolute;
		left: calc(50% - (262px / 2));
		bottom: -25px;
	}
	.memu-list {
		width: 760px;
		margin: 0 auto;
		margin-top: 13px;
		padding-top: 40px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		column-gap: 40px;
		justify-content: space-between;
	}
	.menu-list-item {
		width: 340px;
	}
	.menu-list-item a {
		display: block;
	}
	.menu-list-title {
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: 24px;
		line-height: normal;
		color: #f0c3bc;
		text-align: center;
		margin-top: 12px;
		padding: 5px 0 3px;
		border: solid 4px #f0c3bc;
		border-radius: 50px;
	}
	.menu-list-date {
		width: 100%;
		margin-top: 16px;
		position: relative;
	}
	.date-end {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 68px;
		position: absolute;
		top: -6px;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 6px;
	}
	.date-end-text {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.04em;
		color: #ffffff;
	}
	.date-list {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		row-gap: 5px;
	}
	.date-list-item {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		row-gap: 10px;
		width: 282px;
		margin: 0 auto;
	}
	.date-list-item dt,
	.date-list-item dd {
		font-size: 18px;
		line-height: normal;
		font-weight: 500;
		color: #f0c3bc;
	}
}
/* ====================
sections
==================== */
@media screen and (max-width: 767px) {
	.sections {
		width: 100%;
		margin: 0 auto;
	}
	.sections#lens {
		background-color: #de4f11;
		padding-top: 0;
		padding-bottom: calc(120 / 780 * 100vw);
		position: relative;
	}
	.sections#frame {
		background-color: #de4f11;
		padding-top: 0;
		padding-bottom: calc(120 / 780 * 100vw);
		position: relative;
	}
	.sections#lens::before {
		content: "ONLINE STORE";
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: calc(16 / 780 * 100vw);
		color: #f0c3bc;
		position: absolute;
		top: calc(25 / 780 * 100vw);
		left: calc(100 / 780 * 100vw);
	}
	.sections#lens::after {
		content: "SUMMER SALE";
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: calc(16 / 780 * 100vw);
		color: #f0c3bc;
		position: absolute;
		top: calc(25 / 780 * 100vw);
		right: calc(100 / 780 * 100vw);
	}
	.sections#frame::before {
		content: "ONLINE STORE";
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: calc(16 / 780 * 100vw);
		color: #f0c3bc;
		position: absolute;
		top: calc(25 / 780 * 100vw);
		left: calc(100 / 780 * 100vw);
	}
	.sections#frame::after {
		content: "SUMMER SALE";
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: calc(16 / 780 * 100vw);
		color: #f0c3bc;
		position: absolute;
		top: calc(25 / 780 * 100vw);
		right: calc(100 / 780 * 100vw);
	}
	.sections-title {
		width: calc(463 / 780 * 100vw);
		margin: 0 auto;
		text-align: center;
		position: relative;
	}
	.sections-lead {
		width: calc(580 / 780 * 100vw);
		margin: 0 auto;
		margin-top: calc(50 / 780 * 100vw);
		position: relative;
	}
	.lead-end {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: calc(100 / 780 * 100vw);
		position: absolute;
		top: calc(-6 / 780 * 100vw);
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: calc(6 / 780 * 100vw);
	}
	.lead-end-text {
		font-size: calc(28 / 780 * 100vw);
		font-weight: 500;
		letter-spacing: 0.05em;
		color: #ffffff;
	}
	.sections-lead-text {
		font-size: calc(28 / 780 * 100vw);
		font-weight: 700;
		line-height: calc(44 / 28);
		text-align: center;
	}
	#lens .sections-lead-text {
		color: #f0c3bc;
	}
	#frame .sections-lead-text {
		color: #f0c3bc;
	}
	.sections-note {
		width: calc(650 / 780 * 100vw);
		margin: 0 auto;
		padding: calc(30 / 780 * 100vw) calc(50 / 780 * 100vw) calc(33 / 780 * 100vw) calc(38 / 780 * 100vw);
		margin-top: calc(73 / 780 * 100vw);
	}
	#lens .sections-note { 
		border: solid 1px #f0c3bc;
	}
	#frame .sections-note {
		border: solid 1px #f0c3bc;
	}
	.note-list {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: calc(13 / 780 * 100vw);
	}
	.note-list-item {
		font-size: calc(20 / 780 * 100vw);
		line-height: calc(36 / 20);
		text-indent: -1.1em;
		padding-left: 1.1em;
	}
	#lens .note-list-item {
		color: #f0c3bc;
	}
	#frame .note-list-item {
		color: #f0c3bc;
	}
	.coupon {
		margin-top: calc(50 / 780 * 100vw);
	}
	.coupon-text {
		font-size: calc(20 / 780 * 100vw);
		font-weight: 500;
		line-height: calc(36 / 20);
		letter-spacing: 0.05em;
		color: #f0c3bc;
		text-align: center;
	}
	.coupon-title {
		font-size: calc(26 / 780 * 100vw);
		font-weight: 500;
		line-height: calc(44 / 26);
		letter-spacing: 0.05em;
		color: #f0c3bc;
		text-align: center;
		padding-top: calc(30 / 780 * 100vw);
	}
	.coupon-code {
		width: calc(490 / 780 * 100vw);
		height: calc(60 / 780 * 100vw);
		background-color: #f0c3bc;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: calc(16 / 780 * 100vw);
		position: relative;
	}
	.coupon-code-text {
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: calc(30 / 780 * 100vw);
		letter-spacing: 0.2em;
		padding-left: 0.2em;
		line-height: calc(52 / 30);
		text-align: center;
		color: #de4f11;
	}
	.coupon-end {
		width: calc(490 / 780 * 100vw);
		height: 100%;
		margin: 0 auto;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #434343;
	}
	.coupon-end-text {
		font-size: calc(24 / 780 * 100vw);
		font-weight: 500;
		line-height: calc(52 / 24);
		letter-spacing: 0.1em;
		color: #ffffff;
		margin-top: calc(-4 / 780 * 100vw);
	}
	.sale-button {
		width: calc(490 / 780 * 100vw);
		margin: 0 auto;
		margin-top: calc(60 / 780 * 100vw);
	}
	.btn-sale {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: calc(60 / 780 * 100vw);
		background-color: #f0c3bc;
		font-size: calc(24 / 780 * 100vw);
		font-weight: 600;
		line-height: calc(60 / 780 * 100vw);
		letter-spacing: 0.1em;
		color: #de4f11!important;
		text-align: center;
		text-decoration: none;
	}
	.btn-sale span {
		font-size: calc(30 / 780 * 100vw);
		line-height: calc(60 / 780 * 100vw);
	}
	.coupon-lead {
		padding-top: calc(65 / 780 * 100vw);
	}
	.coupon-lead-text {
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 500, "opsz" 32;
		font-size: calc(16 / 780 * 100vw);
		line-height: calc(24 / 16);
		color: #de4f11;
		text-align: center;
	}
}

@media screen and (min-width: 768px) {
	.sections {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.sections#lens {
		background-color: #de4f11;
		padding-top: 0;
		padding-bottom: 120px;
		position: relative;
	}
	.sections#frame {
		background-color: #de4f11;
		padding-top: 0;
		padding-bottom: 118px;
		position: relative;
	}
	.sections#lens::before {
		content: "ONLINE STORE";
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: 14px;
		color: #f0c3bc;
		position: absolute;
		top: 18px;
		left: calc(50% - 440px);
	}
	.sections#lens::after {
		content: "SUMMER SALE";
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: 14px;
		color: #f0c3bc;
		position: absolute;
		top: 18px;
		right: calc(50% - 440px);
	}
	.sections#frame::before {
		content: "ONLINE STORE";
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: 14px;
		color: #f0c3bc;
		position: absolute;
		top: 18px;
		left: calc(50% - 440px);
	}
	.sections#frame::after {
		content: "SUMMER SALE";
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: 14px;
		color: #f0c3bc;
		position: absolute;
		top: 18px;
		right: calc(50% - 440px);
	}
	.sections-title {
		width: 417px;
		margin: 0 auto;
	}
	.sections-lead {
		width: 560px;
		margin: 0 auto;
		margin-top: 50px;
		position: relative;
	}
	#frame .sections-lead {
		margin-top: 52px;
	}
	.lead-end {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 93px;
		position: absolute;
		top: -5px;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 6px;
	}
	.lead-end-text {
		font-size: 24px;
		font-weight: 500;
		letter-spacing: 0.05em;
		color: #ffffff;
	}
	.sections-lead-text {
		font-size: 26px;
		font-weight: 700;
		line-height: calc(38 / 26);
		letter-spacing: 0.05em;
		text-align: center;
	}
	#lens .sections-lead-text {
		color: #f0c3bc;
	}
	#frame .sections-lead-text {
		color: #f0c3bc;
	}
	.sections-note {
		width: 600px;
		margin: 0 auto;
		padding: 25px 30px 28px 30px;
		margin-top: 65px;
	}
	#lens .sections-note {
		border: solid 1px #f0c3bc;
	}
	#frame .sections-note {
		border: solid 1px #f0c3bc;
	}
	.note-list {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: 8px;
	}
	.note-list-item {
		font-size: 14px;
		line-height: calc(24 / 14);
		text-indent: -1.1em;
		padding-left: 1.1em;
	}
	#lens .note-list-item {
		color: #f0c3bc;
	}
	#frame .note-list-item {
		color: #f0c3bc;
	}
	.coupon {
		margin-top: 43px;
	}
	.coupon-text {
		font-size: 16px;
		font-weight: 500;
		line-height: calc(28 / 16);
		letter-spacing: normal;
		color: #f0c3bc;
		text-align: center;
	}
	.coupon-title {
		font-size: 19px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: normal;
		color: #f0c3bc;
		text-align: center;
		padding-top: 27px;
	}
	.coupon-code {
		width: 380px;
		height: 50px;
		background-color: #f0c3bc;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 14px;
		position: relative;
	}
	.coupon-code-text {
		font-family: "Inter", sans-serif;
		font-variation-settings: "wght" 600, "opsz" 32;
		font-size: 24px;
		letter-spacing: 0.4em;
		padding-left: 0.4em;
		line-height: normal;
		text-align: center;
		color: #de4f11;
	}
	.coupon-end {
		width: 380px;
		height: 100%;
		margin: 0 auto;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #434343;
	}
	.coupon-end-text {
		font-size: 20px;
		font-weight: 500;
		line-height: calc(30 / 20);
		letter-spacing: 0.1em;
		color: #ffffff;
	}
	.sale-button {
		width: 380px;
		margin: 0 auto;
		margin-top: 50px;
	}
	.btn-sale {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 50px;
		background-color: #f0c3bc;
		font-size: 22px;
		font-weight: 700;
		line-height: 50px;
		letter-spacing: 0.1em;
		color: #de4f11!important;
		text-align: center;
		text-decoration: none;
	}
	.btn-sale span {
		font-size: 24px;
		line-height: 50px;
	}
}