@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;
	}
}
@media screen and (min-width: 768px) {
	.sc-container {
		width: 100%;
		margin: 68px auto 0;
		padding-top: 0;
		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: #ffffff;
		color: #000000;
	}
}
@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(48 / 780 * 100vw) auto calc(124 / 780 * 100vw);
		padding-top: 0;
		padding-bottom: calc(200 / 780 * 100vw);
		width: 100%;
		min-height: 100%;
		height: auto;
		line-height: normal;
		background-color: #ffffff;
		color: #000000;
	}
}

@media screen and (min-width: 768px) {
	.sc-container img {
		width: auto;
		height: auto;
	}
	.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: #dfbb99;
		padding-top: 0;
		padding-bottom: 0;
		width: 100%;
		margin: 0 auto;
	}
	.hero-image {
		width: 100%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px){
	.hero {
		background-color: #dfbb99;
		padding-top: 0;
		padding-bottom: 0;
		width: 100%;
		margin: 0 auto;
	}
	.hero-image {
		width: 100%;
		margin: 0 auto;
	}
}

@media screen and (min-width: 768px) {
	.hero {
		background-color: #dfbb99;
		width: 100%;
		margin: 0 auto;
		padding-top: 0;
		padding-bottom: 0;
	}
	.hero-image {
		width: 562px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px){
	.hero {
		background-color: #dfbb99;
		width: 100%;
		margin: 0 auto;
		padding-top: 0;
		padding-bottom: 0;
	}
	.hero-image {
		width: 100%;
		margin: 0 auto;
	}
	
}


/* ====================
lead
==================== */
@media screen and (min-width: 768px){
	.lead {
		width: 100%;
		margin: 0 auto;
		padding-top: 43px;
	}
}
@media screen and (max-width: 767px){
	.lead {
		width: 100%;
		margin: 0 auto;
		padding-top: calc(68 / 780 * 100vw);
	}
}
@media screen and (min-width: 768px){
	.lead-title {
		width: 100%;
		margin: 0 auto;
		padding-bottom: 37px;
		font-size: 24px;
		font-weight: 700;
		line-height: calc(38 / 24);
		text-align: center;
		letter-spacing: 0.06em;
	}
}
@media screen and (max-width: 767px){
	.lead-title {
		width: 100%;
		margin: 0 auto;
		padding-bottom: calc(42 / 780 * 100vw);
		font-size: calc(32 / 780 * 100vw);
		font-weight: 700;
		line-height: calc(52 / 32);
		text-align: center;
		letter-spacing: 0.07em;
	}
}
@media screen and (min-width: 768px){
	.lead-text {
		font-size: 16px;
		line-height: calc(28 / 16);
		text-align: center;
	}
}
@media screen and (max-width: 767px){
	.lead-text {
		width: calc(646 / 780 * 100vw);
		margin: 0 auto;
		font-size: calc(24 / 780 * 100vw);
		line-height: calc(40 / 24);
		text-align: left;
	}
}

@media screen and (min-width: 768px){
	.partner {
		background-color: #efefef;
		width: 460px;
		height: 60px;
		margin: 35px auto 32px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-self: center;
	}
}
@media screen and (max-width: 767px){
	.partner {
		background-color: #efefef;
		width: calc(650 / 780 * 100vw);
		height: calc(108 / 780 * 100vw);
		margin: calc(40 / 780 * 100vw) auto calc(42 / 780 * 100vw);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-self: center;
	}
}

@media screen and (min-width: 768px){
	.partner-name {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-self: center;
		column-gap: 6px;
		padding-top: 4px;
	}
}
@media screen and (max-width: 767px){
	.partner-name {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-self: center;
		column-gap: calc(10 / 780 * 100vw);
		padding-top: calc(4 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.partner-name dt {
		font-size: 16px;
		line-height: calc(32 / 16);
		letter-spacing: 0.04em;
	}
}
@media screen and (max-width: 767px){
	.partner-name dt {
		font-size: calc(22 / 780 * 100vw);
		line-height: calc(32.69 / 22);
		letter-spacing: 0.04em;
        padding-top: calc(18 / 780 * 100vw);
        padding-right: calc(0 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.partner-text {
		font-size: 16px;
		line-height: calc(32 / 16);
		letter-spacing: 0.04em;
	}
}
@media screen and (max-width: 767px){
	.partner-text {
		font-size: calc(22 / 780 * 100vw);
		line-height: calc(32.69 / 22);
		letter-spacing: 0.04em;
        padding-top: calc(18 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.partner-image {
		margin-left: -6px;
		margin-top: -1px;
	}
}
@media screen and (max-width: 767px){
	.partner-image {
		width: calc(76 / 780 * 100vw);
		height: calc(73 / 780 * 100vw);
		margin-left: calc(0 / 780 * 100vw);
		margin-top: calc(-1 / 780 * 100vw);
	}
}




/* ====================
section
==================== */
@media screen and (min-width: 768px){
	.section {
		width: 100%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px){
	.section {
		width: 100%;
		margin: 0 auto;
	}
}

@media screen and (min-width: 768px){
	.section-title {
		width: 100%;
		height: 80px;
		margin: 0 auto;
		padding-bottom: 2px;
		background-color: #d9ad92;
		font-size: 28px;
		font-weight: 700;
		line-height: calc(52 / 28);
		letter-spacing: 0.08em;
		color: #ffffff;
		text-align: center;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}
	.section-title span {
		font-size: 22px;
		padding-left: 10px;
	}
}
@media screen and (max-width: 767px){
	.section-title {
		width: 100%;
		height: calc(86 / 780 * 100vw);
		margin: 0 auto;
		padding-bottom: calc(2 / 780 * 100vw);
		background-color: #d9ad92;
		font-size: calc(34 / 780 * 100vw);
		font-weight: 700;
		line-height: calc(56 / 34);
		letter-spacing: 0.08em;
		color: #ffffff;
		text-align: center;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}
	.section-title span {
		font-size: calc(26 / 780 * 100vw);
		padding-left: calc(10 / 780 * 100vw);
	}
}


/* ====================
section period
==================== */
@media screen and (min-width: 768px){
	.section.period {
		padding-top: 114px;
	}
}
@media screen and (max-width: 767px){
	.section.period {
		padding-top: calc(152 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.period-text {
		font-size: 24px;
		font-weight: 700;
		line-height: calc(40 / 24);
		letter-spacing: 0.04em;
		color: #d9ad92;
		text-align: center;
	}
	.period-text.start {
		padding-top: 40px;
	}
}
@media screen and (max-width: 767px){
	.period-text {
		font-size: calc(30 / 780 * 100vw);
		font-weight: 700;
		line-height: calc(48 / 30);
		letter-spacing: 0.04em;
		color: #d9ad92;
		text-align: center;
	}
	.period-text.start {
		padding-top: calc(68 / 780 * 100vw);
	}
}


@media screen and (min-width: 768px){
	.section.note {
		padding-top: 111px;
	}
}
@media screen and (max-width: 767px){
	.section.note {
		padding-top: calc(152 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.note-list {
		width: 880px;
		margin: 0 auto;
		padding-top: 40px;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: 24px;
	}
}
@media screen and (max-width: 767px){
	.note-list {
		width: calc(648 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(72 / 780 * 100vw);
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: calc(38 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.note-title {
		font-size: 18px;
		font-weight: 700;
		line-height: calc(32 / 18);
		letter-spacing: 0.08em;
		color: #d9ad92;
	}
}
@media screen and (max-width: 767px){
	.note-title {
		font-size: calc(28 / 780 * 100vw);
		font-weight: 700;
		line-height: calc(38 / 28);
		letter-spacing: 0.08em;
		color: #d9ad92;
	}
}

@media screen and (min-width: 768px){
	.note-text {
		font-size: 16px;
		line-height: calc(28 / 16);
		padding-top: 9px;
	}
}
@media screen and (max-width: 767px){
	.note-text {
		font-size: calc(22 / 780 * 100vw);
		line-height: calc(38 / 22);
		padding-top: calc(18 / 780 * 100vw);
	}
}


@media screen and (min-width: 768px){
	.section.use {
		padding-top: 111px;
	}
}
@media screen and (max-width: 767px){
	.section.use {
		padding-top: calc(152 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.use-list {
		width: 880px;
		margin: 0 auto;
		padding-top: 94px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		column-gap: 35px;
	}
}
@media screen and (max-width: 767px){
	.use-list {
		width: calc(648 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(80 / 780 * 100vw);
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: calc(50 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.use-item {
		width: 270px;
		position: relative;
		z-index: 1;
	}
	.use-item::after {
		content: "";
		display: block;
		width: 270px;
		height: 230px;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.use-item:nth-child(1)::after {
		background-image: url(/pfcontents/special/trade_in/img/bg_step01_pc.png);
	}
	.use-item:nth-child(2)::after {
		background-image: url(/pfcontents/special/trade_in/img/bg_step02_pc.png);
	}
	.use-item:nth-child(3)::after {
		background-image: url(/pfcontents/special/trade_in/img/bg_step03_pc.png);
	}
	.use-item:not(:first-child)::before {
		content: "";
		display: block;
		background-image: url(/pfcontents/special/trade_in/img/bg_use-item.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 17px;
		height: 40px;
		position: absolute;
        top: 95px;
        left: -25px;
	}
}
@media screen and (max-width: 767px){
	.use-item {
		width: 100%;
		min-height: calc(280 / 780 * 100vw);
		position: relative;
		z-index: 1;
	}
	.use-item::after {
		content: "";
		display: block;
		width: calc(350 / 780 * 100vw);
		height: calc(280 / 780 * 100vw);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.use-item:nth-child(1)::after {
		background-image: url(/pfcontents/special/trade_in/img/bg_step01.png);
	}
	.use-item:nth-child(2)::after {
		background-image: url(/pfcontents/special/trade_in/img/bg_step02.png);
	}
	.use-item:nth-child(3)::after {
		background-image: url(/pfcontents/special/trade_in/img/bg_step03.png);
	}
	
}

@media screen and (min-width: 768px){
	.step-number {
		position: absolute;
		top: -43px;
		left: calc(50% - 24px);
		width: 48px;
		height: 64px;
		z-index: 1;
	}
}
@media screen and (max-width: 767px){
	.step-number {
		position: absolute;
		top: calc(-40 / 780 * 100vw);
		left: calc(-20 / 780 * 100vw);
		width: calc(60 / 780 * 100vw);
		height: calc(79 / 780 * 100vw);
		z-index: 1;
	}
}

@media screen and (min-width: 768px){
	.use-title {
		font-size: 18px;
		font-weight: 700;
		line-height: calc(28 / 18);
		letter-spacing: 0.08em;
		text-align: center;
		padding-top: 32px;
	}
}
@media screen and (max-width: 767px){
	.use-title {
		font-size: calc(22 / 780 * 100vw);
		font-weight: 700;
		line-height: calc(32 / 22);
		letter-spacing: 0.04em;
		text-align: center;
		width: calc(350 / 780 * 100vw);
		padding-top: calc(43 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.use-text {
		font-size: 16px;
		line-height: calc(28 / 16);
		padding-top: 154px;
	}
	.use-text span {
		font-size: 14px;
		line-height: calc(26 / 14);
	}
}
@media screen and (max-width: 767px){
	.use-text {
		width: calc(270 / 780 * 100vw);
		font-size: calc(22 / 780 * 100vw);
		line-height: calc(38 / 22);
		padding-top: calc(18 / 780 * 100vw);
		position: absolute;
		right: 0;
		top: calc(-10 / 780 * 100vw);
	}
	.use-text span {
		font-size: calc(20 / 780 * 100vw);
		line-height: calc(34 / 20);
		display: inline-block;
		margin-top: calc(14 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.use-button {
		width: 460px;
		margin: 0 auto;
		padding-top: 52px;
	}
	.use-button a {
		width: 460px;
		height: 60px;
		border: solid 4px #d9ad92;
		border-radius: 60px;
		line-height: 60px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		font-weight: 700;
		letter-spacing: 0.04em;
		position: relative;
	}
	.use-button a::after {
		content: "";
		display: block;
		width: 12px;
		height: 12px;
		border-right: solid 3px #d9ad92;
		border-bottom: solid 3px #d9ad92;
		transform: rotate(-45deg);
		position: absolute;
		top: calc(50% - 6px);
		right: 33px;
	}
	.use-button a:hover {
		background-color: #d9ad92;
		color: #ffffff;
		opacity: 1;
	}
	.use-button a:hover::after {
		border-right: solid 3px #ffffff;
		border-bottom: solid 3px #ffffff;
	}
}
@media screen and (max-width: 767px){
	.use-button {
		width: calc(640 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(60 / 780 * 100vw);
	}
	.use-button a {
		width: calc(640 / 780 * 100vw);
		height: calc(100 / 780 * 100vw);
		border: solid calc(6 / 780 * 100vw) #d9ad92;
		border-radius: calc(100 / 780 * 100vw);
		line-height: calc(100 / 780 * 100vw);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: calc(28 / 780 * 100vw);
		font-weight: 700;
		letter-spacing: 0.06em;
		color: #d9ad92!important;
		position: relative;
	}
	.use-button a::after {
		content: "";
		display: block;
		width: calc(20 / 780 * 100vw);
		height: calc(20 / 780 * 100vw);
		border-right: solid calc(6 / 780 * 100vw) #d9ad92;
		border-bottom: solid calc(6 / 780 * 100vw) #d9ad92;
		transform: rotate(-45deg);
		position: absolute;
		top: calc(50% - calc(9 / 780 * 100vw));
		right: calc(46 / 780 * 100vw);
	}
	.use-button a:hover {
		background-color: #d9ad92;
		color: #ffffff;
		opacity: 1;
	}
	.use-button a:hover::after {
		border-right: solid calc(6 / 780 * 100vw) #ffffff;
		border-bottom: solid calc(6 / 780 * 100vw) #ffffff;
	}
}


@media screen and (min-width: 768px){
	.section.delivery {
		padding-top: 120px;
	}
}
@media screen and (max-width: 767px){
	.section.delivery {
		padding-top: calc(170 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.delivery-text {
		font-size: 16px;
		line-height: calc(28 / 16);
		text-align: center;
		padding-top: 43px;
	}
	.delivery-text span {
		color: #d9ad92;
		font-weight: 700;
	}
}
@media screen and (max-width: 767px){
	.delivery-text {
		width: calc(648 / 780 * 100vw);
		margin: 0 auto;
		font-size: calc(24 / 780 * 100vw);
		line-height: calc(40 / 24);
		padding-top: calc(70 / 780 * 100vw);
	}
	.delivery-text span {
		color: #d9ad92;
		font-weight: 700;
	}
}

@media screen and (min-width: 768px){
	.address {
		width: 600px;
		margin: 34px auto 0;
		border: solid 2px #000000;
		padding: 19px 50px 26px;
	}
	.address-text {
		font-size: 18px;
		font-weight: 500;
		line-height: calc(32 / 18);
		letter-spacing: 0.08em;
	}
	.address-note {
		font-size: 16px;
		line-height: calc(28 / 16);
		color: #d9ad92;
		padding-top: 7px;
		font-weight: 500;
	}
}
@media screen and (max-width: 767px){
	.address {
		width: calc(648 / 780 * 100vw);
		margin: calc(33 / 780 * 100vw) auto 0;
		border: solid calc(4 / 780 * 100vw) #000000;
		padding: calc(16 / 780 * 100vw) calc(20 / 780 * 100vw) calc(26 / 780 * 100vw);
	}
	.address-text {
		font-size: calc(28 / 780 * 100vw);
		font-weight: 500;
		line-height: calc(48 / 28);
		letter-spacing: 0.04em;
	}
	.address-note {
		font-size: calc(24 / 780 * 100vw);
		line-height: calc(48 / 24);
		color: #d9ad92;
		padding-top: 0;
		font-weight: 500;
	}
}

















/* ====================
scroll
==================== */
.fadein{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px);}
.fadein.scrollin{opacity:1;-webkit-transition:.5s ease;transition:.5s ease;-webkit-transform:none;transform:none;}

.line.fadein{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
.line.fadein.scrollin{-webkit-transition:.8s .4s ease;transition:.8s .4s ease;}