:root {
	--black: #707070;
	--orange: #F9DBBC;
	--red: #F26E68;
	--brown: #67544F;
	--yellow: #FDF3D0;
}


/*幅調整*/
.col1 .keni-header_outer, .col1 .keni-gnav_outer, .col1 .keni-mv_outer, .col1 .catch-area, .col1 .archive_title_wrap, .col1 .keni-breadcrumb-list_outer, .col1 .keni-footer_outer, .col1 .keni-copyright, .col1 .keni-section_wrap, .col1 .keni-sep-conts_outer, .col1 .keni-footer-panel_outer {
	max-width: 600px!important;
}

/*ヘッダー非表示*/
.keni-header_outer {
	display: none!important;
}

/*枠外背景*/
.keni-container, .keni-mv_wrap {
	overflow: hidden;
	background-image:url( https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/pelmo-bg.webp);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}


/*位置調整*/
.keni-section_wrap {
	padding: 0!important;
}

.keni-main_inner {
	padding: 0!important;
}

.top-h1-write {
	max-width: 600px!important;
	margin: 0 auto;
}

/*見出し*/
h2:not(.title_no-style) {
	background: none;
}

/*文字色*/
.red-text {
	color: var(--red);
	font-weight: 600;
}

/*アンダーライン*/
.marker {
	font-weight:bold;
	background:linear-gradient(transparent 60%, var(--yellow) 60%);
}


/*グロナビPC非表示*/
.keni-gnav_wrap {
	display: none;
}

/*検索窓非表示*/
.search-box {
	display:none;
}

/*左右余白*/
.section-inner {
	padding-left: 3.6rem;
	padding-right: 3.6rem;
}

/*オファー*/
.offer {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.offer img {
	margin: 1rem 0;
	transition: 0.6s;
}

.offer img:hover {
	opacity: 0.6;

}

/*お悩み*/
.problem h2 {
	background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/problem-bg.webp);
	background-size: 100% 100%;
	color: #67544F;
	padding: 6rem 1rem;
	text-align: center;
	font-size: 3rem;
}

.problem h2 span {
	color: #F26E68;
	font-size: 140%;
}

.problem li {
	position: relative;
	padding: 0 0 1.4rem 4rem;
	list-style: none;
	color: #333333;
	font-size: 2.4rem;
	border-bottom-color: #b3ada0;
	border-bottom-style: dotted;
	border-bottom-width: 2px;
	font-weight: 600;
}

.problem span {
	color: #F26E68;
}

.problem li:before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/check.webp);
	background-size: cover;
	width: 3rem;
	height: 3rem;
}

.problem ul {
	margin: 1.5rem 1.5rem 4rem;
}

/*放っておくと*/
.leave {}

.leave h2 {
  background: -moz-linear-gradient(top, #ED4040, #F26E68,#ED4040);
  background: -webkit-linear-gradient(top, #ED4040, #F26E68,#ED4040);
  background: linear-gradient(to bottom, #ED4040, #F26E68,#ED4040);
	padding: 4rem 1rem;
	font-size: 3rem;
	text-align: center;
	margin-bottom: 0!important;
}

.leave-text {
	background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/leave-bg.webp);
	background-size: cover;
	background-position: left;
	padding: 4rem 0;
	font-size: 2rem;
	color: #67544F;
	font-weight: 600;
	text-align: justify;
}

.leave-text p {
	margin-bottom: 2.5rem!important;
}

.leave-text p:nth-of-type(4) {
	margin-bottom: 0;
}

.leave-risk {
	background: #F26E68;
	color: white;
	font-size: 2.2rem;
	font-weight: 600;
	padding: 3rem 3.6rem;
	text-align: center;
}

.leave p:last-of-type {
	margin-bottom: 0!important;
}

/*悪くなる原因*/
.cause {
	background: background: -moz-linear-gradient(top, var(--orange), #FFF);
  background: -webkit-linear-gradient(top, var(--orange), #FFF);
  background: linear-gradient(to bottom, var(--orange), #FFF);;
	padding-top: 4rem;
}

.cause h2 {
	background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/cause-ttl-bg.webp);
	background-size: 100%;
	background-repeat: no-repeat;
	padding: 6rem 1rem;
	color: var(--brown);
	font-size: 3.5rem;
	text-align: center;
	margin: 0 2rem 1rem;
}

.cause h2 span, .improvement h2 span, .future-ttl h2 span {
	color: var(--red);
	font-size: 140%;
}

.cause-content {
	
}

.cause-content p {
	font-size: 1.9rem;
	text-align: justify;
}

.cause-content p span, .cause-fukidashi span {
	color: var(--red);
	font-weight: 600;
}

.cause-content-img {
	float: right;
	width: 30%;
	padding-left: 1rem
}

.cause-fukidashi {
	width: 70%;
	text-align: center!important;
	font-size: 2rem!important;
	line-height: 1.4;
	font-weight: 600;
	padding: 1.5rem;
	background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/fukidashi-bg.webp);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

p.cause-fukidashi {
	margin-bottom: 2rem!important;
}

/*改善するには*/
.improvement {
	padding-top: 3rem;
}

.improvement h2 {
	text-align: center;
	font-size: 3.4rem;
	background: rgba(248,244,230,0.4);
	margin: 0 3.4rem 4rem;
	border: solid 1.5rem var(--yellow);
	padding: 5rem;
	color: var(--brown);
	position: relative;
}

.improvement h2:before, .improvement h2:after {
	position: absolute;
	content: "";
	background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/improvement-ttl-img.webp);
	background-size: 100%;
	background-repeat: no-repeat;
		width: 16rem;
	height: 16rem;
}

.improvement h2:before {
	top: -3rem;
	left: -3rem;
}

.improvement h2:after {
	bottom: -3rem;
	right: -3rem;
	transform: rotate(180deg);
}

.improvement p {
	font-size: 1.9rem;
	text-align: justify;
}

/*どんな未来*/
.future {
	
}

.future-ttl {
	background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/future-ttl-bg.webp);
	background-size: 65%;
	background-repeat: no-repeat;
	height: 280px;
	padding-top: 5rem;
	margin-bottom: 3rem
}

.future-ttl h2 {
	margin-left: 45%;
	color: var(--brown);
	font-size: 3.4rem;
	line-height: 1.4;
	padding: 2rem 4rem;
		background: -moz-linear-gradient(173deg, var(--yellow), 70%, var(--orange));
background: -webkit-linear-gradient(173deg, var(--yellow), 70%, var(--orange));
background: linear-gradient(173deg, var(--yellow), 70%, var(--orange)); 

}
.future-sub-ttl {
	margin-top: 2rem;
}

.future-sub-ttl p {
	background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/future-subttl-bg1.webp),url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/future-subttl-bg2.webp);
	background-size: 94% 100%;
	background-repeat: no-repeat;
	background-position: center;
	padding: 3rem 2rem;
	text-align: center!important;
	font-size: 2rem!important;
	font-weight: 600;
}

.future p {
	font-size: 1.9rem;
	text-align: justify;
}

.future-message {
	background: var(--orange);
	text-align: center!important;
	font-size: 2.3rem!important;
	font-weight: 600;
	padding: 3rem 1rem;
	color: var(--brown);
}

.future p span {
	color: var(--red);
	font-weight: 600;
}

/*施術内容*/
.flow {
	margin-top: 5rem;
}

.flow h2 {
    position: relative;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
	color: var(--brown);
	text-align: center;
	font-size: 3.4rem;
	margin-bottom: 1rem!important;
}

.flow h2::before, .flow h2::after {
    position: absolute;
    top: 0.8rem;
    height: 5rem;
    content: '';
	color: var(--red);
}

.flow h2::before {
    border-left: solid 3px;
    left: 10%;
    transform: rotate(-30deg);
}

.flow h2::after {
    border-right: solid 3px;
    right: 10%;
    transform: rotate(30deg);
}

.flow ul {
	margin: 0 0 3rem!important;
	list-style: none;
	counter-reset: flow;
}

.flow li h3:before {
	content:counter(flow, decimal-leading-zero);
	counter-increment:flow;
	margin-right:10px;
	background:var(--red);
	padding:2px 5px 3px 7px;
	border-radius:30px;
	color:#fff;
	font-size:2.4rem;
	font-family: "Titillium Web", sans-serif;
}

.flow li {
	position: relative;
	text-align: center;
	border: solid var(--orange);
	border-radius: 2rem;
	margin-bottom: 4rem;
}

.flow li:after {
	position: absolute;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	content: "";
	background: var(--red);
	width: 5rem;
	height: 2rem;
	bottom: -3.3rem;
	left: 50%;
	transform: translateX(-50%);
}

.flow li:last-child::after {
	display: none;
}

.flow h3 {
	border: none;
	background: var(--orange);
	border-radius: 2rem 2rem 0 0;
	width: 101%;
	margin-left: -2px;
	color: var(--brown);
	font-size: 2.4rem;
}

.flow-img {
	margin: 0 2.5rem 2.5rem;
}

.flow-img img {
	border-radius: 6px;
}

.flow p {
	font-size: 1.9rem;
	text-align: justify;
}

.flow p span {
	color: var(--red);
	font-weight: 600;
}

.flow-message {
	background: var(--yellow);
	text-align: center!important;
	padding: 2rem 1rem;
	font-size: 2.4rem!important;
	font-weight: 600;
	text-align: center;
}

p.flow-message {
	margin-bottom: 0!important;
}

/*質問*/
.qa {
	margin-bottom: 5rem;
}

.qa h2 {
	background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/qa-ttl-bg.webp);
	background-size: 100% 100%;
	text-align: center;
	padding:4rem 1rem 7rem;
	color: var(--brown);
	font-size: 3.4rem;
	position: relative;
}

.qa h2:after {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	content: "";
	position: absolute;
	background: var(--red);
	width: 40%;
	height: 5px;
	bottom:5rem;
	left: 50%;
	transform: translate(-50%,-50%);
}

/*よくある質問ーアコーディオン*/
details {
    margin-bottom: 20px;
    font-size: 2rem;
    text-align: justify;
}

details p {
    padding: 1.5rem 1rem 0.5rem 6rem!important;
    margin-top: 0;
    position: relative;
}

details p:before {
    position: absolute;
	top: 01.4rem;
	left: 1rem;
	content: "A.";
	color: #FDA6A2;
    font-size: 3.5rem;
	font-weight: bold;
}

details summary {
	border-bottom: solid 1px var(--brown);
    color: var(--brown);
	list-style: none;
	cursor: pointer;
	position:relative;
		padding: 1.5rem 1rem 1.5rem 6rem;
}

details summary::before {
    position: absolute;
	top: 1.4rem;
	left: 1rem;
	content: "Q.";
	color: var(--red);
    font-size: 3.5rem;
	font-weight: bold;
}

/*Chrome用のデフォルト三角削除*/
details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
	content: "＋";
	position:absolute;
	top:1.4rem;
	right:1.5rem;
	font-size:2rem;
	color: var(--red);
	font-weight: bold;
}
/*アコーディオンオープン時マイナスアイコンに変更*/
details[open] summary::after {
	content: "−";
	position: absolute;
	top: 1.3rem;
	right: 1.5rem;
	font-size: 2.2rem;
}

/*アクセス*/
.access {
	background: var(--yellow);
	padding-top: 3rem;
	padding-bottom: 2rem;
	text-align: center;
}

.access h2 {
	font-size: 3.4rem;
	color: var(--brown);
	position: relative;
	margin-bottom: 5rem;
}

.access h2:after {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	content: "";
	position: absolute;
	background: var(--red);
	width: 40%;
	height: 5px;
	bottom:-1.5rem;
	left: 50%;
	transform: translate(-50%,-50%);
	
}

.clinic-profile {
	background: var(--orange);
	text-align: center;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.clinic-profile p {
	font-size: 3rem;
	font-weight: bold;
	color: var(--red);
	letter-spacing: 2px;
	margin-bottom: 2rem!important;
}

.clinic-profile-inner {
	background: white;
	padding: 3rem;
	border-radius: 1rem;
}

.clinic-profile-inner table {
	margin-bottom: 0;
	
}

.clinic-profile-inner th {
	background: var(--orange);
	color: var(--red);
}

.clinic-profile-inner th, .clinic-profile-inner td {
	border: solid 1px #FBECDA;
	font-size: 1.8rem;
}

.clinic-profile-inner td {
	text-align: left;
}

/*フッター*/
.keni-footer_wrap {
	background: var(--red)!important;
	margin-top: -4rem;
}

.keni-copyright_wrap {
	border: none!important;
	text-align: center;
	color: white;
}

/*フッターボタン*/
.footer_btn {
    display: block;
    position: fixed;
    bottom: 6px;
    right: 10px;
    width: 400px;
    z-index: 1000;
    transition-duration: 0.6S;
}

.footer_btn:hover{
  transform: scale(1.05,1.05);
}

.footer_btn img{
	width: 100%;
}







@media (max-width:768px) {
	/*幅調整*/
	.keni-section_wrap {
		width:100%;
		margin:0 auto;
		padding: 0 5%;
	}
	
	.keni-section_wrap {
		margin: 0!important;
	}
	
	
	/*左右余白*/
	.section-inner {
		padding-left: 5%;
		padding-right: 5%;
	}
	
	/*お悩み*/
	.problem h2 {
		padding: 4rem 1rem;
		font-size: 2.4rem;
	}

	.problem li {
		padding: 0 0 1.4rem 3rem;
		font-size: 2rem;
	}

	.problem li:before {
		top: 0.5rem;
		width: 2rem;
		height: 2rem;
	}

	.problem ul {
		margin: 1rem 1rem 3rem;
	}
	
	/*放っておくと*/
	.leave h2 {
		padding: 2.4rem 1rem;
		font-size: 2.2rem;
	}

	.leave-text {
		padding: 2.5rem 0;
		font-size: 1.7rem;
	}

	.leave-risk {
		font-size: 1.7rem;
		padding: 2rem 3.6rem;
	}
	
	/*悪くなる原因*/
	.cause {
		padding-top: 3rem;
	}

	.cause h2 {
		padding: 3rem 1rem;
		font-size: 2rem;
		margin: 0 1rem 1rem;
	}

	.cause-content p {
		font-size: 1.7rem;
	}

	.cause-content-img {
		padding-left: 0.5rem
	}

	.cause-fukidashi {
		font-size: 1.4rem!important;
		padding: 1rem;
	}

	p.cause-fukidashi {
		margin-bottom: 1.5rem!important;
	}
	
	/*改善するには*/
	.improvement {
		padding-top: 2rem;
	}

	.improvement h2 {
		font-size: 2rem;
		margin: 0 5% 3rem;
		border: solid 1rem var(--yellow);
		padding: 2rem;
	}

	.improvement h2:before, .improvement h2:after {
			width: 10rem;
		height: 10rem;
	}

	.improvement h2:before {
		top: -2rem;
		left: -2rem;
	}

	.improvement h2:after {
		bottom: -2rem;
		right: -2rem;
	}

	/*どんな未来*/
	.future-ttl {
		background-size: 90%;
		height: 240px;
		padding-top: 8rem;
	}

	.future-ttl h2 {
		margin-left: 45%;
		font-size: 2rem;
		line-height: 1.3;
		padding: 1.5rem 3rem;
	}
	
	.future-sub-ttl {
		margin-top: 0;
	}

	.future-sub-ttl p {
		padding: 3rem 2rem;
		font-size: 1.7rem!important;
		line-height: 1.6;
		background: url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/future-subttl-bg3.webp),url(https://www.beauty-salon-pelmo.xyz/wp-content/uploads/2024/06/future-subttl-bg2.webp);
		background-size: 94% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}


	.future p {
		font-size: 1.7rem;
	}

	.future-message {
		font-size: 2rem!important;
		padding: 2rem 1rem;
	}
	
	/*施術内容*/
	.flow h2 {
		font-size: 2.4rem;
	}
	
	.flow h2::before, .flow h2::after {
		height: 4rem;
	}

	.flow li {
		margin-bottom: 3rem;
	}

	.flow li:after {
		width: 4rem;
		height: 1.8rem;
		bottom: -2.7rem;
	}

	.flow h3 {
		border-radius: 1.7rem 1.7rem 0 0;
		font-size: 2rem;
		margin-bottom: 1.5rem;
		padding: 0.5rem;
	}

	.flow li h3:before {
		font-size:1.8rem;
		padding:1px 4px 2px 6px;
	}

	.flow-img {
		margin: 0 1.5rem 1.5rem;
	}

	.flow p {
		font-size: 1.6rem;
	}

	.flow-message {
		padding: 2rem 1rem;
		font-size: 1.8rem!important;
	}
	
	/*質問*/
	.qa h2 {
		padding:2rem 1rem 4rem;
		font-size: 2.4rem;
	}

	.qa h2:after {
		width: 46%;
		bottom:3.2rem;
	}

	/*よくある質問ーアコーディオン*/
	details {
		margin-bottom: 1rem;
		font-size: 1.6rem;
	}
	
	details p:before {
		top: 1.5rem;
		font-size: 2rem;
	}


	details summary::before {
		top: 0.5rem;
		font-size: 2rem;
	}

	details p {
		padding: 1.5rem 1rem 0.5rem 6rem!important;
		margin-top: 0!important;
		position: relative;
		margin-bottom: 0!important;
	}

	details summary {
			padding: 0.5rem 4rem 0.5rem 5rem;
	}
	
	details summary::after {
		top:0.5rem;
	}
	
	/*アコーディオンオープン時マイナスアイコンに変更*/
	details[open] summary::after {
		top: 0.4rem;
	}
	
		/*アクセス*/
	.access {
		padding-top: 2rem;
		padding-bottom: 0.5rem;
	}

	.access h2 {
		font-size: 2.4rem;
		margin-bottom: 3rem;
	}

	.access h2:after {
		width: 50%;
		height: 5px;
		bottom:-1rem;
	}
	
	.clinic-profile p {
		font-size: 2.2rem;
		letter-spacing: 0;
	}

	.clinic-profile-inner {
		padding: 2rem;
	}

	.clinic-profile-inner th, .clinic-profile-inner td {
		font-size: 1.6rem;
		display: block;
	}

	.clinic-profile-inner td {
		text-align: center;
	}
	
	/*フッターボタン*/
	.footer_btn{
	    width: 100%;
		bottom: 0px;
		right: 0px;
		transition: 0.5s;
		display: block;
	}
	
	/*フッター*/
	.keni-footer_wrap {
		margin-top: -2rem;
	}

}