@charset "UTF-8";



/* btn */



@media screen and (min-width: 768px){
	.br-sp {display: none; }
}
@media screen and (max-width: 767px) {
	.br-pc {display: none; }
}



/* style */

/* 共通 */

.peel_wash {
	font-size: 16px;
	font-family: fot-tsukuardgothic-std, sans-serif;
	font-weight: 400;
	font-style: normal;
	background-color: #EDF8FF;
	
	
	section {
		width: 100%;
		height: 100%;
		padding: 5rem 0;

		@media screen and (max-width: 767px) {
			padding: 3rem 0;
		}

		article {
			width: 1200px;
			margin: 0 auto;
			position: relative;
			text-align: center;
			
			@media screen and (max-width: 1200px) {
				width: 100%;
			}
			@media screen and (max-width: 767px) {
				width: 90vw;
				margin: auto;
			}

			.contents {
				margin-bottom: 3rem;
			}
		}
	}
	
	.note{
		font-size: 12px;
		text-decoration: inherit!important;
	}
	@media screen and (max-width: 500px) {
		.note{
			font-size: 10px;
		}
	}
	
	/* 見出し (こだわりの成分) */
	
	.head-border {
    display: flex;
    align-items: center;
		margin-bottom: 3rem;
		margin-top: 5vw;
	}
	
	.head-border:before,
	.head-border:after {
		content: "";
		height: 2px;
		flex-grow: 1;
		background-color: #2F2725;
	}
	
	.head-border:before {
		margin-right: 1rem;
	}
	
	.head-border:after {
		margin-left: 1rem;
	}
	@media screen and (max-width: 767px) {
		.head-border {
			margin-top: 13vw;
		}
		.head-border figure {
			width: 60vw;
		}
		.head-border {
			margin-bottom: 5rem;
		}
	}


	/* kv */

	section.kv{
		background-color: #97C7EE;
		background: url(../img/kv_bg.png) no-repeat bottom center / cover;
		padding: 0;

		@media screen and (max-width: 767px) {
			background: url(../img/kv_bg_sp.png) no-repeat bottom center / cover;
		}


		article{
			width: 95%;
		}
		
	}


	/* catch */

	section.catch{
		padding: 0 0 2rem;
		background:linear-gradient(164deg, #EDF8FF 48%, rgba(166.73, 220.67, 255, 0.38) 100%);
	}
	.catch article{
		padding: 0 0 10rem;
	}
	
	@media screen and (max-width: 767px) {
		.catch article{
			width: 100%;
			margin: auto;
		}
	}

	.catch__lead{
		background: url(../img/bg_bubble.png) no-repeat top center / contain;
		padding: 0 0 8rem;
	}

	@media screen and (max-width: 767px) {
		.catch__lead{
		background: url(../img/bg_bubble.png) no-repeat center -50vw / cover;
		}
	}

	.catch__lead p{
		font-size: clamp(26px, 3.5vw, 30px);
		font-weight: bold;
		margin-bottom: 1em;
		padding-top: 2em;
	}
	@media screen and (max-width: 767px) {
		.catch__lead p{
			width: 95%;
			margin-inline: auto;
		}
	}
	@media screen and (max-width: 767px) {
		.catch__lead img{
			width: 95%;
			margin-inline: auto;
		}
	}
	.catch__recommend{
		text-decoration: underline;
	}
	
	.catch__recommend p{
		font-size: clamp(26px, 3.5vw, 35px);
		margin-bottom: 1em;
	}
	
	.catch__recommend--large{
		font-size: 1.3em;
	}
	.catch__recommend__img{
		display: flex;
		justify-content: center;
		gap: 2rem;
	}
	.catch__recommend__img img{
		margin-inline: auto;
	}
		@media screen and (max-width: 767px) {
			.catch__recommend__img img{
				width: 95%;
			}
		}
	@media screen and (max-width: 500px) {
		.catch__recommend__img{
			flex-direction: column;
		}
	}

	/* contents1 こだわりの成分 */
	.contents__point{
		padding: 0 0 10vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		row-gap: 5rem;
	}
	.contents__point>div,.contents__point>figure{
		width: 50%;
		padding-inline: 3rem;
	}
	@media screen and (max-width: 767px) {
		.contents__point{
			padding: 0 0 20vw;
		}
		.contents__point>div,.contents__point>figure{
			width: 100%;
			padding-inline: 3rem;
		}
	}
	@media screen and (max-width: 500px) {
		.contents__point>div,.contents__point>figure{
			width: 100%;
			padding-inline: 0;
		}
	}
	.contents__point-ttl{
		text-align: left;
		padding: 0 3rem;
	}
	.contents__point-ttl ruby>rt{
		font-size: 12px;
	}
	.contents__point-ttl h3{
		font-size: clamp(26px, 5vw, 37px);
		text-align: left;
		width: fit-content;
		color: #DAA770;
		padding-bottom: 0.3em;
		font-weight: bold;
		display: inline-block;
		background: linear-gradient(
    90deg,
    #DAA770 0%,
    #c58a32 30%,
    #BE7C24 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.contents__point--lead{
		font-size: 16px;
		color: #333;
		font-weight: 400;
	}
	.contents__point-ttl--small-point{
		font-size: 0.5em;
	}
	.contents__point-ttl--num{
		display: inline-flex;
  align-items: center;
	}
	.contents__point-ttl--small{
		font-size: 0.8em;
	}
	.contents__point-ttl--num::after{
		content: "";
		content: "";
		display: inline-block;
  	width: 60px;      /* 線の長さ */
  	height: 1.5px;      /* 線の太さ */
  	background-color: #BE7C24; /* 文字色に合わせる */
  	margin-left: 0.2em; /* 数字との間隔 */
	}
	.point01__detail-box{
		width: fit-content;
		text-align: right;
		margin-inline: auto;
		margin-bottom: 1rem;
	}
	.contents__point figure.contents__point-ttl--img{
		padding-inline: 0;
	}
	.contents__point__detail--ttl{
		font-size: 23px;
		font-weight: bold;
		text-decoration: underline;
	}
	.contents__point__detail .note{
		text-decoration: none;
	}
	.contents__point__detail--material{
		display: flex;
		justify-content: center;
		gap: 2rem;
	}
	.contents__point__detail--material li{
		width: 50%;
		max-width: 200px;
	}
	.contents__point__detail--material p{
		margin-top: 1em;
	}


	/* point01のみ */
	.contents__point__detail-mb{
		margin-bottom: 4rem;
	}

	/* point03のみ */
	.contents__point03>div{
		width: fit-content;
		padding-inline: 3rem;
	}
	.contents__point03>figure{
		width: 100%;
		padding-inline: 3rem;
	}
	.contents__point03{
		flex-direction: column;
		padding: 0 0 4vw;
		width: fit-content;
		margin-inline: auto;
		align-items: start;
	}
	.contents__point03-ttl{
		width: 100%;
	}
	.contents__point div.point01__detail-box-note{
		width: fit-content;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-inline: auto;
		gap: 10px;
	}
	.contents__point03 ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: fit-content;
		gap: 1rem;
	}
	.contents__point03 ul li{
		text-align: center;
		width: calc((100% - 4rem) / 5 );
		min-width: 145px;
	}
	@media screen and (max-width: 900px) {
		.contents__point03 ul li{
			text-align: center;
			width: calc((100% - 2rem) / 3 );
			max-width: 145px;
		}
	}
	@media screen and (max-width: 767px) {
		.contents__point03>div{
			padding-inline: 0;
		}
		.contents__point>div.point01__detail-box-note {
			width: 100%;
			padding-inline: 0;
		}
		.contents__point03 ul {
			gap: 1rem;
		}
	}
	@media screen and (max-width: 500px) {
		.contents__point03 ul li p{
			font-size: 14px;
		}
	}

	/* contents-fragrance */

	.contents-fragrance .contents__point-ttl{
		width: fit-content;
		padding: 0;
    margin-inline: auto;
    text-align: center;
		margin-bottom: 3rem;
	}
	.contents-fragrance .contents__point-ttl--small{
		text-align: center;
	}
	.contents-fragrance .contents__point-ttl h3{
		text-align: center;
	}

	/* synergy */
	section.synergy article>div{
		background:linear-gradient(164deg, #D1ECFF 0%, #E3EEF4 100%);
		border-radius: 100px 0 100px 0;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2.5rem;
		padding: 2rem 3rem;
		width: fit-content;
		margin-inline: auto;
	}
	
	@media screen and (max-width: 767px) {
		section.synergy article>div{
			border-radius: 60px 0 60px 0;
			padding: 2rem 1rem;
		}
		.contents__point-ttl-synergy h3{
			text-align: center;
			padding-bottom: 0;
		}
	}

}

	/* product */
	section.product{
		padding-bottom: 0;
	}
	section.product article{
		padding: 5rem 0;
		background: url(../img/bg_item.png) no-repeat bottom center / contain;
	}
	section.product article .item_box{
		display: flex;
		justify-content: center;
		align-items: flex-end;
		text-align: left;
	}
	.peel_wash section.product article .item_box .item_info h3 {
		font-size: 25px;
		font-weight: bold;
	}
	.peel_wash section.product article .item_box .item_info h3 span {
		font-size: 1.3em;
	}
	.peel_wash section.product article .item_box .item_info dl.naiyou {
		align-content: center;
		align-items: center;
		display: flex;
		justify-content: flex-start;
		margin-block: 3rem;
		font-size: 1.5rem;
	}
	
	.peel_wash section.product article .item_box .item_info dl.naiyou dt {
		background: #fff;
		margin-right: 2rem;
		padding: .1rem 1rem;
	}
	.peel_wash section.product article .item_box .item_info dl.naiyou dd {
		margin-right: 1rem;
	}
	@media screen and (max-width: 768px) {
		section.product article{
			padding: 5rem 0;
			width: 100%;
			background: url(../img/bg_item.png) no-repeat bottom center / cover;
		}
		section.product article .item_box{
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 7vw;
			text-align: left;
			flex-direction: column;
		}
		.peel_wash section.product article .item_box .item_info dl.naiyou {
			font-size: 4vw;
			margin-bottom: 1.5rem;
		}
		.peel-wash__btn{
			min-width: 430px;
		}
	}
	@media screen and (max-width: 500px) {
		.peel-wash__btn{
			min-width: 300px;
		}
	}