@charset "utf-8";

/*-------------------------------------------------------------------
　common
-------------------------------------------------------------------*/
#wrapper{
	width:100%;
	margin:0 0 0 0;
	overflow: hidden;
	margin-top: -100px;
	padding-top: 100px;
}

#wrapper img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
}

#wrapper a:hover img{
	opacity:0.8;
}

section{
	margin-top: -100px;
	padding-top: 100px;
}

.MG-T20{margin-top: 0px}

/* ---- tablet ------------- */
@media only screen and (max-width:900px){
.MG-T20{margin-top: 20px}
}

/*-------------------------------------------------------------------
　title
-------------------------------------------------------------------*/
.mainTit{
	color: #38AA86;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}

.mainTit span{
	font-family: 'Pacifico', cursive;
	font-size: 100px;
	display: block;
	line-height: 1.3;
}

/* ---- pc 1500px ---------- */
@media only screen and (max-width:1500px){
.mainTit span{font-size: 80px;}
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.mainTit span{font-size: 70px;}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.mainTit span{font-size: 45px;}
}



/*-------------------------------------------------------------------
　about
-------------------------------------------------------------------*/
#about_wrap{
	width: 100%;
	background: #F3F1F1;
}

#about{
	width: 1200px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 180px 0 120px;
}

#about_Tit{width: 450px;}

#about_Tit h2{
	color: #38AA86;
	font-weight: bold;
	margin-bottom: 10px;
}

#about_Tit h3{
	font-size: 35px;
	font-weight: bold;
	line-height: 1.5;
}

#about_Det{
	width: 650px;
}

.loop_slide{
	position: relative;
	width: 100%;
	height: 460px;
	background: url(../images/loop_slide_pc.jpg) repeat-x 0 0;
	overflow: hidden;
	-moz-animation: slide 50s linear infinite;
	animation: slide 50s linear infinite;
}

/*-- アニメーション ---*/
@keyframes slide {
0% {background-position: 0 0;}
100% {background-position: -1600px 0;}
}


/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
#about{width: 90%;}
#about_Tit{width: 50%;}
#about_Det{width: 50%;}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
#about{
	flex-direction: column;
	padding: 100px 0 60px;	
}

#about_Tit{width: 100%; margin-bottom: 25px;}
#about_Det{width: 100%;}

.loop_slide{
	width: 100%;
	height: 350px;
	background: url(../images/loop_slide1024.jpg) repeat-x 0 0;
}

/*-- アニメーション ---*/
@keyframes slide {
0% {background-position: 0 0;}
100% {background-position: -1217px 0;}
}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
#about{
	margin: 0 auto;
	padding: 80px 0 40px;	
}

#about_Tit h3{font-size: 30px;}

.loop_slide{
	width: 100%;
	height: 260px;
	background: url(../images/loop_slide767.jpg) repeat-x 0 0;
}

/*-- アニメーション ---*/
@keyframes slide {
0% {background-position: 0 0;}
100% {background-position: -904px 0;}
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
#about{
	width: 85%;
	margin: 0 auto;
	padding: 60px 0 40px;	
}

#about_Tit h3{font-size: 25px;}

.loop_slide{
	width: 100%;
	height: 220px;
	background: url(../images/loop_slide480.jpg) repeat-x 0 0;
}

/*-- アニメーション ---*/
@keyframes slide {
0% {background-position: 0 0;}
100% {background-position: -765px 0;}
}
}


/*-------------------------------------------------------------------
　Reform
-------------------------------------------------------------------*/
.serviceWrap{
	width: 100%;
	margin: 180px 0 0 0;
}

.serBg{background: url("../images/service_bg.jpg") no-repeat 0 0;}
.serBg02{background: url("../images/service02_bg.jpg") no-repeat 0 0;}

.serviceWrap.bg_detail{
	-webkit-background-size: 100% auto;
	-o-background-size: 100% auto;
	background-size: 100% auto;
}

.serviceWrap.bg_detail:before {
  content:"";
  display: block;
  padding-top:25%;
}

.serviceWrap.bg_detail .serviceArea{
	width:90%;
	margin:0 auto 0 10%;
	background-color:#FFF;
	padding:80px 70px 0;
}

.serMain{
	width: 1200px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}

.serTit{width: 450px;}

.serTit h3{
	color: #38AA86;
	font-weight: bold;
}

.serTit h3 span{
	font-family: 'Pacifico', cursive;
	font-size: 100px;
	display: block;
	font-weight: normal;
	line-height: 1.3;
}

.serDet{width: 650px;}

.serList{
	width: 1200px;
	display: flex;
	justify-content: space-between;
	margin: 80px auto 0;
}

.serBox{width: 30%;}

.serPh{
	width: 80%;
	margin: 0 auto 25px;
}

.serPh img{
	border-radius: 50%;
	box-shadow: 12px 7px 0px 0px rgba(204, 232, 223, 1);
}

.serBox h3{
	font-size: 25px;
	font-weight: bold;
	color: #38AA86;
	margin-bottom: 10px;
	text-align: center;
}

/* ---- pc 1500px ---------- */
@media only screen and (max-width:1500px){
.serviceWrap.bg_detail .serviceArea{
	width:95%;
	margin:0 auto 0 5%;
	padding:80px 70px 0;
}

.serMain{
	width: 100%;
	margin: 0 auto;
}

.serTit{width: 40%;}
.serDet{width: 57%;}

.serTit h3 span{
	font-size: 80px;
	line-height: 1.3;
}

.serList{
	width: 100%;
	margin: 80px auto 0;
}
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.serTit h3 span{
	font-size: 70px;
	line-height: 1.3;
}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.serviceWrap{
	margin: 100px 0 0 0;
}

.serviceWrap.bg_detail .serviceArea{
	width:95%;
	margin:0 auto 0 5%;
	padding:80px 5% 0 5%;
}

.serMain{
	width: 100%;
	flex-direction: column;
}

.serTit{
	width: 100%;
	text-align: center;
	margin-bottom: 30px;
}

.serDet{width: 100%;}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.serviceWrap{margin: 80px 0 0 0;}
.serBg{background: url("../images/service_bg767.jpg") no-repeat 0 0;}
.serBg02{background: url("../images/service02_bg767.jpg") no-repeat 0 0;}

.serviceWrap.bg_detail:before {
  content:"";
  display: block;
  padding-top:48%;
}

.serviceWrap.bg_detail .serviceArea{
	width:95%;
	margin:0 auto 0 5%;
	padding:50px 5% 0 5%;
}

.serList{
	margin: 80px auto 0;
	flex-direction: column;
}

.serBox{
	width: 100%;
	margin-bottom: 50px;
}

.serBox:last-child{margin-bottom: 0;}
.serPh{width: 70%;}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.serviceWrap{margin: 60px 0 0 0;}
.serMain{width: 95%;}

.serList{
	width: 95%;
	margin: 50px auto 0;
}

.serTit h3 span{
	font-size: 45px;
	line-height: 1.3;
}

.serBox h3{
	font-size: 22px;
	margin-bottom: 10px;
}
}

/*-------------------------------------------------------------------
　お問い合わせ
-------------------------------------------------------------------*/
.contact_wrap{
	width: 100%;
	margin: 180px 0 0;
	padding: 180px 0;
	background: #F0FAF8;
}

#cont_tel_btn{
	font-size: 85px;
	width: 1000px;
	margin: 0 auto 100px;
	text-align: center;
	margin-top: 30px;
}

#cont_tel_btn span{
	font-size: 25px;
	margin-bottom: 15px;
	display: block;
}

#cont_tel_btn a{
	font-weight: bold;
	display: block;
	width: 100%;
	margin: 0 auto;
	color: #FFF;
	background: #38AA86;
	padding: 45px 0 35px;
	text-decoration: none;
	line-height: 1;
	border-radius: 20px;
}

#cont_tel_btn a:hover{
	text-decoration: none;
	background: #319777;
}

.contTx{
	text-align: center;
}

.formWrap{
	width: 1200px;
	margin: 50px auto 0;
	padding: 30px 70px 50px;
	background: #FFF;
	border-radius: 20px;
	box-sizing: border-box;
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.formWrap{
	width: 90%;
	margin: 50px auto 0;
	padding: 30px 70px 50px;
}

#cont_tel_btn{
	width: 80%;
	margin: 30px auto 100px;
	font-size: 75px;
}

#cont_tel_btn span{
	font-size: 25px;
	margin-bottom: 15px;
}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.contact_wrap{
	margin: 100px 0 0;
	padding: 100px 0;
}

#cont_tel_btn{
	width: 90%;
	font-size: 65px;
	margin-top: 30px;
}

#cont_tel_btn span{
	font-size: 20px;
	margin-bottom: 15px;
}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.contact_wrap{
	margin: 80px 0 0;
	padding: 80px 0;
}

#cont_tel_btn{
	font-size: 45px;
	margin: 30px auto 80px;
}

#cont_tel_btn span{
	font-size: 20px;
	margin-bottom: 15px;
	line-height: 1.5;
}

#cont_tel_btn a{
	padding: 25px 0 30px;
}

.contTx{
	width: 90%;
	margin: 0 auto;
	text-align: left;
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.formWrap{
	width: 85%;
	margin: 60px auto 0;
	padding: 10px 30px 20px;
}

.contact_wrap{
	margin: 60px 0 0;
	padding: 60px 0;
}

#cont_tel_btn{
	width: 85%;
	font-size: 30px;
	margin: 30px auto 60px;
}

#cont_tel_btn span{
	font-size: 16px;
	margin-bottom: 15px;
}

#cont_tel_btn a{
	padding: 15px 0 20px;
}

.contTx{
	width: 85%;
}
}


/*-------------------------------------------------------------------
　company
-------------------------------------------------------------------*/
.company{
	width: 1200px;
	margin: 180px auto;
}

.comTB {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	box-sizing: border-box;
	margin-top: 50px;
}

.comTB th {
	width: 250px;
	font-weight: bold;
	color: #38AA86;
	padding: 15px 15px 15px 50px;
	border-width: 1px 1px 1px 0px;
	border-style: solid dotted solid solid;
	border-color: #B2B2B2;
	background: #F0FAF8;
	text-align: left;
	box-sizing: border-box;
}

.comTB td {
	padding: 15px 15px 15px 50px;
	border-width:1px 0px 1px 0px;
	border-style:solid;
	border-color: #B2B2B2;
	text-align:left;
	box-sizing: border-box;
}

ul.comList{
	margin-left: 30px;
	padding: 0;
}

ul.comList li{
	list-style-type: disc;
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.company{width: 90%;}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.company{
	width: 90%;
	margin: 100px auto;
}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.company{
	width: 90%;
	margin: 80px auto;
}

.comTB {
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #48C2A9;
}

.comTB th {
	display: block;
	width: 100%;
	border-width: 0px 0px 0px 0px;
	padding: 15px 15px 15px 20px;
}

.comTB td {
	display: block;
	padding: 15px 20px 15px 20px;
	border-width:0px 0px 1px 0px;
	border-color: #48C2A9;
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.company{
	width: 85%;
	margin: 60px auto;
}

.comTB {margin-top: 30px;}
}


/*-------------------------------------------------------------------
　thsnks
-------------------------------------------------------------------*/
.thanks_wrap{
	width: 1000px;
	margin: 100px auto;
}

.thanks_wrap h3{
	font-size: 30px;
	font-weight: bold;
	color: #38AA86;
	margin-bottom: 20px;
	text-align: center;
}

.thanksTB {
	width: 100%;
	border: 1px solid #B2B2B2;
	border-collapse: collapse;
	border-spacing: 0;
	margin:0 auto 0;
	box-sizing: border-box;
}

.thanksTB th {
	width: 240px;
	font-weight: bold;
	color: #38AA86;
	padding: 15px 15px 15px 15px;
	border-width: 1px 1px 1px 0px;
	border-style: solid;
	border-color: #B2B2B2;
	background-color: #F0FAF8;
	text-align: center;
	box-sizing: border-box;
}

.thanksTB td {
	padding: 15px 30px 15px 30px;
	border-width:1px 0px 1px 0px;
	border-style:solid;
	border-color: #B2B2B2;
	background: #FFF;
	text-align:left;
	box-sizing: border-box;
}

/* ---- pc 1200px ---------- */
@media only screen and (max-width:1200px){
.thanks_wrap{
	width: 90%;
	margin: 100px auto;
}
}

/* ---- tablet ------------- */
@media only screen and (max-width:1024px){
.thanks_wrap{
	width: 90%;
	margin: 60px auto 80px;
}
}

/* ---- sp 767 ------------- */
@media only screen and (max-width:767px){
.thanksTB {
	border: 0px solid #707070;
	border-top:1px solid #48C2A9;
}

.thanksTB th {
	display: block;
	width: 100%;
	border-width: 0px 0px 0px 0px;
	padding: 15px 15px 15px 20px;
	text-align: left;
}

.thanksTB td {
	display: block;
	padding: 15px 20px 15px 20px;
	border-width:0px 0px 1px 0px;
	border-color: #48C2A9;
}
}

/* ---- sp 480 ------------- */
@media only screen and (max-width:480px){
.thanks_wrap{
	width: 85%;
	margin: 40px auto 60px;
}

.thanks_wrap h3{font-size: 25px;}
}