@charset "utf-8";

/*
Theme Name:fairny
Theme URI: https://fairny.co.jp/
Description: fairnyのテーマ
Version: 1.1
Author: fairny
Author URI: https://fairny.co.jp/
*/

html {
		height: 100%;
}

body {
	font-family: "Noto Sans Japanese", "Droid Sans", "游ゴシック", YuGothic,  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック";
	margin:0 auto;
	line-height: 1.6;
	height: 100%;
	background-color: #ffffff;
	position: relative;
	left: 0;	
	overflow-x: hidden;
	background-repeat: repeat,no-repeat,no-repeat;
	background-position: top left,center center,bottom center;
	background-attachment: fixed,fixed,fixed;
}

html>body {
	font-size: 75%;
}

* html table {
	font-size: 100%;
	line-height: 1.5;
}

input,textarea,select {
	font-size: 100%;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}

body,div,
h1,h2,h3,h4,h5,h6,
dl,dt,dd,ul,ol,li,
p,blockquote,pre,cite,code,caption,
form,fieldset,legend,input,textarea,select,option,label {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

img,
table{
	border: none;
}

li img,
dt img {vertical-align: bottom;
}

/* ========opacity======= */

a{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	  -o-transition: all 0.3s ease;
		 transition: all 0.3s ease;
}

a:hover img,
.logo a:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
}

/* ========clear======= */

.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	overflow: hidden;
}

.clearfix {
	display:inline-block;
}

* html .clearfix {
	height:1%;
}

.clearfix{
	display:block;
}


/* ======== アニメーション ======== */

/*----- フェードイン -----*/
.inviewfadeIn {
	opacity: 0;
	transition: .8s;
}
    
.fadeIn {
	opacity: 1.0;
}
 
/*----- 上へスライド -----*/
.inviewUp {
	transform: translate(0, 40px);
	-webkit-transform: translate(0, 40px);
	transition: .8s;
}
    
.Up {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}
 
/*----- ズームイン -----*/
.inviewzoomIn {
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	transition: .8s;
}
    
.zoomIn {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

/*----- フェードインしながら上へスライド -----*/
.inviewfadeInUp {
	opacity: 0;
	transform: translate(0, 60px);
	-webkit-transform: translate(0, 60px);
	transition: .8s;
}
    
.fadeInUp {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}
    
 /*----- フェードインしながら上へスライド -----*/
.inviewfadeInSide {
	opacity: 0;
	transform: translate(-120px, 0);
	-webkit-transform: translate(-120px, 0);
	transition: .8s;
}
    
.fadeInSide {
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
    }

.time1{
	transition: 1s;
}

.time2{
	transition: 1.5s;
}

.time3{
	transition: 2s;
}

.time4{
	transition: 2.5s;
}

/* ========LAYOUT======== */
		
#header{
	padding: 10px 0;
	background-color: rgba(255,255,255,0.6);
	width:100%;
	position: fixed;
	z-index: 999;
}

#main{
	overflow:hidden;
}

#footer{
	font-size: 16px;
	color: #fff;
	text-align: center;
	overflow:hidden;
	padding: 150px 0 10px;
}

/* ========header======== */

.logo{
	font-size:10px;
	text-align:center;
	margin:0 auto;
}

.logo a{
	display:block;
	margin:-5px auto ;
	float: none;
	width: 200px;
	height:50px;
	padding:0;
	background:url(images/logo.png);
	background-size:200px 50px;
}

#slide_menu{
	position: fixed;
	top: 0;
	left: -240px;
	width: 240px;
	height: 100%;
    background: #E87272;
}

#slide_menu ul{
    margin: 0;
    padding: 0;
}

#slide_menu li + li{
    border-top: solid 1px #f39191; 
}

#slide_menu li{
   border-bottom: solid 1px #d56767; 
    list-style: none;
}

#slide_menu li a{
    display: block;
    padding: 20px 0;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

#button{
    position: absolute;
    top: 0;
    width: 65px;
    height: 60px;
    outline: none;
    border: none;
	background: none;
    color: #fff;
    cursor: pointer;
}

#button span {
	position: absolute;
	left: 12px;
	width: 35px;
	height: 2px;
	background-color: #444;
	border-radius: 4px;
}
#button span:nth-of-type(1) {
	top: 16px;
}
#button span:nth-of-type(2) {
	top: 27px;
}
#button span:nth-of-type(3) {
	top: 38px;
}

/* ======== top ======== */

.top {
	display: table;
	width: 100%;
	height: 100%;
	position: relative;
	background: rgb(221,174,208);
	background: -webkit-linear-gradient(rgb(221,174,208) 0%, rgb(241,222,212) 50%, rgb(157,204,221) 100%);
	background: -o-linear-gradient(rgb(221,174,208) 0%, rgb(241,222,212) 50%, rgb(157,204,221) 100%);
	background: linear-gradient(rgb(221,174,208) 0%, rgb(241,222,212) 50%, rgb(157,204,221) 100%);
}

.top_image{
	width: 100%;
	height: 100%;
	background:   url(images/top.png) no-repeat center center;
	background-size:400px 325px;
}


/* ======== section ======== */

section{
	padding:150px 0;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

.section_width{
	margin: 0 auto;
	padding:0 30px;
	max-width:1000px;
}

#fairny{
	background: url(images/fairny.png) no-repeat center bottom;
}

#service{
	background: #fabe00
}

#contact{
	background: #ee9ca7;
	background: -webkit-linear-gradient(to left, #ee9ca7 , #ffdde1);
	background: linear-gradient(to left, #ee9ca7 , #ffdde1);
}

#contact{
	padding-bottom:0;	
}

#contact .section_width{
	max-width:700px;
}


.left{
	width: 50%;
	float: left;
}
.right{
	width: 50%;
	float: right;
}

/* ======== h ======== */

h2{
	font-family: 'Pridi', serif;
	font-size: 50px;
	text-align: center;
	position: relative;
	margin-bottom: 15px;
}

h2:before {
	content: '';
	position: absolute;
	bottom:0;
	display: inline-block;
	width: 120px;
	height: 4px;
	left: 50%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: black;
	border-radius: 2px;
}

h3{
	font-size: 14px;
	text-align: center;
	margin-bottom: 50px;}

h4{	
	text-align: center;
	font-size: 20px;
	margin-bottom: 15px;
	font-weight: bold;
}


/* ======== rinen ======== */

#fairny p{
	margin-bottom: 15px;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
}

/* ======== article ======== */

article{
	width:32%;
	float: left;
	padding:20px 0;
	margin-bottom:20px;
	margin-left:2%;
}

article:first-child{
	margin-left:0;
}

#service article:nth-child(4){
	margin-left:0;
}
	
article dl{
	text-align:center;
	margin-bottom: 1em;
	font-size:14px;
}

article dl dt{
	padding: 5px;
	margin-bottom: 5px;
	vertical-align: middle;
}
	
article dl dt img{
	margin:0 auto;
	width:100%;
	height:auto;
}

article dl dd{
	padding:0 10px;
	vertical-align:top;
}

article dl dd p:nth-of-type(1){
	padding-top:7px;
	font-weight:bold;
	text-align:center;
	line-height:1.2;
	font-size:20px;
	margin-bottom:10px;
}
	
article dl dd p:nth-of-type(2){
	text-align:left;
	font-size:13px;
	line-height:1.6;
	margin-bottom:10px;
}

/* ======== table ======== */

#company table{
	color:#444;
	font-size: 16px;
	position: relative;
	margin: 0 auto;
	border:none;}
	
#company table td:first-child{
	text-align: right;
	font-weight:bold;
	padding: 10px 50px 10px 0;
}
	
#company table td{
	text-align: left;
	font-weight:normal;
	padding: 10px 0;
	vertical-align:top;
}

/* ======== contact ======== */

.contact_table{
	width:100%;
	color:#444;
	line-height:1.6;
	font-size: 16px;
	position: relative;
	margin:50px 0 30px;
	border-collapse: collapse;
	border-spacing: 0;
}

.wpcf7-text{
   padding: 4px;
   width: 95%;
   color: #636063;
   font-size:16px;
}

.wpcf7-textarea{
   margin: 0;
   padding: 4px;
   width: 95%;
   height: 240px;
   font-size: 16px;
}

.your-name{
	width:190px;
}

.your-email{
	width:350px;
}

.all_contact input[type=submit]{
	display: inline-block;
	width: 200px;
	height: 54px;
	line-height: 54px;
	color: #fff;
	text-align: center;
	text-decoration:none;
	outline: none;
	position: relative;
	-webkit-transition: none;
	transition: none;
	border:none;
	background-color: #e54028;
	box-shadow: 0 3px 0 #b83f2d;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-webkit-appearance: none;
}

.all_contact input[type=submit]:hover{
	top: -4px;
	box-shadow: 0 7px 0 #b83f2d;
}

.contact_table td{
	padding: 20px 8px 20px 15px;
	text-align:left;
}

.contact_table td:first-child{
	font-weight:bold;
	vertical-align:top;
	padding:20px;
	text-align:left;
	color:#444;
}

.contact_table td:first-child span{
	position:relative;
	top:-5px;
	font-size:8px;
	color:#FF0000;
	
	
}

.contact_table select{
	width:200px;	
	display:block;
	margin:0;
	padding:5px 10px 5px 3px;
	font-size:14px;
	background:#ffffff;
	border:#ddd 1px solid;
}

input[type="submit"] {
	margin: 0 auto;
	text-align: center;
	font-size:18px;
	font-weight:bold;
	padding:15px 40px;
	color:#FFFFFF;
	background:#444;
	border:#444 1px solid;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;  
    border-radius:5px;
  -webkit-appearance: none;
	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease;
		 -o-transition: all 0.3s ease;
			transition: all 0.3s ease;
}


input[type="submit"]:hover{
	color:#000;
	background:#fff;
}

/* ======== スマホ用 ======== */

@media screen and (max-width: 480px) {
	
	h2{
		line-height: 35px;
		margin-bottom: 30px;
		}
	
	h2:before {
		bottom:-15px;
	}
	
	.top_image{
		width: 100%;
		height: 100%;
		background:   url(images/top.png) no-repeat center center;
		background-size:200px 162px;
		}
	
	section{
		padding:50px 0;
		}

	.section_width{
		margin: 0 auto;
		padding:0 10px;
		max-width:600px;
		}
	
	.time1,
	.time2,
	.time3,
	.time4{
		transition: 1s !important;
		}

	#fairny{
		background: url(images/fairny_sp.png) no-repeat center bottom;
		background-size: 440px 200px;
		padding-bottom: 190px;
		}
	
	#contact .section_width{
			max-width:600px;
		}

	.left,
	.right{
		width: 100%;
		float: none;
	}
	
	article{
		width:100%;
		float:none;
		padding:0;
		margin-bottom:20px;
		margin-left:0;
	}
	
	.time1,
	.time2,
	.time3,
	.time4{
		transition: 1s !important;
		}
	
	#company table{
		font-size: 14px;
		margin-bottom: 30px;
	}

	#company table td:first-child{
		text-align: right;
		font-weight:bold;
		width: 50px;
		padding: 10px 30px 10px 0;
	}

	.contact_table{
		width:95%;
		margin: 0 auto 30px;
		padding: 0;
		color:#444;
		line-height:1.6;
		font-size: 14px;
		position: relative;
	}

	.wpcf7-text{
		padding: 4px;
		width: 100%;
		color: #636063;
		font-size:16px;
	}

	.wpcf7-textarea{
		margin: 0;
		padding: 4px;
		width: 100%;
		height: 240px;
		font-size: 16px;
	}

	.your-name{
		width:150px;
	}

	input[type=submit]{
		margin: 0 auto;
		width: 100%;
		height: 54px;
	}

	.contact_table select{
		width: 100%;
		display:block;
		margin:0;
		padding:5px 10px 5px 3px;
		font-size:14px;
		background:#ffffff;
	}
	
	.contact_table td,th{
		width: 100%;
		padding: 0;
		margin: 0;
		text-align: left;
		display: block;
	}
	
	.contact_table  td:first-child{
		padding:10px 0 3px;
		margin: 0;
	}
	
	#fairny br{
		display: none;
	}
	
	#footer{
		padding: 50px 0 10px;
	}	
	
}