@charset "utf-8";

a.anchor{
	display: block;
    padding-top: 80px;
    margin-top: -80px;
}

@media screen and (max-width: 768px) {
	a.anchor{
		padding-top: 20px;
		margin-top: -20px;
	}
}

/* -----------------------------------------------------------
	ページTOPエリア
-------------------------------------------------------------- */
.lower-ttl-area.style02 {
	margin-bottom: 30px;
}

/*キャッチエリア*/
.top-catch-area {
	padding: 80px 0 80px;
	background: url("../img/tpp-rvice-area-bg.jpg") no-repeat bottom center / cover;
}

.top-catch-area .catch {
	text-align: center;
}

.top-catch-area .txt {
	font-size: 2rem;
}

@media screen and (max-width: 768px){
	.lower-ttl-area.style02 {
		margin-bottom: 90px;
	}
	
	.h1-wrap.style02 h1 {
        top: 357px;
    }

	/*キャッチエリア*/
	.top-catch-area {
		padding: 40px 0 40px;
		margin-bottom: 0px;
	}

	.top-catch-area .txt {
		font-size: 1.6rem;
	}
	}


/* -----------------------------------------------------------
　　ポイント
-------------------------------------------------------------- */
.point-area {
	padding: 80px 0;
}

.point-area .titlebox.style02,
.summary-area .titlebox.style02,
.method-area .titlebox.style02 {
    margin-bottom: 30px;
    position: relative;
	display: flex;
	align-items: center;
	gap: 30px;
}

.point-area .s-point {
	background-color: #F9F5F2;
	padding: 30px;
	margin: 20px auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
}

.point-area .s-point li {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.5;
}


/*ポイントリスト*/
.point-area .point-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: 60px;
	position: relative;
}

.point-area .point-list::after {
	content: "";
	width: 65%;
	height: 85%;
	position: absolute;
	border: solid 1px #A9876D;
	top: 10%;
	left: -500px;
	z-index: -1;
}

.point-area .point-list li {
	display: flex;
	gap: 40px;
}

.point-area .point-list li .img-wrap {
	flex-shrink: 0;
	height: 290px;
}

.point-area .point-list li .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.point-area .point-list li .txt-area {
	
}

.point-area .point-list li .txt-area .num-ttl {
	display: flex;
	align-items: center;
	color: #A9876D;
	font-weight: 500;
	gap: 30px;
	border-bottom: solid 1px #A9876D;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.point-area .point-list li .txt-area .num-ttl p {
	font-size: 2.5rem;
}

.point-area .point-list li .txt-area .num-ttl .p-num {
	font-size: 2rem;
	padding: 12px 15px 8px;
	background-color: #A9876D;
	color: #fff;
	font-family: "Libre Bodoni", serif;
}

/*生地の種類*/
.point-area .point-list li .txt-area .cloth-list {
	margin-top: 30px;
}

.point-area .point-list li .txt-area .cloth-list .cate-txt {
	display: flex;
	gap: 40px;
}
.point-area .point-list li .txt-area .cloth-list .cate-txt:first-child {
	margin-bottom: 30px;
}

.point-area .point-list li .txt-area .cloth-list .cate {
	width: 85px;
	height: 85px;
	border-radius: 45px;
	background-color: #fff;
	border: solid 1px #80A0CF;
	flex-shrink: 0;
	text-align: center;
	color: #80A0CF;
	font-weight: 500;
	padding-top: 25px;
}
.point-area .point-list li .txt-area .cloth-list .cate.cate02 {
	border: solid 1px #BB9660;
	color: #BB9660;
}

@media screen and (max-width: 768px) {
	.point-area {
		padding: 40px 20px;
	}

	.point-area .titlebox.style02,
	.summary-area .titlebox.style02,
	.method-area .titlebox.style02 {
		margin-bottom: 30px;
		flex-direction: column;
		gap: 0px;
	}

	.point-area .s-point {
		padding: 20px;
		gap: 20px;
	}

	.point-area .s-point li {
		font-size: 1.6rem;
	}


	/*ポイントリスト*/
	.point-area .point-list {
		flex-direction: column;
		gap: 30px;
		margin-top: 30px;
	}

	.point-area .point-list::after {
		content: "";
		width: 65%;
		height: 85%;
		position: absolute;
		border: solid 1px #A9876D;
		top: 10%;
		left: -500px;
		z-index: -1;
	}

	.point-area .point-list li {
		flex-direction: column;
		gap: 20px;
	}

	.point-area .point-list li .img-wrap {
		flex-shrink: 0;
		height: 150px;
	}
	
	.point-area .point-list li .txt-area .num-ttl {
		gap: 20px;
		border-bottom: solid 1px #A9876D;
		padding-bottom: 10px;
		margin-bottom: 20px;
	}
	.point-area .point-list li .txt-area .num-ttl p {
		font-size: 2rem;
	}

	.point-area .point-list li .txt-area .num-ttl .p-num {
		font-size: 1.5rem;
		padding: 5px 10px;
	}

	/*生地の種類*/
	.point-area .point-list li .txt-area .cloth-list {
		margin-top: 30px;
	}

	.point-area .point-list li .txt-area .cloth-list .cate-txt {
		display: flex;
		gap: 20px;
	}
	.point-area .point-list li .txt-area .cloth-list .cate-txt:first-child {
		margin-bottom: 30px;
	}

	.point-area .point-list li .txt-area .cloth-list .cate {
		width: 60px;
		height: 60px;
		padding-top: 15px;
	}
}




/* -----------------------------------------------------------
    自宅で裾上げする方法　トップ
-------------------------------------------------------------- */
.method-area {
	padding: 100px 0;
	background-color: #F9F5F2;
}

.method-area .method-nav {
	display: flex;
	justify-content: space-between;
	margin: 30px auto 40px;
}

.method-area .method-nav li {
	position: relative;
}
.method-area .method-nav li .arrow {
	display: inline-flex;
	transform: rotate(90deg);
	position: absolute;
	right: -20px;
	bottom: 15px;
} 
.method-area .method-nav li .arrow::after {
	content: '';
	width: 65px;
	height: 10px;
	border-bottom: solid 1px #E3A209;
	border-right: solid 1px #E3A209;
	transform: skew(50deg);
}
.method-area .method-nav li.sewing-machine .arrow::after {
	border-bottom: solid 1px #FBA658;
	border-right: solid 1px #FBA658;
}
.method-area .method-nav li.tape .arrow::after {
	border-bottom: solid 1px #F3A886;
	border-right: solid 1px #F3A886;
}

.method-area .method-nav li a {
	background-color: #fff;
	width: 385px;
	height: 170px;
	display: flex;
	position: relative;
}
.method-area .method-nav li a::after {
	content: "";
	width: 100%;
	height: 100%;
	border: solid 1px #E3A209;
	position: absolute;
	right: -7px;
	top: -7px;
}
.method-area .method-nav li.sewing-machine a::after {
	border: solid 1px #FBA658;
}
.method-area .method-nav li.tape a::after {
	border: solid 1px #F3A886;
}

.method-area .method-nav li a .img-wrap {
	height: 100%;
	width: 40%;
	flex-shrink: 0;
}

.method-area .method-nav li a .img-wrap img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.method-area .method-nav li a .txt-wrap {
	padding: 25px 20px;
}

.method-area .method-nav li a .txt-wrap .s-ttl {
	font-size: 2rem;
	font-weight: 500;
	margin-bottom: 15px;
}

.method-area .method-nav li a .txt-wrap .s-ttl span {
	font-family: "Libre Bodoni", serif;
	margin-right: 10px;
	color: #E3A209;
}
.method-area .method-nav li.sewing-machine a .txt-wrap .s-ttl span {
	color: #FBA658;
}
.method-area .method-nav li.tape a .txt-wrap .s-ttl span {
	color: #F3A886;
}


@media screen and (max-width: 768px) {
	.method-area {
		padding: 40px 0;
	}

	.method-area .method-nav {
		margin: 20px auto;
		flex-direction: column;
		gap: 15px;
	}

	.method-area .method-nav li .arrow {
		right: -10px;
		bottom: 30px;
	} 
	.method-area .method-nav li .arrow::after {
		content: '';
		width: 35px;
		height: 7px;
		transform: skew(50deg);
	}

	.method-area .method-nav li a {
		width: 100%;
		height: 150px;
		display: flex;
		position: relative;
	}
	.method-area .method-nav li a::after {
		content: "";
		width: 100%;
		height: 100%;
		right: -5px;
		top: -5px;
	}

	.method-area .method-nav li a .img-wrap {
		height: 100%;
		width: 35%;
		flex-shrink: 0;
	}

	.method-area .method-nav li a .txt-wrap {
		padding: 20px 20px;
	}

	.method-area .method-nav li a .txt-wrap .s-ttl {
		font-size: 1.8rem;
		margin-bottom: 10px;
	}
	}

/* -----------------------------------------------------------
     自宅で裾上げする方法　各項目
-------------------------------------------------------------- */
.method-detail-area {
	padding: 0px 0;
}

/*固定・スクロールエリア*/
.method-scroll-area:first-child {
	margin-top: 70px;
}

.method-scroll-area .m-scroll-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	display: flex;
    justify-content: space-between;
	gap: 20px;
}

.method-scroll-area .m-scroll-wrapper #fixed-area {
	width: 570px;
	flex-shrink: 0;
	 /*左固定記述*/
    position: -webkit-sticky;/*Safari用*/
    position: sticky;
	top: 180px;
	height:100%;
}

.method-scroll-area .m-scroll-wrapper #fixed-area .img-wrap {
	width: 100%;
}

.method-scroll-area .m-scroll-wrapper #fixed-area .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*-----スクロールエリア右-----*/
.method-scroll-area .r-txt-area {
	padding: 40px;
	background-color: #fff;
}

.method-scroll-area .method-name {
	font-size: 2.5rem;
	font-weight: 500;
	margin-bottom: 10px;
	position: relative;
	display: flex;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: solid 1px #E3A209;
}
.method-scroll-area.sewing-machine .method-name {
	border-bottom: solid 1px #FBA658;
}
.method-scroll-area.tape .method-name {
	border-bottom: solid 1px #F3A886;
}


.method-scroll-area .method-name span {
	font-family: "Libre Bodoni", serif;
	margin-right: 20px;
	margin-top: 6px;
	color: #E3A209;
	font-size: 3rem;
}
.method-scroll-area.sewing-machine .method-name span {
	color: #FBA658;
}
.method-scroll-area.tape .method-name span {
	color: #F3A886;
}


.method-scroll-area .r-txt-area .cate-area {
	margin-top: 50px;
}

.method-scroll-area .r-txt-area .cate-area .cate {
	padding: 10px 20px;
	background-color: #F5F5F5;
	margin-bottom: 20px;
	font-weight: 500;
}

.method-scroll-area .r-txt-area .cate-area .cate::before {
	content: "";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 1.6rem;
    color: #A9876D;
    margin-right: 10px;
}
.method-scroll-area .r-txt-area .cate-area.items .cate::before {
	content: "\f0c4";
}
.method-scroll-area .r-txt-area .cate-area.step .cate::before {
	content: "\f101";
}
.method-scroll-area .r-txt-area .cate-area.point .cate::before {
	content: "\f005";
}


/*数字カウント*/
.step-list {
    counter-reset: number 0;
}
.step-list li::before{
	counter-increment: number 1;
	content: counter(number) ".";
	margin-right: 5px;
}

.step-list li,
.dot-list li {
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.8;
	margin-bottom: 20px;
}
.step-list li:last-child,
.dot-list li:last-child {
	margin-bottom: 0px;
}

/*dot*/
.dot-list li::before{
   content:  ""; 
    width:  8px;
    height:  8px;
    display:  inline-block;
    background-color: #E3A209;
    border-radius:  50%;
    position:  relative;
    top: -3px;
    margin-right: 10px;
}

@media screen and (max-width: 768px){
	.method-detail-area {
		padding: 40px 0 0;
	}

	/*固定・スクロールエリア*/
	.method-scroll-area {
		margin-top: 20px;
		padding: 0 20px;
	}
	.method-scroll-area:first-child {
		margin-top: 0px;
	}

	.method-scroll-area .m-scroll-wrapper {
		max-width: 100%;
		margin: 0 auto;
		justify-content: space-between;
		flex-direction: column;
		gap:0;
	}

	.method-scroll-area .m-scroll-wrapper #fixed-area {
		width: 100%;
		flex-shrink: 0;
		 /*左固定記述*/
		position: static;
		height: auto;
	}
	
	.method-scroll-area .m-scroll-wrapper #fixed-area .img-wrap {
		width: 100%;
		height: 200px;
		margin: 0 0 20px;
	}
	
	.method-scroll-area .m-scroll-wrapper #fixed-area img {
		object-position: center;
	}
	
	.method-scroll-area .m-scroll-wrapper #fixed-area .img-wrap {
		width: 100%;
		margin: 0;
	}

	/*スクロールエリア右*/
	.method-scroll-area .r-txt-area {
		padding: 20px;
	}
	
	.method-scroll-area .name {
		display: none;
	}
	.method-scroll-area .name2 {
		font-weight: 700;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 3rem;
		margin: 5px 0 0;
	}
	.method-scroll-area .m-scroll-wrapper .txt {
		margin: 0 0 30px 0;
	}
	
	.method-scroll-area .m-scroll-wrapper #container .name::before,
	.method-scroll-area .m-scroll-wrapper #container .name2::before{
		position: relative;
		display: block;
		content: "";
		width: 5px;
		height: 30px;
		transform: rotate(45deg);
		margin: 2px 22px 0 5px;
	}

	.method-scroll-area .m-scroll-wrapper #container .txt {
		font-size: 1.6rem;
		margin: 0 0 30px;
	}
	
	.method-scroll-area .method-name {
		font-size: 2rem;
		margin-bottom: 20px;
		padding-bottom: 10px;
	}
	
	.method-scroll-area .method-name span {
		margin-right: 10px;
		margin-top: 3px;
		font-size: 2rem;
	}
	
	.method-scroll-area .r-txt-area .cate-area {
		margin-top: 20px;
	}
	
	.method-scroll-area .r-txt-area .cate-area .cate {
		padding: 10px 10px;
	}
	
}


/* -----------------------------------------------------------
    自宅での裾上げがむずかしい時は？
-------------------------------------------------------------- */
.external-service-area {
	padding: 100px 0;
	background: url("../img/tpp-rvice-area-bg.jpg")no-repeat bottom left / cover;
}

.external-service-area .titlebox.style02 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0px;
    flex-direction: column;
	margin-bottom: 50px;
}

.external-service-area .e-service-list {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.external-service-area .e-service-list li {
	width: 385px;
	background-color: #fff;
}

.external-service-area .e-service-list li .img-wrap {
	width: 100%;
}

.external-service-area .e-service-list li .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.external-service-area .e-service-list li .txt-area {
	padding: 35px;
}

.external-service-area .e-service-list li .s-ttl {
	font-size: 2.4rem;
	font-weight: 500;
	text-align: center;
	margin-bottom: 25px;
	padding-bottom: 20px;
	color: #A9876D;
	border-bottom: solid 1px #A9876D;
}


@media screen and (max-width: 768px) {
	.external-service-area {
		padding: 40px 0;
	}
	.external-service-area .titlebox.style02 {
		margin-bottom: 30px;
	}
	
	.external-service-area .titlebox.style02 .title-en {
		text-align: center;
	}

	.external-service-area .e-service-list {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		flex-direction: column;
		gap:20px;
	}

	.external-service-area .e-service-list li {
		width: 100%;
	}

	.external-service-area .e-service-list li .img-wrap {
		width: 100%;
		height: 200px;
	}

	.external-service-area .e-service-list li .txt-area {
		padding: 20px;
	}

	.external-service-area .e-service-list li .s-ttl {
		font-size: 2rem;
		margin-bottom: 20px;
		padding-bottom: 15px;
	}
	}


/* -----------------------------------------------------------
    まとめ
-------------------------------------------------------------- */
.summary-area {
	padding: 80px 0;
	background-color: #F9F5F2;
}

.summary-area .dot-list {
	padding: 30px;
	background-color: #fff;
	margin: 30px auto;
}


@media screen and (max-width: 768px) {
	.summary-area {
		padding: 40px 0;
	}

	.summary-area .dot-list {
		padding: 30px;
		margin: 20px auto;
	}
	}



/* -----------------------------------------------------------
	リンクエリア
-------------------------------------------------------------- */
.link-area {
    margin-top: 80px;
}
@media screen and (max-width: 768px) {
	.link-area {
		margin-top: 40px;
	}
	}