/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

/* ---------------------------------------- common */

article {
	font-weight: 500;
}
article h2 {
	color: #FC9913;
	text-align: center;
	font-weight: 600;
	margin: 0 0 2em;
}

article .icon li span.service {
	display: inline-block;
	color: #fff;
	padding: .6em .5em;
	border-radius: 4px;
}

.cuts { background: #DC000C; }
.colors { background: #FC9913; }
.perms { background: #47B000; }




@media (max-width: 767px) {

	article section { margin: 0 0 3.5em; }
	article section .inside + .inside { margin: 2.5em 0 0; }

	article h2 {
		font-size: clamp(1.6rem, -0.455rem + 7.27vw, 2rem);
	}
	article .icon li span.service {
		font-size: clamp(1.2rem, 0.023rem + 3.64vw, 1.4rem);
	}
	section {
		font-size: clamp(1.2rem, 0.023rem + 3.64vw, 1.4rem);
	}
}

@media (min-width: 768px) {

	article section:not(:last-child) { margin: 0 0 4.5em; }
	article section .inside + .inside { margin: 3em 0 0; }

	article h2 {
		font-size: clamp(2.4rem, -0.146rem + 3.43vw, 3.2rem);
	}

	article .icon li span.service {
		font-size: clamp(1.3rem, 0.195rem + 1.29vw, 1.6rem);
	}
	section {
		font-size: clamp(1.3rem, 0.195rem + 1.29vw, 1.6rem);
	}

}

/* ---------------------------------------- headline */

.headline {
	text-align: center;
	margin: 0 0 3em;
}
.headline p { 
	line-height: 2;
	margin: 0 0 2em; 
}

.headline .icon li span { margin: 0 .5em 0 0; }

@media (max-width: 767px) {

	.headline {
		font-size: clamp(1.2rem, 0.023rem + 3.64vw, 1.4rem);
	}
	.headline ul { 
		display: inline-block;
		margin: 0 auto; 
	}
	.headline ul li {
		display: table;
		padding: .25em 0;
	}
	.headline ul li > * {
		display: table-cell;
		vertical-align: middle;
	}
	.headline ul li > i {
		width: 5em;
		text-align: left;
	}
	.headline ul li > i + span {
		padding: 0 0 0 .5em;
	}
}

@media (min-width: 768px) {

	.headline {
		font-size: clamp(1.2rem, 0.339rem + 0.86vw, 1.4rem);
	}
	.headline ul {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.headline ul li:not(:last-child){ margin: 0 2em 0 0; }
}

/* ---------------------------------------- section */

section h3 {
	color: #fff;
	background: #FC9913;
	line-height: 1.6;
	border-radius: .4em;
	margin: 0 0 1.5em;
}
section .inside h4 {
	color: #0075C2;
	border-bottom: 1px #FC9913 solid;
	text-decoration: underline;
	line-height: 1.6;
	margin: 0 0 1em;
}
section .inside h4 a {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
section .inside h4 a:hover {
	opacity: .5;
}
section .inside .detail .info {
	display: flex;
	align-items: center;
}
section .inside .detail .info a {
	display: block;
	background: #FFE2BA;
	text-align: left;
	padding: 1em 2em 1em 1em;
	border-radius: .4em;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	position: relative;
}
section .inside .detail .info a::after {
	content: "\f054";
	font-family: 'FontAwesome';
	color: #FC9913;
	font-size: 1.2rem;
	position: absolute;
	top: 50%;
	right: 1em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
section .inside .detail .info a:hover {
	opacity: .5;
}

section .inside .detail p { line-height: 1.6; }

@media (max-width: 767px) {

	section h3 {
		font-size: clamp(1.5rem, -0.153rem + 5.45vw, 1.8rem);
		padding: .5em .75em;
	}

	section .inside h4 {
		font-size: clamp(1.5rem, -0.153rem + 5.45vw, 1.8rem);
		padding: 0 1em .5em;
	}

	section .inside .detail {
		padding: 0 1em;
	}
	section .inside .detail .info { 
		justify-content: space-between;
		margin: 0 0 1em;
	}
	section .inside .detail .info li { width: 46%; }
	section .inside .detail .info a {
		width: 100%;
	}

	section .inside .detail .icon {
		display: flex;
		margin: 0 0 1em;
	}
	section .inside .icon li:not(:last-child){ margin: 0 .5em 0 0; }
	
	section .inside .detail p br { display: none; }

}

@media (min-width: 768px) {

	section h3 {
		font-size: clamp(1.8rem, -0.116rem + 2.59vw, 2.4rem);
		padding: .3em .5em;
	}

	section .inside h4 {
		font-size: clamp(1.6rem, 0.172rem + 1.72vw, 2rem);
		padding: 0 20px .5em;
	}
	section .inside .detail {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0 20px;
	}
	
	section .inside .detail {
		justify-content: space-between;
	}
	section .inside .detail .info { 
		justify-content: space-between;
		width: 43%; 
	}
	section .inside .detail .info li { width: 46%; }
	section .inside .detail .info a {
		width: 100%;
		max-width: 190px;
	}

	section .inside .detail .icon {
		display: flex;
		align-items: center;
	}
	section .inside .icon li:not(:last-child){ margin: 0 1em 0 0; }

	section .inside .detail p { width: 24%; }

}

/* ---------------------------------------- pagelink */

article .pagelink { 
	text-align: center; 
}
article .pagelink a {
	display: inline-block;
	color: #fff;
	background: #FC9913;
	padding: 1em 2em;
	border-radius: 100px;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
article .pagelink a:hover {
	opacity: .5;
}

@media (max-width: 767px) {

	article .pagelink { margin: 5em 0 0; }

}

@media (min-width: 768px) {

	article .pagelink { margin: 7em 0 0; }
	article .pagelink a {
		font-size: clamp(1.3rem, 0.195rem + 1.29vw, 1.6rem);
	}

}