@charset "UTF-8";
body{
	background: #ceffff;
	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-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;
	}
	@keyframes anim_s {
		50% {
			transform: rotate(-10deg);
		}
		100% {
			transform: rotate(10deg);
		}
	}


/* 共通 */
	main{
		width: 100%;
		margin: 0 auto;
		padding-bottom: 10%;
		background: #fff;
	}
	main img{
		display: block;
		margin: 0 auto;
	}

	header{
		padding: 4% 5% 3%;
		background: #b4ffff;
	}
	main.pc {
		display: none;
	}


	header.flex.pc {
		display: none;
	}

	header h1{
		width: 15%;
	}
	header .sns{
		width: 40%;
	}
	header .sns ul li{
	    margin: 5% 0 0;
		width: 30%;
	}

	footer{
		padding: 10% 0;
	}
	footer .f_logo{
		width: 20%;
		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/revcella/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{
		padding-top: 35%;
		padding-bottom: 23%;
		background: url(../img/revcella/trouble_bg.png) no-repeat;
		background-size: 100% auto;
	}
	.trouble ul li{
		margin: 0 auto;
	}
	.trouble ul li:first-child{
		width: 72%;
	}
	.trouble ul li:nth-child(2){
		width: 96%;
	}
	.trouble ul li:nth-child(3){
		width: 97%;
	}
	.trouble ul li:last-child{
		width: 75%;
	}

/* what */
	.what h2{
		margin: 0 auto 3%;
		width: 82%;
	}
	.what div{
		margin: 5% auto;
	}

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

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

/* probe */
	.probe{
		padding: 10% 0;
		background: url(../img/revcella/probe_bg.png) repeat;
		background-size: 14px auto;
	}
	.probe div:first-child{
		margin-bottom: 5%;
	}
	.probe div:first-child img{
		width: 94%;
	}
	.probe div:nth-child(2) img{
		width: 29%;
	}
	.probe div:last-child{
		margin-top: 3%;
	}
	.probe div:last-child img{
		width: 91%;
	}

/* 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: 20% 0 10%;
		padding: 10% 0;
		background: #b4ffff;
	}
	.voice h2{
		position: absolute;
		top: -40px;
		left: 23.5%;
		width: 53%;
	}
	.voice ul li img{
		width: 91%;
	}

/* qa */
	.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: #b4ffff;
		color: #009191;
		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: 10% 0;
		background: #c3bfff;
	}
	.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: #b4ffff;
	}
	.info h2{
		position: absolute;
		top: -40px;
		left: 30%;
		width: 40%;
	}
	.info h2 + div{
		margin: 5% 0 7%;
	}
	.info h2 + div img{
		width: 30%;
	}
	.info .slider{
		padding: 5%;
		background: #d2ffff;
	}
	.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/revcella/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%;
	}
	.info_detail{
		margin-bottom: 2%;
		padding: 5% 5% 0;
	}
	.info_detail h3 {
    font-size: 1.4em;
    line-height: 1.2;
    margin: 0 0 3%;
}
	.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: 3em;
		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 5%;
	}
	.contact_form dt{
	}
	.contact_form dt img{
		display: inline;
		width: auto;
		height: 13px;
		margin-bottom: 1%;
	}
	.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: #009191;
		border-radius: 3px;
		color: #fff;
		font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGP明朝B", serif, Arial;
		font-feature-settings : "pkna";
	}


@media screen and (min-width: 769px) {
	header{
		padding: 30px 5% 25px;
	}
	header h1 {
		max-width: 250px;
		margin: 0 auto;
	}
	header.flex.pc {
		display: block;
	}
	header.flex.sp {
		display: none;
	}
	header .sns {
		width: 250px;
		padding: 3% 0 0;
	}
	main{
		font-size: 16px;
	}
	main.pc {
		display: block;
		padding-bottom: 5%;
	}
	main.sp {
		display: none;
	}
	.top_img {
		border-bottom: 3px solid #b4ffff;
	}
	.contact_01, .contact_02 {
		width: 90%;
	}
	section.trouble {
		background: url(../img/revcella/pc_trouble_bg.png) no-repeat;
		background-size: 100%;
		padding-top: 20%;
		padding-bottom: 24%;
	}
	section.effect {
		padding: 0 3%;
	}
	.effect h2 {
		width: 75%;
		margin: 0 auto 2%;
	}
	.trouble ul li:first-child {
    width: 60%;
}
.trouble ul li:nth-child(2) {
    width: 85%;
}
.trouble ul li:nth-child(3) {
    width: 85%;
}
.trouble ul li:last-child {
    width: 60%;
}

	.point h2 {
		width: 70%;
	}
	ul.point_section {
		display: flex;
	}
	ul.point_section>li {
		width: 50%;
	}
	.probe div:first-child img {
		width: 85%;
	}
	.probe div:nth-child(2) img {
		width: 20%;
	}
	.probe div:last-child img {
		width: 80%;
	}
	.flow {
		padding: 6% 0;
	}
	.flow h2 {
		width: 60%;
		left: 20%;
	}
	.movie h2 {
		width: 45%;
	}
	.voice h2 {
		width: 40%;
		left: 32%;
	}
	.voice ul li img {
		width: 82%;
	}
	.qa h2 {
		width: 48%;
	}
	.qa ul li {
		width: 82%;
	}
	.greeting h2 {
		width: 30%;
		left: 36%;
	}
	.greeting div {
		width: 82%;
	}
	.info h2 {
		width: 30%;
		left: 36%;
	}
	.info h2 + div img {
		width: 16%;
	}
	.info_section {
		display: flex;
		width: 94%;
		margin: 0 auto;
	}
	.info_detail {
		width: 50%;
		padding: 0 1%;
	}
	.info_map {
		width: 50%;
		padding: 0 1%;
	}
	.tel.serif {
		display: flex;
	}
	.tel.serif>span {
		display: block;
		width: 15%;
	}
	.tel.serif>a {
		display: block;
		width: 85%;
		font-size: 5rem;
		text-decoration: none;
		line-height: 1.2;
	}
	.info .slider {
		margin: 0 0 3%;
	}
	.info_detail h3 {
		font-size: 2.5rem;
		line-height: 1.5;
	}
	.info_detail>p {
		font-size: 2rem;
	}
	.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;
	}
	.info_detail .tel{
		padding-left: 80px;
	}
	.info_detail .tel span{
		width: 65px;
		margin: -0.5% 0 2%;
	}
	.movie div{
		height: 380px;
	}
	.movie div iframe{
		height: 100%;
	}
	.greeting div p{
		background-size: 100% 2.55em;
	}
	footer {
		padding: 3% 0;
	}
	footer .f_logo {
		width: 15%;
		margin: 0 auto 3%;
	}
	.fix_foot div {
		max-width: none;
	}
	.fix_foot>div>div.flex{
		display:none;
	}
	.fix_foot .pagetop {
		width: 100px;
		top: -110px;
		right: 15px;
	}
	footer p {
		font-size: 1.5rem;
	}
}