/***** css sp *****/

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

    .pc {
        display: none;
    }

main {
    overflow: hidden;
}

h1 {
    margin: 0;
    padding: 0;
}

a,
a:hover {
    text-decoration: none !important;
}

.sec-mv {
    width: 100%;
    background-image: linear-gradient(130deg, #542d28, #c98087);
    margin-top: calc(30 * (100vw / 375));

    & img {
        margin: 0 auto;
    }
}

.sec-lead {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: calc(30 * (100vw / 375)) 0 calc(50 * (100vw / 375));

    & h2 {
        font: 500 calc(22 * (100vw / 375)) / 1.6em "Noto Sans JP", sans-serif;
        margin: 0 auto calc(30 * (100vw / 375));
    }
}

.lead-bubble ul {
	display: flex;
	flex-wrap: wrap;
    justify-content: center; 
	width: 90%;
	margin: 0 auto;
	gap: 0 calc(10 * (100vw / 375));

	& li {
		background-image: url("../../../img/feature/w-inlay-250820/bubble01.png");
		background-size: contain;
        background-repeat: no-repeat;
		width: calc(100% / 2 - calc(10 * (100vw / 375)));
		height: calc(180 * (100vw / 375));
		justify-content: center;
		align-items: center;
		display: flex;
        font: 500 calc(16 * (100vw / 375)) / 1.6em "Noto Sans JP", sans-serif;
	}

}

.sec-category {
	width: 100%;
	margin: 0 auto calc(60 * (100vw / 375));
	text-align: center;
    background-image: linear-gradient(130deg, #915859, #915859);
	padding: calc(60 * (100vw / 375)) 0;

	& ul {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
        justify-content: center;
		gap: calc(30 * (100vw / 375)) calc(20 * (100vw / 375));
	}

	& li {
		width: calc(100% / 2 - calc(10 * (100vw / 375)));
		background: #fff;
        padding: calc(10 * (100vw / 375));
		position: relative;
	}

	& li::before {
		content: "";
		display: inline-block;
		width: calc(130 * (100vw / 375));
		height: calc(50 * (100vw / 375));
		background-position: center;
		background-size: contain;
		transform: rotate(340deg);
		position: absolute;
		top: calc(-20 * (100vw / 375));
		left: calc(-20 * (100vw / 375));
                filter: invert(81%) sepia(160%) saturate(123%) hue-rotate(10deg) brightness(142%) contrast(81%);
	}

	& li.cate-li01::before {
		background-image: url('../../../img/feature/w-inlay-250820/ico-handwrite01.png');
	}

	& li.cate-li02::before {
		background-image: url('../../../img/feature/w-inlay-250820/ico-handwrite02.png');
	}

	& li.cate-li03::before {
		background-image: url('../../../img/feature/w-inlay-250820/ico-handwrite03.png');
	}

	& li::after {
		content: "";
		display: inline-block;
		width: calc(40 * (100vw / 375));
		height: calc(40 * (100vw / 375));
		background-image: url('../../../img/feature/w-inlay-250820/ico01.png');
		background-position: center;
		background-size: contain;
		margin-bottom: calc(-30 * (100vw / 375));
	}



	& p {
		margin-top: .3em;
        	font: 600 calc(16 * (100vw / 375)) / 1.6em "Noto Sans JP", sans-serif;
	}

	& .theme-btn {
        	width: 90%;
        	height: calc(60 * (100vw / 375));
        	margin: calc(50 * (100vw / 375)) auto 0;
	}

	& .theme-btn span {
        	font: 700 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        	text-align: center;
        	background: #fff;
        	color: #333;
        	display: flex;
        	flex-wrap: nowrap;
        	align-items: center;
        	justify-content: center;
        	width: 100%;
        	height: 100%;
	}
}


/*-- sec-point --*/

.sec-point {
	width: 90%;
	margin: 0 auto calc(100 * (100vw / 375));
	text-align: center;
    font: 400 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
	justify-content: center;
	align-items: center;
}

.point-detail {
	width: 100%;
	text-align: left;
    margin-bottom: calc(20 * (100vw / 375));
    position: relative;

	& h3 {
        margin: 0 auto calc(10 * (100vw / 375));
        text-align: center;
	}

	& h3 img {
		width: calc(200 * (100vw / 375));
	}

    & p {
        margin-bottom: calc(20 * (100vw / 375));
    }
}

.point-detail::after {
    position: absolute;
    z-index: 1;
    content: "";
    width: 1px;
    background-color: #333;
    height: calc(80 * (100vw / 375));
    margin: 0 auto;
    left: 50%;
}


.point-img {
	width: 100%;
	left: 0;
	position: relative;
	margin: 0 0 0 auto;
    padding-top: calc(20 * (100vw / 375));
}

.sec-point.point02 {

	& .point-detail {
		width: 100%;
		position: relative;
	}

	& .point-img {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	& .point-img ul {
		display: flex;
		flex-wrap: wrap;
		gap: calc(10 * (100vw / 375));
		width: calc(450 * (100vw / 375));
	}

	& .point-img li img {
		width: calc(105 * (100vw / 375));
	}

	& .point-img p {
		width: calc(450 * (100vw / 375));
    		text-align: right;
	}

}

.sec-point.point04 {
	flex-direction:row-reverse;

	& .point-detail {
		right: 0;
		left: auto;
	}

	& .point-img {
		margin: 0 auto 0 0;
		right: 0;
		left: auto;
	}
}

/*-- sec-item --*/

.sec-item {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background: #f4f4f4;

    & h2 {
        font: 700 calc(24 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        background-image: linear-gradient(130deg, #542d28, #c98087);
        margin: 0 0 calc(50 * (100vw / 375)) 0;
        padding: calc(30 * (100vw / 375)) 0;
        color: #fdf3c2;
    }
}

.item-con {
	margin: 0 auto;
	padding-bottom: calc(100 * (100vw / 375));
	width: 90%;
}

.item-detail {
	width: 100%;
	text-align: left;
    margin-top: calc(40 * (100vw / 375));

	& .item-ttl {
        	font: 500 calc(20 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
		margin-bottom: calc(20 * (100vw / 375));
	}

	& .item-txt {
		margin-bottom: calc(20 * (100vw / 375));
	}

	& .item-btn p {
        	font: 600 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        	border: 1px solid #000;
        	text-align: center;
        	width: calc(240 * (100vw / 375));
        	height: calc(50 * (100vw / 375));
		margin: 0 auto;
        	background: #fff;
        	color: #000;
        	display: flex;
        	flex-wrap: nowrap;
        	align-items: center;
        	justify-content: center;
		position: relative;
    	}

	& .item-btn p::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: calc(27 * (100vw / 375));
		width: calc(9 * (100vw / 375));
		height: calc(9 * (100vw / 375));
		margin: auto;
		border-top: 1px solid #333;
		border-right: 1px solid #333;
		transform: rotate(45deg);
		box-sizing: border-box;
	}

}

.item-category {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
        align-items: flex-end;
	border-bottom: 1px solid #333;
	margin-bottom: calc(20 * (100vw / 375));
	padding-bottom: .3em;

	& img {
		width: 40%;
	}

	& p {
    		text-align: right;
    		width: 60%;
		font: 600 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
	}
}

.item-color {
	margin-bottom: calc(40 * (100vw / 375));

	& p {
		font: 600 calc(14 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
		margin-bottom: .3em;
	}

	& ul {
		display: flex;
    		flex-wrap: wrap;
    		gap: calc(10 * (100vw / 375));
	}

	& li {
		width: calc(40 * (100vw / 375));
		height: calc(40 * (100vw / 375));

	}

	& .color01-01 {
		background: #5B2024; 
		border: 1px solid #5B2024;
	}

	& .color01-02 {
		background: #FBF8F4; 
		border: 1px solid #666666;
	}

	& .color01-03 {
		background: #FFFFFF; 
		border: 1px solid #666666;
	}

	& .color01-04 {
		background: #3E3B42; 
		border: 1px solid #3E3B42;
	}

	& .color02-01 {
		background: #5d4133; 
		border: 1px solid #5d4133;
	}

	& .color02-02 {
		background: #FBF8F4; 
		border: 1px solid #666666;
	}

	& .color02-03 {
		background: #000000; 
		border: 1px solid #000000;
	}

	& .color03-01 {
		background: #fffbed; 
		border: 1px solid #666666;
	}

	& .color03-02 {
		background: #EFEFEF; 
		border: 1px solid #666666;
	}

	& .color03-03 {
		background: #666666; 
		border: 1px solid #666666;
	}
}

/*-- sec-bottom --*/

.sec-bottom {
    width: 100%;
    padding-top: calc(50 * (100vw / 375));

    & .btn-2col {
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    & .btn-2col ul {
    }

    & .btn-2col li {
        flex: 0 0 calc(100% / 2 - calc(10 * (100vw / 375)));
    }

    & .btn-2col div {
        font: 700 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #241754;
        margin: calc(8 * (100vw / 375)) auto calc(20 * (100vw / 375));
        padding: calc(14 * (100vw / 375)) 0;
        text-align: center;
        width: 100%;
        background: #fff;
        color: #241754;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    & .btn-1col {
        width: 100%;
        margin: 0 auto;
    }

    & .btn-1col p {
        font: 600 calc(16 * (100vw / 375)) / 1.4em "Noto Sans JP", sans-serif;
        padding: calc(14 * (100vw / 375)) 0px;
        margin: 0 auto calc(60 * (100vw / 375));
        text-align: center;
        width: 90%;
        background: #241754;
        color: #fff;
    }

}
}

/***** css pc *****/

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

    .sp {
        display: none;
    }

main {
    overflow: hidden;
}

h1 {
    margin: 0;
    padding: 0;
}

a,
a:hover {
    text-decoration: none !important;
}

.sec-mv {
    width: 100%;
    background-image: linear-gradient(130deg, #542d28, #c98087);
    margin-top: 50px;

    & img {
        margin: 0 auto;
    }
}

.sec-lead {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 80px 0 100px;

    & h2 {
        font: 600 22px / 1.6em "Noto Sans JP", sans-serif;
        margin: 10px auto 50px;
    }
}

.lead-bubble ul {
	display: flex;
	flex-wrap: wrap;
	width: 600px;
	margin: 0 auto;
	gap: 20px;

	& li {
		background-image: url("../../../img/feature/w-inlay-250820/bubble01.png");
		background-size: 180px 206px;
		width: 30%;
		height: 206px;
		justify-content: center;
		align-items: center;
		display: flex;
        	font: 500 16px / 1.6em "Noto Sans JP", sans-serif;
	}

	& .bubble02 {
		margin-top: 50px;
	}

}

.sec-category {
	width: 100%;
	margin: 0 auto 100px;
	text-align: center;
    background-image: linear-gradient(130deg, #915859, #915859);
	padding: 100px 0;

	& ul {
		width: 900px;
		max-width: 90%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		gap: 5%;
	}

	& li {
		width: 30%;
		background: #fff;
        padding: 30px;
		position: relative;
	}

	& li::before {
		content: "";
		display: inline-block;
		width: 200px;
		height: 50px;
		background-position: center;
		background-size: contain;
		transform: rotate(340deg);
		position: absolute;
		top: -20px;
		left: -40px;
                filter: invert(81%) sepia(160%) saturate(123%) hue-rotate(10deg) brightness(142%) contrast(81%);
	}

	& li.cate-li01::before {
		background-image: url('../../../img/feature/w-inlay-250820/ico-handwrite01.png');
	}

	& li.cate-li02::before {
		background-image: url('../../../img/feature/w-inlay-250820/ico-handwrite02.png');
	}

	& li.cate-li03::before {
		background-image: url('../../../img/feature/w-inlay-250820/ico-handwrite03.png');
	}

	& li::after {
		content: "";
		display: inline-block;
		width: 40px;
		height: 40px;
		background-image: url('../../../img/feature/w-inlay-250820/ico01.png');
		background-position: center;
		background-size: contain;
		margin-bottom: -60px;
	}



	& p {
		margin-top: .3em;
        	font: 600 16px / 1.6em "Noto Sans JP", sans-serif;
	}

	& .theme-btn {
        	width: 300px;
        	height: 60px;
        	margin: 100px auto 0;
	}

	& .theme-btn span {
        	font: 700 16px / 1.4em "Noto Sans JP", sans-serif;
        	text-align: center;
        	background: #fff;
        	color: #333;
        	display: flex;
        	flex-wrap: nowrap;
        	align-items: center;
        	justify-content: center;
        	width: 100%;
        	height: 100%;
	}
}


/*-- sec-point --*/

.sec-point {
	width: 900px;
	max-width: 90%;
	margin: 0 auto 100px;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	justify-content: center;
	align-items: center;
}

.point-detail {
	width: 500px;
	position: absolute;
	left: 0;
	z-index: 1;
	text-align: left;

	& h3 {
		border-bottom: 1px solid #333;
	}

	& h3 img {
		width: 200px;
	}
}

.point-img {
	width: 450px;
	left: 0;
	position: relative;
	margin: 0 0 0 auto;
}

.sec-point.point02 {

	& .point-detail {
		width: 100%;
		position: relative;
		text-align: right;
	}

	& .point-img {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	& .point-img ul {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		width: 450px;
		max-width: 50%;
	}

	& .point-img li img {
		width: 105px;
	}

	& .point-img p {
		width: 450px;
    		text-align: right;
		max-width: 50%;
	}

}

.sec-point.point04 {
	flex-direction:row-reverse;

	& .point-detail {
		right: 0;
		left: auto;
		text-align: right;
	}

	& .point-img {
		margin: 0 auto 0 0;
		right: 0;
		left: auto;
	}
}

/*-- sec-item --*/

.sec-item {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background: #f4f4f4;

    & h2 {
        font: 700 24px / 1.4em "Noto Sans JP", sans-serif;
        background-image: linear-gradient(130deg, #542d28, #c98087);
        margin: 0 0 100px 0;
        padding: 30px 0;
        color: #fdf3c2;
    }
}

.item-con {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding-bottom: 100px;
	width: 900px;
        max-width: 90%;
	gap: 50px;
}

.item-detail {
	width: 450px;
	text-align: left;

	& .item-ttl {
        	font: 500 20px / 1.4em "Noto Sans JP", sans-serif;
		margin-bottom: 40px;
	}

	& .item-txt {
		margin-bottom: 40px;
	}

	& .item-btn p {
        	font: 600 14px / 1.4em "Noto Sans JP", sans-serif;
        	border: 1px solid #000;
        	text-align: center;
        	width: 240px;
        	height: 40px;
		margin: 0 0 0 auto;
        	background: #fff;
        	color: #000;
        	display: flex;
        	flex-wrap: nowrap;
        	align-items: center;
        	justify-content: center;
		position: relative;
    	}

	& .item-btn p::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 27px;
		width: 9px;
		height: 9px;
		margin: auto;
		border-top: 1px solid #333;
		border-right: 1px solid #333;
		transform: rotate(45deg);
		box-sizing: border-box;
	}

}

.item-category {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
        align-items: flex-end;
	border-bottom: 1px solid #333;
	margin-bottom: 40px;
	padding-bottom: .3em;

	& img {
		width: 40%;
	}

	& p {
    		text-align: right;
    		width: 60%;
		font: 600 14px / 1.4em "Noto Sans JP", sans-serif;
	}
}

.item-color {
	margin-bottom: 40px;

	& p {
		font: 600 14px / 1.4em "Noto Sans JP", sans-serif;
		margin-bottom: .3em;
	}

	& ul {
		display: flex;
    		flex-wrap: wrap;
    		gap: 10px;
	}

	& li {
		width: 40px;
		height: 40px;

	}

	& .color01-01 {
		background: #5B2024; 
		border: 1px solid #5B2024;
	}

	& .color01-02 {
		background: #FBF8F4; 
		border: 1px solid #666666;
	}

	& .color01-03 {
		background: #FFFFFF; 
		border: 1px solid #666666;
	}

	& .color01-04 {
		background: #3E3B42; 
		border: 1px solid #3E3B42;
	}

	& .color02-01 {
		background: #5d4133; 
		border: 1px solid #5d4133;
	}

	& .color02-02 {
		background: #FBF8F4; 
		border: 1px solid #666666;
	}

	& .color02-03 {
		background: #000000; 
		border: 1px solid #000000;
	}

	& .color03-01 {
		background: #fffbed; 
		border: 1px solid #666666;
	}

	& .color03-02 {
		background: #EFEFEF; 
		border: 1px solid #666666;
	}

	& .color03-03 {
		background: #666666; 
		border: 1px solid #666666;
	}
}

/*-- sec-bottom --*/

.sec-bottom {
    width: 100%;
    padding-top: 100px;

    & .btn-2col {
        width: 700px;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    & .btn-2col ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    & .btn-2col li {
        flex: 0 0 calc(100% / 2 - 10px);
    }

    & .btn-2col div {
        font: 700 16px / 1.4em "Noto Sans JP", sans-serif;
        border: 1px solid #241754;
        margin: 8px auto 40px;
        text-align: center;
        width: 100%;
        height: 60px;
        background: #fff;
        color: #241754;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    & .btn-1col {
        width: 400px;
        margin: 0 auto;
    }

    & .btn-1col p {
        font: 600 16px / 1.4em "Noto Sans JP", sans-serif;
        padding: 14px 0px;
        margin: 0 auto 100px;
        text-align: center;
        width: 400px;
        background: #241754;
        color: #fff;
    }
}

}

/***** css tb *****/

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

.sec-point {
        font: 400 calc(8 * (100vw / 375)) / 1.6em "Noto Sans JP", sans-serif;
}

.item-detail {
	width: 450px;
        max-width: calc(45% - calc(35 * (100vw / 375)));
	text-align: left;
}
}

 /*-- PC&SP fadein --*/
.fadeIn {
    opacity: 0;
    transform: translate(0,2.5rem);
    transition: all 1s ease-out;
 }

 .bubble02 {
    transition-delay: .5s;
 }

  .bubble03 {
    transition-delay: 1s;
 }

/*-- PC&SP splide --*/

.splide-wrapper {
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
}

.main-carousel {
    margin-bottom: 30px;
}

.main-carousel .splide__track {
    aspect-ratio: 1 / 1;
}

#thumbnail-carousel01 .splide__slide,
#thumbnail-carousel02 .splide__slide,
#thumbnail-carousel03 .splide__slide {
    aspect-ratio: 1 / 1;
}

.splide__slide {
    opacity: 0.6;
}

.splide__slide.is-active {
    opacity: 1;
}

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.splide__track--nav>.splide__list>.splide__slide.is-active {

 border: none !important; 
}

.splide__track--nav > .splide__list > .splide__slide {
  width: 100% !important;
}
.splide__track--nav > .splide__list > .splide__slide.is-active {
  width: 100% !important;
}

#thumbnail-carousel01 .splide__list,
#thumbnail-carousel02 .splide__list,
#thumbnail-carousel03 .splide__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}