@charset "UTF-8";
body{
	background: #C1F3FF;
	color: #515151;
}

/* ふんわり表示エフェクト */
	.effect-fade {
		opacity : 0;
		transform : translate(0, 45px);
		transition : all 3500ms;
	}

	.effect-fade.effect-scroll {
		opacity : 1;
		transform : translate(0, 0);
	}
/* 拡大縮小エフェクト */
	.effect-scaling {
		animation-name: anim_sc;
		transform: scale(0.9, 0.9);
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-duration: 1.5s;
	}
	@keyframes anim_sc {
		100% {
		transform: scale(1, 1);
		}
	}

	.effect-scaling2 {
		animation-name: anim_sc2;
		transform: scale(1, 1);
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-duration: 1.5s;
	}
	@keyframes anim_sc2 {
		100% {
		transform: scale(0.9, 0.9);
		}
	}

/* 左右に揺れるエフェクト */
	.effect-shake{
		animation-name: anim_s;
		transform: rotate(10deg);
		animation-duration: 3s;
		animation-iteration-count: infinite;
		/*transform-origin: x軸 y軸 z軸; 回転の支点を指定*/
		transform-origin: center bottom 0;
	}
	.trouble .effect-shake{
		transform-origin: 68% bottom 0;
	}
	@keyframes anim_s {
		50% {
			transform: rotate(-10deg);
		}
		100% {
			transform: rotate(10deg);
		}
	}

/* PC用 */
	main.pc {
		display: none;
		}
		header.flex.pc {
			display: none;
		}

/* 共通 */
	main{
		width: 100%;
		margin: 0 auto;
		padding-bottom: 10%;
		background: #fff;
	}
	main img{
		display: block;
		margin: 0 auto;
	}
	section{
		margin: 10% 0;
	}
	header{
		padding: 3% 5%;
		background: #A0EDFF;
	}
	header h1{
		width: 20%;
	}
	header .sns {
    width: 34%;
    padding: 1% 0 0;
}
	header .sns ul li{
		width: 46%;
	}

	footer{
		padding: 10% 0 20%;
		background: #A0EDFF;
	}
	footer .f_logo{
		width: 33%;
		margin: 0 auto 10%;
	}
	footer p{
		text-align: center;
		font-size: 0.8em;
	}
	.contact_01, .contact_02{
		margin: 5% auto;
	}
	.contact_01 a{
		position: relative;
		display: block;
	}
	.contact_01 div:first-child{
		padding-left: 3%;
	}
	.contact_01 div:first-child img{
		width: 96%;
	}
	.contact_01 div:last-child{
		position: absolute;
		top: 6%;
		width: 100%;
	}
	.contact_02 a{
		display: block;
		background: url(../img/neqst/contact_02_1.png) no-repeat center top;
		background-size: 96% auto;
		padding: 56% 0 5%;
	}
	.contact_02 a img{
		width: 75%;
	}

/* 画面下固定コンタクト＆ページトップ */
	.fix_foot{
		position: fixed;
		bottom: 0;
		width: 100%;
		opacity: 0;
		-webkit-transition: all .65s;
		        transition: all .65s;
	}
	.fix_foot.active{
		opacity: 1;
		-webkit-transition: all .65s;
		        transition: all .65s;
	}
	.fix_foot div{
		position: relative;
		width: 100%;
		max-width: 768px;
		margin: 0 auto;
	}
	.fix_foot .pagetop{
		position: absolute;
		right: 0;
		top: -60px;
		width: 50px;
	}
	.fix_foot .flex p{
		width: 50%;
	}

.top_catch img{
	width: 88%;
}

/* trouble */
	.trouble{
		position: relative;
		margin-bottom: 0;
		padding-top: 100%;
		padding-bottom: 25%;
		background: url(https://hairsalon-kawamura.eleven-sample.com/wp-content/uploads/2025/02/trouble_bg.png) no-repeat;
		background-size: 100% auto;
	}
	.trouble .effect-shake{
		position: absolute;
		top: -4%;
		left:  5%;
		width: 40%;
	}
	.trouble ul li{
		margin: 0 auto;
	}
	.trouble ul li:first-child{
		width: 95%;
	}
	.trouble ul li:nth-child(2){
		width: 90%;
	}
	.trouble ul li:last-child{
		width: 30%;
	}

/* trouble2 */
	.trouble2{
		position: relative;
		margin: 5% 0 3%;
		padding-top: 35%;
		padding-bottom: 30%;
		background: url(https://hairsalon-kawamura.eleven-sample.com/wp-content/uploads/2025/02/trouble_2_bg.png) no-repeat;
		background-size: 100% auto;
	}
	.trouble2 ul li{
		margin: 0 auto;
	}
	.trouble2 ul li:first-child{
		width: 33%;
		margin: 0 0 0 42%;
	}
	.trouble2 ul li:nth-child(2){
		width: 35%;
		margin: -2% 0 0 61%;
	}
	.trouble2 ul li:nth-child(3){
		width: 36%;
		margin: -8% 0 0 5%;
	}
	.trouble2 ul li:last-child{
		width: 32%;
		margin: -15% 0 0 45%;
	}

/* trouble3 */
	.trouble3{
		margin-top: 0;
	}
	.trouble3 .effect-shake{
		width: 40%;
		margin: 0 auto 5%;
	}
	.trouble3 .effect-shake + div{
		width: 93%;
		margin: 0 auto;
	}

/* what */
	.what{
		padding: 12% 0 0;
		background: url(../img/neqst/what_bg.png);
		background-size: cover;
	}

/* 不要effect */
	.effect{
		margin: 5% auto 10%;
	}
	.effect h2{
		margin-bottom: 2%;
	}
	.effect div img{
		width: 98%;
	}

/* point */
	.point{
		padding: 10% 0;
		background: #D0E4F9;
	}
	.point h2{
		width: 90%;
		margin: 0 auto 5%;
	}
	.point ul{
		width: 95%;
		margin: 0 auto;
	}

/* features */
	.features div{
		width: 90%;
		margin: 0 auto;
	}

/* process */
	.process{
		margin-top: 20%;
		padding: 10% 0;
		background: url(../img/neqst/process_bg.png) repeat;
		background-size: 14px auto;
	}
	.process > div:first-child{
		width: 90%;
		margin: 0 auto 5%;
	}
	.process > div:last-child{
		position: relative;
	}
	.process > div:last-child .effect-shake{
		position: absolute;
		top: 35%;
		left: 35%;
		width: 30%;
	}

/* push */
	.push h2{
		width: 80%;
		margin: 0 auto 5%;
	}

/* 不要flow */
	.flow{
		position: relative;
		margin: 20% 0 10%;
		padding: 10% 0;
		background: #b4ffff;
	}
	.flow h2{
		position: absolute;
		top: -37px;
		left: 10%;
		width: 80%;
	}
	.flow ul li{
		margin: 5% 0;
	}
	.flow ul li:nth-child(odd) img{
		width: 84%;
	}
	.flow ul li:nth-child(even) img{
		width: 85%;
	}

/* 不要movie */
	.movie h2{
		width: 65%;
		margin: 0 auto;
	}
	.movie div{
		width: 80%;
		margin: 5% auto;
	}

/* voice */
	.voice{
		position: relative;
		margin: 40% 0 10%;
		padding: 10% 0;
		background: #D0E4F9;
	}
	.voice h2{
		position: absolute;
		top: -40px;
		left: 23.5%;
		width: 53%;
	}
	.voice ul li img{
		width: 91%;
	}

/* qa */
	.qa{
		margin: 20% 0;
	}
	.qa h2{
		width: 73%;
		margin: 0 auto 5%;
	}
	.qa ul li{
		width: 90%;
		margin: 3% auto;
		border: 1px solid #ddd;
		-moz-box-shadow: 2px 2px 5px #ddd;
		-webkit-box-shadow: 2px 2px 5px #ddd;
		box-shadow: 2px 2px 5px #ddd;
	}
	.qa ul li h4{
		padding: 2.5% 2% 2%;
		background: #AFE3FF;
		color: #005BF3;
		font-weight: bold;
		font-size: 1.2em;
	}
	.qa ul li p{
		padding: 1.7% 2% 2%;
		line-height: 1.3;
	}

/* greeting */
	.greeting{
		position: relative;
		margin: 20% 0 10%;
		padding: 15% 0;
		background: #E0B1EF;
	}
	.greeting h2{
		position: absolute;
		top: -37px;
		left: 28.5%;
		width: 43%;
	}
	.greeting div{
		width: 90%;
		margin: 0 auto;
		padding: 3% 5% 2%;
		background: #fff;
		-webkit-box-shadow: 0px 0px 5px #707099;
				box-shadow: 0px 0px 5px #707099;
	}
	.greeting div p{
		line-height: 2.6em;
		background-image: linear-gradient(transparent 98%, #ccc 2%);
		background-size: 100% 2.57em;
		padding-bottom: 1px;
		color: #000;
		font-size: 1.2em;
	}
	.greeting div p.rep_name{
		background: none;
		text-align: right;
	}

/* info */
	.info{
		position: relative;
		margin: 20% 0 10%;
		padding: 10% 0;
		background: #D0E4F9;
	}
	.info h2{
		position: absolute;
		top: -40px;
		left: 30%;
		width: 40%;
	}
	.info h2 + div{
		margin: 5% 0 7%;
	}
	.info h2 + div img{
		width: 15%;
	}
.info .slider {
    padding: 5%;
    background: #ABC7F8;
    width: 90%;
    margin: 0 auto;
}
	.info .slider > div{
		width: 87%;
		margin: 0 auto;
	}
	.metaslider .flexslider .flex-direction-nav li a{
		height: 36px !important;
		opacity: 1.0 !important;
		background-image: url(../img/neqst/bg_direction_nav.png) !important;
	}
	.metaslider .flexslider .flex-direction-nav li a.flex-prev{
		left: -10%;
	}
	.metaslider .flexslider .flex-direction-nav li a.flex-next{
		right: -10%;
	}
div#metaslider_45>ul>li>img {
    width: 90%;
    margin: 0 auto;
}
	.info_detail{
		margin-bottom: 2%;
		padding: 5% 5% 0;
	}
	.info_detail h3{
		font-size: 1.5em;
		line-height: 1.8;
	}
	.info_detail .tel{
		position: relative;
		margin-top: 3%;
		padding-left: 16%;
	}
	.info_detail .tel span{
		position: absolute;
		display: inline-block;
		top: 0;
		left: 0;
		width: 14%;
	}
	.info_detail .tel a{
		font-size: 2.4em;
		font-weight: bold;
		line-height: 1.2;
		letter-spacing: -0.01em;
		text-decoration: none;
	}

	.google_map{
		width: 90%;
		margin: 0 auto;
		border: 2px solid #ddd;
	}
	address{
		width: 90%;
		margin: 2% auto 0;
		line-height: 1.5;
	}

/* form */
	.contact_form{
		padding-top: 10%;
	}
	.contact_form h1{
		width: 48%;
		margin: 0 auto 5%;
	}
	.contact_form dl{
		padding: 0 4%;
	}
	.contact_form dt{
	}
	.contact_form dt img{
		display: inline;
		width: auto;
		height: 13px;
		margin-bottom: 1%;
	}
	.contact_form dt:first-child img{
		height: 15px;
	}
	.contact_form input, .contact_form select, .contact_form textarea{
		border: none;
		background: #ffe6e2;
	}

	.contact_form input:placeholder-shown,
	.contact_form input::-webkit-input-placeholder, .contact_form textarea:placeholder-shown,
	.contact_form textarea:placeholder-shown::-webkit-input-placeholder,
	.contact_form select{
		font-size: 1.1em;
		color: #afafaf;
	}
	.contact_form dt.required::after{
		position: relative;
		top: -2px;
		border-radius: 3px;
		background: #ff7383;
		color: #fff;
	}
	.contact_form dt span{
		margin-left: 10px;
		font-size: 0.8em;
		color: red;
	}

	.contact_form dd.dd-s{
		width: 40%;
	}
	.contact_form dd.dd-s.form_name{
		display: inline-block;
	}
	.contact_form dd.dd-ss select{
		display: inline;
		width: 15%;
		height: 2em;
		margin-left: 5px;
		padding: 0 .4em;
		line-height: 2em;
	}
	.contact_form dl + p{
		padding: 1% 5%;
		color: red;
		font-size: 0.9em;
		line-height: 1.2;
	}

	.contact_form p.submit_btn{
		text-align: center;
	}
	.contact_form input[type="submit"]{
		display: inline-block;
		width: 60%;
		background: #0077F3;
		border-radius: 3px;
		color: #fff;
		font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGP明朝B", serif, Arial;
		font-feature-settings : "pkna";
	}
	.contact_form input[type="radio"]{
		transform: scale(1.5);
	}
	.contact_form input[type="radio"] + span{
		position: relative;
		top: 2px;
		font-size: 1.2em;
	}


@media screen and (min-width: 769px) {
	main.pc {
		display: block;
		max-width: none;
	}
	main.sp {
		display: none;
	}
	header.flex.sp {
		display: none;
	}
	header.flex.pc {
		display: block;
	}
	header h1 {
		width: 18%;
		margin-left: 42%;
	}

	header{
		padding: 30px 5% 25px;
	}
	header .sns {
    width: 200px;
	}
	.top_img {
		border-bottom: 3px solid #a2efff;
	}
	.flow h2, .voice h2, .greeting h2, .info h2{
		top: -80px;
	}
	.qa ul li h4{
		font-size: 1.5em;
	}
	.metaslider .flexslider .flex-direction-nav li a{
		top: 48%;
		height: 65px !important;
		background-size: 100px;
	}
	.contact_section {
		display: flex;
		width: 90%;
		margin: 0 auto;
	}
	.trouble {
		position: relative;
		margin-bottom: 0;
		padding-top: 100%;
		padding-bottom: 25%;
		background: url(https://hairsalon-kawamura.eleven-sample.com/wp-content/uploads/2025/02/pc_trouble_bg.png) no-repeat;
		background-size: 100% auto;
		margin: 0;
	}
	.trouble .effect-shake {
		position: absolute;
		top: 0;
		left: 5%;
		width: 20%;
	}
	.trouble {
		position: relative;
		margin-bottom: 0;
		padding-top: 40%;
		padding-bottom: 5%;
		background: url(https://hairsalon-kawamura.eleven-sample.com/wp-content/uploads/2025/02/pc_trouble_bg.png) no-repeat;
		background-size: 100% auto;
		margin: 0 0 2%;
	}
	.trouble ul li:first-child {
		width: 70%;
	}
	.trouble ul li:nth-child(2) {
		width: 70%;
	}
	.trouble ul li:last-child {
		width: 25%;
	}
	.trouble2 {
		position: relative;
		margin: 0% 0 3%;
		padding-top: 22%;
		padding-bottom: 30%;
		background: url(https://hairsalon-kawamura.eleven-sample.com/wp-content/uploads/2025/02/pc_trouble_2_bg.png) no-repeat;
		background-size: 100% auto;
	}
	.trouble2 ul li:first-child {
		width: 21%;
		margin: 0 0 0 52%;
	}
	.trouble2 ul li:nth-child(2) {
		width: 24%;
		margin: 0% 0 0 70%;
	}
	.trouble2 ul li:nth-child(3) {
		width: 24%;
		margin: -8% 0 0 15%;
	}
	.trouble2 ul li:last-child {
		width: 22%;
		margin: -10% 0 0 48%;
	}
	.trouble3 .effect-shake {
		margin: 0 auto 3%;
		width: 25%;
	}
	.trouble3 .effect-shake + div {
		width: 80%;
	}
	section.what>div {
		width: 85%;
		margin: 0 auto;
		padding-bottom: 8%;
	}
	section.point>h2 {
		width: 85%;
	}
	section.point>ul>li {
		width: 90%;
		margin: 0 auto;
	}
	.process_table {
		width: 90%;
		margin: 0 auto;
	}
	.process > div:last-child .effect-shake {
		position: absolute;
		top: 36%;
		left: 42%;
		width: 16%;
	}
	.push_table {
		width: 85%;
		margin: 0 auto;
	}
	section.voice {
		margin: 15% 0 10%;
	}
	.voice h2 {
		width: 32%;
		top: -70px;
		left: 35%;
	}
	.voice ul li img {
		width: 90%;
		margin: 0 auto 3%;
	}
	.qa h2 {
		width: 40%;
	}
	.qa ul li p {
		font-size: 1.8rem;
	}
	.greeting h2 {
		width: 26%;
		left: 36%;
		top: -70px;
	}
	.greeting {
		padding: 7% 0;
		margin: 10% 0;
	}
	.greeting div p {
		font-size: 1.8rem;
	}
	.qa {
		margin: 10% 0 15%;
	}
	.info h2 {
		width: 25%;
		left: 37%;
	}
	.info h2 + div img {
		width: 15%;
	}
	.pc_info_images {
		display: flex;
		width: 90%;
		margin: 0 auto;
	}
	.info .slider {
		width: 50%;
	}
	.pc_info_map {
		width: 50%;
	}
	address {
		font-size: 1.6rem;
	}
	.info_detail {
		display: flex;
		padding: 2% 5%;
	}
	.detail_text {
		width: 50%;
		font-size: 1.8rem;
	}
	.info_detail .tel {
		padding-left: 70px;
		width: 50%;
		margin: 0;
		padding-top: 1%;
	}
	.info_detail .tel span {
		width: 65px;
		margin: 1% 0 2%;
	}
	.info_detail .tel a {
		font-size: 3em;
	}
	.greeting div p{
		background-size: 100% 2.55em;
	}
	.fix_foot .pagetop{
		width: 100px;
		top: -110px;
	}
	.fix_foot div {
    max-width: none;
	}
	.fix_foot div div.flex {
    display: none;
	}
	footer {
		padding: 3%;
	}
	footer .f_logo {
		width: 20%;
		margin: 0 auto 3%;
	}
}