@charset "UTF-8";

/*
Theme Name: Morineko
Theme URI: https://smilehoumon2525.com/
Author: Smile Houmon 2525
Author URI: https://smilehoumon2525.com/
Description: Custom WordPress theme that reproduces the Morineko static site for Smile Houmon 2525.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.1
Version: 0.1.0
Text Domain: morineko
Tags: custom-theme, responsive-layout, accessibility-ready
Update URI: morineko-theme
*/


body {
	margin: 0;
	padding: 0;
	COLOR: #333;
	FONT-SIZE:20px;
font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: url(assets/image/body-back.webp) no-repeat left top,#fff;
}
@media only screen and (max-width: 1080px) {
body {
	background: url(assets/image/body-back.webp) no-repeat left top,url(assets/image/footer-back.webp) no-repeat center bottom/100%,#fff;
}
}

/*paddingとborderをwidthに含める*/
* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
max-width: 2000px;
	height:auto;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align: center;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height:0;
}

img{
	border:0;
}
@media screen and (max-width:1280px){
img{
max-width: 100%;
height: auto;
width :auto;
}
}

a:link,a:visited{
	outline:0;
	color:#f27e54;
}

a:hover{
	outline:0;
	color: #11ae78;
}

a:hover img {
opacity: 0.8;
  -ms-filter: "alpha(opacity=80)";
}

br.sp,br.spt,br.spt2,.nsp{
	display:inherit;
}
br.sm,br.smt,br.smm,br.smm2,br.spm,.nst,.nss,br.smm3{
	display:none;
}
@media only screen and (max-width: 1280px) {
br.sp,br.spm,br.smm,.smm,br.smm2,.nsp,.nss,.nsm,br.smm3{
	display:none;
}
br.spt,br.sm,br.smt,.nst{
	display:inherit;
}
}
@media only screen and (max-width: 640px) {
br.spt,br.smt,br.smm2,.nsp,.nst,.nsm,.nsm2,br.smm3{
	display:none;
}
br.spm,br.smm,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 480px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2,br.smm3{
	display:none;
}
br.spm,br.smm,br.smm2,.nss{
	display:inherit;
}
}
@media only screen and (max-width: 414px) {
br.spt,br.smt,.nsp,.nst,.nsm,br.spt2{
	display:none;
}
br.spm,br.smm,br.smm2,.nss,br.smm3{
	display:inherit;
}
}

/*ヘッダー
--------------------------------------------------------------------------*/
header {
clear: both;
float: left;
width: 100%;
height: auto;
/* position: sticky;  */
/* top: 0; */
z-index: 9999;
position: relative;
transition: transform 0.3s ease-out;
}
@media only screen and (max-width: 1280px) {
header {
margin: 0 0 100px;
}
}
@media only screen and (max-width: 1080px) {
header {
margin: 0 0 100px;
}
}
@media only screen and (max-width: 480px) {
header {
margin: 0 0 80px;
}
}

header.scrolled-header {
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    animation: slideDown 0.9s ease-out forwards;
}
@keyframes slideDown {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@media only screen and (max-width: 1440px) {
#menu-box {
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 10px 20% 10px 30%;
}
header.scrolled-header #menu-box {
    background: transparent;
}
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
header.slide-up-animation {
    animation: slideUp 0.3s ease-in forwards;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#logo{
float: left;
width: 30%;
height: 150px;
position: absolute;
top:10%;
left: 2%;
z-index: 10000;
text-align: left;
margin: 0;
padding: 20px 0 0 2%;
}
#logo img{
max-width: 100%;
}
@media only screen and (max-width: 1440px) {
#logo{
float: left;
width: 30%;
height: 150px;
position: absolute;
top:20%;
left: 2%;
z-index: 9999;
text-align: left;
margin: 0;
padding: 10px 0 0 1%;
}
#logo img{
max-width: 60%;
}
}
@media only screen and (max-width: 1280px) {
#logo{
padding: 20px 0 0 1%;
}
}
@media only screen and (max-width: 1080px) {
#logo{
width: 35%;
}
#logo img{
max-width: 65%;
}
}
@media only screen and (max-width: 835px) {
#logo{
width: 40%;
padding: 20px 0 0 1%;
}
}
@media only screen and (max-width: 640px) {
#logo{
width: 50%;
}
#logo img{
max-width:70%;
}
}
@media only screen and (max-width: 480px) {
#logo{
width: 60%;
padding:10px 0 0 1%;
}
#logo img{
max-width:75%;
}
}
@media only screen and (max-width: 414px) {
#logo{
width: 70%;
}
}

#banner{
position: absolute;
top:0;
right: 0;
width: auto;
z-index: 10000;
}
@media only screen and (max-width: 1440px) {
#banner{
position: absolute;
top:0;
right: 0;
width: auto;
}
}
@media only screen and (max-width: 1280px) {
#banner{
display: none;
width: 100%;
position: fixed;
top:auto;
right: auto;
bottom: 0;
}
}

#banner-bottom{
position: fixed;
bottom:3%;
right:2%;
width:20%;
z-index: 9990;
}
#banner-bottom img{
max-width: 100%;
}
#banner-bottom img.bno{
display: none;
}
@media only screen and (max-width: 1440px) {
#banner-bottom{
position: fixed;
bottom:3%;
right:2%;
width:25%;
z-index: 9990;
}
}
@media only screen and (max-width: 1080px) {
#banner-bottom{
position: fixed;
bottom:3%;
right:2%;
width:30%;
z-index: 9990;
}
}
@media only screen and (max-width: 835px) {
#banner-bottom{
position: fixed;
bottom:0;
right:0;
width:100%;
z-index: 9990;
border-top:1px solid #80dabb;
box-shadow: -2px 0 4px #80dabb;
}
#banner-bottom img{
max-width: 100%;
display: none;
}
#banner-bottom img.bno{
display: inherit;
}
}

#sm-tel{
display: none;
}

#menu-box {
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 50px 9% 50px 40%;
}
@media only screen and (max-width: 1440px) {
#menu-box {
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 50px 10% 50px 30%;
  text-align: left;
}
}

menu {
  clear: both;
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

menu ul {
  clear: both;
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
menu li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 17px;
  line-height: 150%;
  flex: 0 0 15%;
  flex: 1 0 auto;
}
menu li a:link,
menu li a:visited {
  height: auto;
  text-decoration: none;
  color: #111;
  font-weight: 400;
  line-height: 180%;
}
menu li a:hover {
  text-decoration: underline;
}
menu li a span{
color: #11ae78;
font-weight: 400;
font-size: 14px;
}
menu li.bno,menu li.bno2{
display: none;
}
@media only screen and (max-width: 1440px) {
menu li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 16px;
  line-height: 150%;
  flex: 0 0 15%;
  flex: 1 0 auto;
}
menu li a span{
color: #11ae78;
font-weight: 400;
font-size: 13px;
}
}

@media only screen and (max-width:1280px) {
#sm-tel{
display: inherit;
margin: 30px 0 0;
}
#sm-tel img{
float: left;
max-width: 50%;
}
#menu-box{
clear: both;
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: fixed;
top:0;
left:0;
z-index: 9999;
}
menu{
clear: both;
float: left;
width: 100%;
height: auto;
height: 100vh;
margin: 0;
padding: 0 5%;
text-align: center;
position: fixed;
top: 0;
background: rgba(255,255,255,1.0);
}
menu ul{
display:inherit;
clear: both;
float: left;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
text-align: center;
border-top:none;
background: rgba(255,255,255,1.0);
}
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #333;
padding: 25px 0 25px;
text-align: left;
line-height: 100%;
font-size: 17px;
border-bottom:1px solid #999;
font-weight:400;
background: #fff;
}
menu li a:hover{
text-decoration: underline;
}
menu li a:link span,menu li a:visited span{
font-size: 17px;
margin: 0 0 0 1em;
}
@media only screen and (max-width: 835px) {
#sm-tel{
display: inherit;
margin: 30px 0 0;
text-align: left;
}
#sm-tel img{
float: none;
max-width: 60%;
margin: 0 0 20px;
}
#sm-tel img.bno{
display: none;
}
}
@media only screen and (max-width: 640px) {
#sm-tel img{
float: none;
max-width: 70%;
margin: 0 0 20px;
}
}
@media only screen and (max-width: 480px) {
#sm-tel img{
float: none;
max-width: 80%;
margin: 0 0 20px;
}
menu{
clear: both;
float: left;
width: 100%;
height: auto;
height: 100vh;
margin: 0;
padding: 0 7%;
text-align: center;
position: fixed;
top: 0;
background: rgba(255,255,255,1.0);
}
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #333;
padding: 25px 0 25px;
text-align: left;
line-height: 100%;
font-size: 16px;
border-bottom:1px solid #999;
font-weight:400;
background: #fff;
}
menu li a:link span,menu li a:visited span{
font-size: 16px;
margin: 0 0 0 1em;
}
}
@media only screen and (max-width: 414px) {
#sm-tel img{
float: none;
max-width: 95%;
margin: 0 0 20px;
}
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #333;
padding: 25px 0 25px;
text-align: left;
line-height: 100%;
font-size: 15px;
border-bottom:1px solid #999;
font-weight:400;
background: #fff;
}
menu li a:link span,menu li a:visited span{
font-size: 15px;
margin: 0 0 0 1em;
}
}
menu li.bno,menu li.bno2{
display: inherit;
}
menu li.bno a:link,menu li.bno a:visited{
border-bottom:none;
}
menu li br{
display: none;
}
menu li.bno img{
max-width: 30%;
}
@media only screen and (max-width: 640px) {
menu li.bno img{
max-width: 40%;
margin: 0 0 30px;
}
}
@media only screen and (max-width: 480px) {
menu li.bno img{
max-width: 50%;
margin: 0 0 15px;
}
}
@media only screen and (max-width: 414px) {
menu li.bno img{
max-width: 55%;
}
}

/*==================================================
MENUがCLOSE
===================================*/

.openbtn4{
float: right;
  position: fixed;
  background:#11ae78;
  cursor: pointer;
    width: 90px;
    height:120px;
  border-radius: 0 0 0 10px;
  top:0px;
  right:0px;
  z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.openbtn4 span{
    display: inline-block;
    transition: all .4s;
position: absolute;
    /* left: 13px;*/
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }
.openbtn4 span:nth-of-type(1) {
margin-top: -35px;
}
.openbtn4 span:nth-of-type(2) {
margin-top: -20px;
}
.openbtn4 span:nth-of-type(3) {
margin-bottom: 5px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*/
  position: absolute;
  top:0px;
left: 50%; /*  */
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
}
@media only screen and (max-width: 640px) {
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*/
  position: absolute;
  top:0px;
left: 50%; /**/
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.9rem;
  text-transform: uppercase;
}
}

.openbtn4.active span:nth-of-type(1) {
/* top: 12px;  */
    /* left: 16px; */
   transform: translateY(8px) rotate(-45deg);
    width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
/* top: 24px; */
    /* left: 16px;*/
   transform: translateY(-8px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg) translateY(25px);
  font-size: 0.8rem;
}
.dnone {
display: none;
}

.dnone.panelactive {
display: inherit;
}
}

#photo {
    clear: both;
    float: left;
    width: 100%;
    height: 600px;
    margin: 0 0 0;
    padding: 0 0 0 20%;
    position: relative;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
}

@media only screen and (max-width: 1280px) {
#photo {
    clear: both;
    float: left;
    width: 100%;
    height: 550px;
    margin: 100px 0 0 0;
    padding: 0 0 0 10%;
    position: relative;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
}
}
@media only screen and (max-width: 1080px) {
#photo {
    clear: both;
    float: left;
    width: 100%;
    height: 500px;
    margin: 100px 0 0 0;
    padding: 0 0 0 10%;
    position: relative;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
}
}
@media only screen and (max-width: 835px) {
#photo {
    clear: both;
    float: left;
    width: 100%;
    height: 450px;
    margin: 100px 0 0 0;
    padding: 0 0 0 10%;
    position: relative;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
}
}
@media only screen and (max-width: 640px) {
#photo {
    clear: both;
    float: left;
    width: 100%;
    height: 450px;
    margin: 100px 0 0 0;
    padding: 0 0 0 10%;
    position: relative;
    overflow: hidden;
    border-radius: 20px 0 0 20px;
    padding-bottom: 49px;
}
}

#photo h1 {
    float: left;
    position: absolute;
    top: 55%;
    left: 5%;
    width: 100%;
    text-align: left;
    padding: 0;
    line-height: 250%;
    font-size: 35px;
    color: #fff;
    font-weight: 400;
    z-index: 3;
}
#photo h1 span {
    background: #6bc8a8;
    padding: 5px 15px;
}
@media only screen and (max-width: 1080px) {
#photo h1 {
    top: 55%;
    font-size: 35px;
}
}
@media only screen and (max-width: 835px) {
#photo h1 {
    top: 60%;
    font-size: 30px;
}
}
@media only screen and (max-width: 640px) {
#photo h1 {
    top: 60%;
    font-size: 25px;
}
}
@media only screen and (max-width: 480px) {
#photo h1 {
    top: 65%;
    font-size: 25px;
}
}

#sub-title,#sub-title.sub-faq,#sub-title.sub-privacy,#sub-title.sub-blog,#sub-title.sub-service,#sub-title.sub-rec,#sub-title.sub-mail {
    clear: both;
    width: 100%;
    height: 550px;
    margin: 0 0 100px;
    padding: 0;
    background: url(assets/image/photo-about.webp) no-repeat right center/80%;
    border-radius: 20px 0 0 20px;
    position: relative;
}
#sub-title.sub-faq{
background: url(assets/image/photo-faq.webp) no-repeat right center/80%;
}
#sub-title.sub-privacy{
background: url(assets/image/photo-privacy.webp) no-repeat right center/80%;
}
#sub-title.sub-blog{
background: url(assets/image/photo-blog.webp) no-repeat right center/80%;
}
#sub-title.sub-service{
background: url(assets/image/photo-service.webp) no-repeat right center/80%;
}
#sub-title.sub-rec{
background: url(assets/image/photo-rec.webp) no-repeat right center/80%;
}
#sub-title.sub-mail{
background: url(assets/image/photo-mail.webp) no-repeat right center/80%;
}
@media only screen and (max-width: 1280px) {
#sub-title,#sub-title.sub-faq,#sub-title.sub-privacy,#sub-title.sub-blog,#sub-title.sub-service,#sub-title.sub-rec,#sub-title.sub-mail {
    height: 550px;
    margin: 0 0 80px;
    background: url(assets/image/photo-about.webp) no-repeat right center/90%;
}
#sub-title.sub-faq{
background: url(assets/image/photo-faq.webp) no-repeat right center/90%;
}
#sub-title.sub-privacy{
background: url(assets/image/photo-privacy.webp) no-repeat right center/90%;
}
#sub-title.sub-blog{
background: url(assets/image/photo-blog.webp) no-repeat right center/90%;
}
#sub-title.sub-service{
background: url(assets/image/photo-service.webp) no-repeat right center/90%;
}
#sub-title.sub-rec{
background: url(assets/image/photo-rec.webp) no-repeat right center/90%;
}
#sub-title.sub-mail{
background: url(assets/image/photo-mail.webp) no-repeat right center/90%;
}
}
@media only screen and (max-width: 1080px) {
#sub-title,#sub-title.sub-faq,#sub-title.sub-privacy,#sub-title.sub-blog,#sub-title.sub-service,#sub-title.sub-rec,#sub-title.sub-mail {
width: 95%;
    height: 500px;
    margin: 0 0 80px 5%;
    background: url(assets/image/photo-about.webp) no-repeat center center/120%;
}
#sub-title.sub-faq{
background: url(assets/image/photo-faq.webp) no-repeat center center/120%;
}
#sub-title.sub-privacy{
background: url(assets/image/photo-privacy.webp) no-repeat left center/120%;
}
#sub-title.sub-blog{
background: url(assets/image/photo-blog.webp) no-repeat center center/120%;
}
#sub-title.sub-service{
background: url(assets/image/photo-service.webp) no-repeat center center/120%;
}
#sub-title.sub-rec{
background: url(assets/image/photo-rec.webp) no-repeat center center/120%;
}
#sub-title.sub-mail{
background: url(assets/image/photo-mail.webp) no-repeat center center/120%;
}
}
@media only screen and (max-width: 835px) {
#sub-title,#sub-title.sub-faq,#sub-title.sub-privacy,#sub-title.sub-blog,#sub-title.sub-service,#sub-title.sub-rec,#sub-title.sub-mail {
width: 95%;
    height: 500px;
    margin: 0 0 80px 5%;
    background: url(assets/image/photo-about.webp) no-repeat center center/150%;
}
#sub-title.sub-faq{
background: url(assets/image/photo-faq.webp) no-repeat center center/150%;
}
#sub-title.sub-privacy{
background: url(assets/image/photo-privacy.webp) no-repeat left center/150%;
}
#sub-title.sub-blog{
background: url(assets/image/photo-blog.webp) no-repeat center center/150%;
}
#sub-title.sub-service{
background: url(assets/image/photo-service.webp) no-repeat center center/150%;
}
#sub-title.sub-rec{
background: url(assets/image/photo-rec.webp) no-repeat center center/150%;
}
#sub-title.sub-mail{
background: url(assets/image/photo-mail.webp) no-repeat center center/150%;
}
}
@media only screen and (max-width: 640px) {
#sub-title,#sub-title.sub-faq,#sub-title.sub-privacy,#sub-title.sub-blog,#sub-title.sub-service,#sub-title.sub-rec,#sub-title.sub-mail {
width: 95%;
    height: 500px;
    margin: 0 0 80px 5%;
    background: url(assets/image/photo-about.webp) no-repeat center center/230%;
}
#sub-title.sub-faq{
background: url(assets/image/photo-faq.webp) no-repeat center center/230%;
}
#sub-title.sub-privacy{
background: url(assets/image/photo-privacy.webp) no-repeat left center/230%;
}
#sub-title.sub-blog{
background: url(assets/image/photo-blog.webp) no-repeat center center/230%;
}
#sub-title.sub-service{
background: url(assets/image/photo-service.webp) no-repeat center center/180%;
}
#sub-title.sub-rec{
background: url(assets/image/photo-rec.webp) no-repeat center center/230%;
}
#sub-title.sub-mail{
background: url(assets/image/photo-mail.webp) no-repeat center center/230%;
}
}
@media only screen and (max-width: 480px) {
#sub-title,#sub-title.sub-faq,#sub-title.sub-privacy,#sub-title.sub-blog,#sub-title.sub-service,#sub-title.sub-rec,#sub-title.sub-mail {
width: 95%;
    height: 500px;
    margin: 0 0 50px 5%;
    background: url(assets/image/photo-about.webp) no-repeat center center/280%;
}
#sub-title.sub-faq{
background: url(assets/image/photo-faq.webp) no-repeat center center/280%;
}
#sub-title.sub-privacy{
background: url(assets/image/photo-privacy.webp) no-repeat left center/250%;
}
#sub-title.sub-blog{
background: url(assets/image/photo-blog.webp) no-repeat center center/280%;
}
#sub-title.sub-service{
background: url(assets/image/photo-service.webp) no-repeat center center/280%;
}
#sub-title.sub-rec{
background: url(assets/image/photo-rec.webp) no-repeat center center/280%;
}
#sub-title.sub-mail{
background: url(assets/image/photo-mail.webp) no-repeat center center/280%;
}
}
@media only screen and (max-width: 414px) {
#sub-title,#sub-title.sub-faq,#sub-title.sub-privacy,#sub-title.sub-blog,#sub-title.sub-service,#sub-title.sub-rec,#sub-title.sub-mail {
width: 95%;
    height: 500px;
    margin: 0 0 30px 5%;
    background: url(assets/image/photo-about.webp) no-repeat center center/300%;
}
#sub-title.sub-faq{
background: url(assets/image/photo-faq.webp) no-repeat center center/300%;
}
#sub-title.sub-privacy{
background: url(assets/image/photo-privacy.webp) no-repeat left center/260%;
}
#sub-title.sub-blog{
background: url(assets/image/photo-blog.webp) no-repeat center center/300%;
}
#sub-title.sub-service{
background: url(assets/image/photo-service.webp) no-repeat center center/300%;
}
#sub-title.sub-rec{
background: url(assets/image/photo-rec.webp) no-repeat center center/300%;
}
#sub-title.sub-mail{
background: url(assets/image/photo-mail.webp) no-repeat center center/300%;
}
}

#sub-title h1{
    width: 25%;
    position: absolute;
    bottom:0;
    left:0;
    left:auto;
    text-align: left;
    margin: 0 0 0 5%;
    padding: 30px 0 0 3%;
    line-height: 150%;
    font-size: 35px;
    font-weight:400;
    z-index: 3;
    color: #333;
    background: #fff;
    border-radius: 20px 20px 0 20px;
}
#sub-title h1 span{
font-size: 20px;
color: #80dabb;
padding: 0;
}
@media only screen and (max-width: 1600px) {
#sub-title h1{
    width:30%;
    margin: 0 0 0 5%;
    padding: 30px 0 0 3%;
    line-height: 150%;
    font-size: 35px;
    font-weight:400;
    border-radius: 20px 20px 0 20px;
}
}
@media only screen and (max-width: 1440px) {
#sub-title h1{
    width:35%;
    margin: 0 0 0 5%;
    padding: 30px 0 0 3%;
    line-height: 150%;
    font-size: 35px;
    font-weight:400;
    border-radius: 20px 20px 0 20px;
}
}
@media only screen and (max-width: 1280px) {
#sub-title h1{
    width:40%;
    margin: 0 0 0 5%;
    padding: 30px 0 0 3%;
    line-height: 150%;
    font-size: 35px;
    font-weight:400;
    border-radius: 20px 20px 0 20px;
}
}
@media only screen and (max-width: 1080px) {
#sub-title h1{
    width:50%;
    margin: 0 0 0 0%;
    padding: 25px 0 0 3%;
    line-height: 150%;
    font-size: 35px;
    font-weight:400;
    border-radius: 0px 20px 0 0;
}
}
@media only screen and (max-width: 835px) {
#sub-title h1{
    width:55%;
    margin: 0 0 0 0%;
    padding:20px 0 0 3%;
    line-height: 150%;
    font-size: 30px;
    font-weight:400;
    border-radius: 0px 20px 0 0;
}
}
@media only screen and (max-width: 640px) {
#sub-title h1{
    width:65%;
    margin: 0 0 0 0%;
    padding:15px 0 0 3%;
    line-height: 120%;
    font-size: 28px;
    font-weight:400;
    border-radius: 0px 20px 0 0;
}
}
@media only screen and (max-width: 480px) {
#sub-title h1{
    width:70%;
    margin: 0 0 0 0%;
    padding:15px 0 0 3%;
    line-height: 120%;
    font-size: 25px;
    font-weight:400;
    border-radius: 0px 20px 0 0;
}
#sub-title h1 span{
font-size: 16px;
}
}
@media only screen and (max-width: 414px) {
#sub-title h1{
    width:80%;
    margin: 0 0 0 0%;
    padding:10px 0 0 3%;
    line-height: 120%;
    font-size: 25px;
    font-weight:400;
    border-radius: 0px 20px 0 0;
}
}

#slider {
    clear: both;
    float: left;
    width: 100%;
    height: 600px;
    position: relative;
    z-index: 1;
        border-radius: 20px 0 0 20px;
}
@media only screen and (max-width: 1280px) {
#slider {
    height: 550px;
}
}
@media only screen and (max-width: 1080px) {
#slider {
    height: 500px;
}
}
@media only screen and (max-width: 835px) {
#slider {
    height:450px;
}
}
@media only screen and (max-width: 640px) {
#slider {
    height: 450px;
}
}

/*main
--------------------------------------------------------------------------*/
main{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 30px;
padding: 0;
}

.js-fadeUp {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s, transform 1.2s;
}
.js-fadeUp.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

#info{
clear: both;
float: left;
width: 95%;
height: auto;
margin: 0 0 0 5%;
padding: 0 5% 0 0;
display: flex;
align-items: center;
}
@media only screen and (max-width: 1440px) {
#info{
padding: 0 5% 0 0;
}
}
@media only screen and (max-width: 1080px) {
#info{
padding: 0 5% 0 0;
}
}
@media only screen and (max-width: 835px) {
#info{
padding: 0 5% 0 0;
display:inherit;
}
}
@media only screen and (max-width: 640px) {
#info{
margin: 0px 0 0;
padding: 0 5% 0 5%;
display:inherit;
}
}

#info h2{
clear: both;
float: left;
height: auto;
margin: 0;
padding: 0px 0 0 40px;
font-size: 25px;
font-weight:400;
line-height: 100%;
text-align: left;
background: url(assets/image/info-h2.webp) no-repeat left 50%/25px;
color: #11ae78;
flex-basis:15%;
align-self:stretch;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
@media only screen and (max-width: 1280px) {
#info h2{
clear: both;
float: left;
height: auto;
margin: 0;
padding: 0px 0 0 40px;
font-size: 20px;
font-weight: 500;
line-height: 100%;
text-align: left;
flex-basis:15%;
align-self:stretch;
        display: flex;
        justify-content: center;
        flex-direction: column;
}
}
@media only screen and (max-width: 1080px) {
#info h2{
clear: both;
float: left;
height: auto;
margin: 0;
padding: 0px 0 0 40px;
font-size: 20px;
font-weight: 500;
line-height: 100%;
text-align: left;
flex-basis:20%;
align-self:stretch;
        display: flex;
        justify-content: center;
        flex-direction: column;
}
}
@media only screen and (max-width: 835px) {
#info h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding:2px 0 5px 30px;
font-size: 20px;
font-weight: 500;
line-height: 100%;
text-align: left;
background: url(assets/image/info-h2.webp) no-repeat left 50%/20px;
flex-basis:100%;
align-self:stretch;
        display: flex;
        justify-content: center;
        flex-direction: column;
}
}

#info ul{
float: left;
height: auto;
margin: 0;
padding: 0 0 0 2%;
flex-basis:80%;
}
@media only screen and (max-width: 1280px) {
#info ul{
float: left;
height: auto;
margin: 0;
padding: 0 0 0 2%;
flex-basis:80%;
}
}
@media only screen and (max-width: 1080px) {
#info ul{
float: left;
height: auto;
margin: 0;
padding: 0 2% 0 2%;
flex-basis:80%;
}
}
@media only screen and (max-width: 835px) {
#info ul{
float: left;
height: auto;
margin: 0;
padding: 0 0% 0 0;
flex-basis:80%;
}
}

#info li{
clear: both;
float: left;
width: 100%;
list-style-type: none;
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 1px solid #333;
font-size: 17px;
line-height: 120%;
font-weight: 300;
text-align: left;
}
#info li span{
display: none;
float: left;
width: 15%;
}
#info li h3{
clear: none;
float: left;
width: 85%;
font-weight: 500;
font-size: 17px;
margin: 0;
padding: 0 0 0 1em;
text-align: left;
}
#info li a:link,#info li a:visited{
color: #111;
text-decoration: none;
font-weight: 400;
}
#info li a:hover{
color: #11ae78;
text-decoration: none;
}
@media only screen and (max-width: 1280px) {
#info li{
clear: both;
float: left;
width: 100%;
list-style-type: none;
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 1px solid #333;
font-size: 15px;
line-height: 120%;
font-weight: 300;
text-align: left;
}
#info li h3{
clear: none;
float: left;
width: 85%;
font-weight: 500;
font-size: 15px;
margin: 0;
padding: 0 0 0 1em;
text-align: left;
}
}
@media only screen and (max-width: 835px) {
#info li span{
float: left;
width: 100%;
}
#info li h3{
clear: both;
float: left;
width: 100%;
font-weight: 500;
font-size: 15px;
margin: 5px 0 0;
padding: 0;
text-align: left;
}
}

#info-link{
float: left;
flex-basis:10%;
}
#info-link img{
max-width:30%;
}
@media only screen and (max-width: 1280px) {
#info-link{
float: left;
flex-basis:10%;
}
#info-link img{
max-width: 30%;
}
}
@media only screen and (max-width: 1080px) {
#info-link{
float: left;
flex-basis:5%;
}
#info-link img{
max-width: 90%;
}
}
@media only screen and (max-width: 835px) {
#info-link{
clear: both;
float: left;
width: 100%;
flex-basis:100%;
text-align: center;
}
#info-link img{
max-width: 5%;
}
}
@media only screen and (max-width: 640px) {
#info-link img{
max-width: 7%;
}
}
@media only screen and (max-width: 480px) {
#info-link img{
max-width: 10%;
}
}
@media only screen and (max-width: 414px) {
#info-link img{
max-width: 12%;
}
}

#top-smile{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 80px 0 0;
padding: 70px 0 100px;
background: url(assets/image/top-smile.webp) no-repeat right top/auto 100%,url(assets/image/top-smile2.webp) no-repeat left top/50% 80%;
}
@media only screen and (max-width: 1280px) {
#top-smile{
margin: 80px 0 0;
padding: 250px 0 50px;
background: url(assets/image/top-smile.webp) no-repeat right top/40% auto,url(assets/image/top-smile2.webp) no-repeat left 100px/50% 70%;
}
}
@media only screen and (max-width: 1080px) {
#top-smile{
margin: 60px 0 0;
padding: 250px 0 50px;
background: url(assets/image/top-smile-sm.webp) no-repeat right top/80% auto,url(assets/image/top-smile2.webp) no-repeat left 100px/80% 60%;
}
}
@media only screen and (max-width: 835px) {
#top-smile{
margin: 60px 0 0;
padding: 250px 0 50px;
background: url(assets/image/top-smile-sm.webp) no-repeat right top/90% auto,url(assets/image/top-smile2.webp) no-repeat left 50px/90% 60%;
}
}
@media only screen and (max-width: 640px) {
#top-smile{
margin: 60px 0 0;
padding: 200px 0 50px;
background: url(assets/image/top-smile-sm.webp) no-repeat right top/90% auto,url(assets/image/top-smile2.webp) no-repeat left 50px/90% 40%;
}
}
@media only screen and (max-width: 414px) {
#top-smile{
margin: 50px 0 0;
padding: 150px 0 50px;
background: url(assets/image/top-smile-sm.webp) no-repeat right top/90% auto,url(assets/image/top-smile2.webp) no-repeat left 50px/90% 40%;
}
}

#top-smile-box{
clear: both;
float: left;
width: 53%;
margin: 0 35% 0 12%;
padding: 70px 1% 100px 3%;
background-color:#fff;
border-radius: 15px;
text-align: left;
font-size: 17px;
line-height: 250%;
font-weight: 500;
}
@media only screen and (max-width: 1440px) {
#top-smile-box{
clear: both;
float: left;
width: 65%;
margin: 0 30% 0 5%;
padding: 70px 1% 100px 3%;
background-color:#fff;
border-radius: 15px;
text-align: left;
font-size: 17px;
line-height: 250%;
font-weight: 500;
}
}
@media only screen and (max-width: 1280px) {
#top-smile-box{
width: 70%;
margin: 0 25% 0 5%;
padding: 50px 1% 70px 3%;
font-size: 17px;
}
}
@media only screen and (max-width: 1080px) {
#top-smile-box{
width: 90%;
margin: 0 5% 0 5%;
padding: 30px 1% 70px 3%;
font-size: 17px;
}
}
@media only screen and (max-width: 835px) {
#top-smile-box{
width: 90%;
margin: 0 5% 0 5%;
padding: 30px 1% 40px 3%;
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
#top-smile-box{
width: 90%;
margin: 0 5% 0 5%;
padding: 20px 3% 30px 3%;
font-size: 17px;
}
}

#top-smile p{
text-align: left;
font-size: 17px;
line-height: 250%;
font-weight: 400;
margin: 0;
}
#top-smile p strong{
color: #11ae78;
font-weight: 700;
font-size: 1.1em;
}
@media only screen and (max-width: 1280px) {
#top-smile p{
text-align: left;
font-size: 17px;
line-height: 250%;
font-weight: 300;
margin: 0;
}
}
@media only screen and (max-width: 835px) {
#top-smile p{
text-align: left;
font-size: 16px;
line-height: 200%;
font-weight: 300;
margin: 0;
}
}
@media only screen and (max-width: 480px) {
#top-smile p{
text-align: left;
font-size: 15px;
line-height: 180%;
font-weight: 300;
margin: 0;
}
}

.link-button{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 0;
padding: 0;
text-align: center;
}
#staff-blog .link-button{
display: flex;
}
.link-button a:link,.link-button a:visited{
display: block;
width: auto;
margin: 0 auto;
border:2px solid #11ae78;
background: url(assets/image/top-smile3.webp) no-repeat 95% 50%,#fff;
text-align: left;
border-radius: 7px;
font-size: 17px;
color: #11ae78;
padding:20px 6em 20px 5em;
text-decoration: none;
line-height: 100%;
box-shadow: 5px 5px 0 #b9ead9;
font-weight: 400;
}
.link-button a:hover{
border: 2px solid #11ae78;
background: url(assets/image/top-smile4.webp) no-repeat 95% 50%,#11ae78;
text-align: left;
border-radius: 7px;
font-size: 17px;
color: #fff;
padding:20px 6em 20px 5em;
text-decoration: none;
line-height: 100%;
font-weight: 400;
box-shadow: 5px 5px 0 #b9ead9;
}
@media only screen and (max-width: 1280px) {
.link-button a:link,.link-button a:visited{
font-size: 17px;
}
.link-button a:hover{
font-size: 17px;
}
}
@media only screen and (max-width: 835px) {
#staff-blog .link-button{
display: flex;
margin: 0 auto;
}
.link-button a:link,.link-button a:visited{
font-size: 16px;
}
.link-button a:hover{
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
.link-button a:link,.link-button a:visited{
font-size: 15px;
}
.link-button a:hover{
font-size: 15px;
}
}

#top-service{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 150px 0 100px;
background: url(assets/image/top-service.webp) no-repeat left top/55%;
}
@media only screen and (max-width: 1440px) {
#top-service{
padding: 150px 0 20px;
background: url(assets/image/top-service.webp) no-repeat left top/55%;
}
}
@media only screen and (max-width: 1280px) {
#top-service{
margin: -70px 0 0;
padding: 100px 0 20px;
background: url(assets/image/top-service.webp) no-repeat left top/55%;
}
}
@media only screen and (max-width: 1080px) {
#top-service{
margin: -130px 0 0;
padding: 300px 0 20px;
background: url(assets/image/top-service-sm.webp) no-repeat left top/80%;
}
}
@media only screen and (max-width: 835px) {
#top-service{
margin: -100px 0 0;
padding: 250px 0 50px;
background: url(assets/image/top-service-sm.webp) no-repeat left top/80%;
}
}
@media only screen and (max-width: 640px) {
#top-service{
margin: -50px 0 0;
padding: 220px 0 50px;
background: url(assets/image/top-service-sm.webp) no-repeat left top/90%;
}
}
@media only screen and (max-width: 414px) {
#top-service{
margin: -50px 0 0;
padding: 150px 0 50px;
background: url(assets/image/top-service-sm.webp) no-repeat left top/90%;
}
}

#top-service-box{
clear: both;
float: left;
width: 40%;
margin: 0 20% 0 40%;
padding: 70px 3% 100px;
background-color:#80dabb;
text-align: left;
border-radius: 15px;
}
@media only screen and (max-width: 1440px) {
#top-service-box{
clear: both;
float: left;
width: 45%;
margin: 0 15% 0 40%;
padding: 70px 3% 100px;
background-color:#80dabb;
text-align: left;
border-radius: 15px;
}
}
@media only screen and (max-width: 1280px) {
#top-service-box{
clear: both;
float: left;
width: 50%;
margin: 0 10% 0 40%;
padding: 40px 3% 50px;
background-color:#80dabb;
text-align: left;
border-radius: 15px;
}
}
@media only screen and (max-width: 1080px) {
#top-service-box{
clear: both;
float: left;
width: 60%;
margin: 0 5% 0 35%;
padding: 40px 3% 50px;
background-color:#80dabb;
text-align: left;
border-radius: 15px;
}
}
@media only screen and (max-width: 835px) {
#top-service-box{
clear: both;
float: left;
width: 75%;
margin: 0 5% 0 20%;
padding: 40px 3% 50px;
background-color:#80dabb;
text-align: left;
border-radius: 15px;
}
}
@media only screen and (max-width: 640px) {
#top-service-box{
clear: both;
float: left;
width: 90%;
margin: 0 5% 0 5%;
padding: 30px 3% 30px;
background-color:#80dabb;
text-align: left;
border-radius: 15px;
}
}

#top-service h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
color: #fff;
font-weight: 700;
line-height: 100%;
font-size: 35px;
}
#top-service p{
font-size: 17px;
line-height: 250%;
margin: 0;
padding: 0;
text-align: left;
color: #fff;
font-weight: 400;
}
@media only screen and (max-width: 1280px) {
#top-service h2{
font-size: 30px;
}
#top-service p{
font-size: 17px;
}
}
@media only screen and (max-width: 835px) {
#top-service h2{
font-size: 25px;
}
#top-service p{
font-size: 16px;
}
}
@media only screen and (max-width: 640px) {
#top-service h2{
font-size: 30px;
margin: 0 0 20px;
}
#top-service p{
clear: both;
font-size: 17px;
line-height: 200%;
}
}
@media only screen and (max-width: 480px) {
#top-service h2{
font-size:25px;
margin: 0 0 20px;
}
#top-service p{
clear: both;
font-size: 15px;
line-height: 200%;
font-weight: 500;
}
}

#voice-blog-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: url(assets/image/top-voice-back2.webp) no-repeat right top,url(assets/image/top-voice-back3.webp) no-repeat left bottom;
}
@media only screen and (max-width: 1280px) {
#voice-blog-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: url(assets/image/top-voice-back2.webp) no-repeat right top/50%,url(assets/image/top-voice-back3.webp) no-repeat left bottom/50%;
}
}
@media only screen and (max-width: 1080px) {
#voice-blog-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 40px 0 0;
padding: 0;
background: url(assets/image/top-voice-back2.webp) no-repeat right top/50%,url(assets/image/top-voice-back3.webp) no-repeat left bottom/50%;
}
}
@media only screen and (max-width: 835px) {
#voice-blog-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0;
background: url(assets/image/top-voice-back2.webp) no-repeat right top/50%,url(assets/image/top-voice-back3.webp) no-repeat left bottom/50%;
}
}
@media only screen and (max-width: 640px) {
#voice-blog-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0;
background: url(assets/image/top-voice-back2.webp) no-repeat right top/80%,url(assets/image/top-voice-back3.webp) no-repeat left bottom/80%;
}
}
@media only screen and (max-width: 480px) {
#voice-blog-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0;
background: url(assets/image/top-voice-back2.webp) no-repeat right top/90%,url(assets/image/top-voice-back3.webp) no-repeat left bottom/90%;
}
}

#voice{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:0 0 50px;
    padding: 0;
background: url(assets/image/top-voice-back.webp) no-repeat left center/70% 60%;
}
@media only screen and (max-width: 640px) {
#voice{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:0 0 50px;
    padding: 0;
background: url(assets/image/top-voice-back.webp) no-repeat left center/50% 80%;
}
}
@media only screen and (max-width: 480px) {
#voice{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:0 0 50px;
    padding: 0;
background: url(assets/image/top-voice-back.webp) no-repeat left center/40% 80%;
}
}

#voice h2{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 30px;
    font-size: 40px;
    line-height: 100%;
    font-weight: 500;
    text-align: left;
    color: #feb397;
}
@media only screen and (max-width: 835px) {
#voice h2{
    font-size:35px;
    text-align: center;
}
}
@media only screen and (max-width: 480px) {
#voice h2{
font-size:30px;
}
}

#voice-box{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 100px 15% 50px;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1440px) {
#voice-box{
    padding: 100px 10% 50px;
}
}
@media only screen and (max-width: 1280px) {
#voice-box{
    padding: 80px 5% 30px;
}
}
@media only screen and (max-width: 835px) {
#voice-box{
    padding: 50px 5% 30px;
}
}

#voice-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0;
padding: 0;
display: flex;
}
#voice-box img{
max-width: 5%;
}
@media only screen and (max-width: 1080px) {
#voice-area{
margin: 40px 0 20px;
}
#voice-box img{
max-width: 5%;
}
}
@media only screen and (max-width: 835px) {
#voice-area{
margin: 20px 0 20px;
}
#voice-box img{
max-width: 6%;
}
}
@media only screen and (max-width: 640px) {
#voice-area{
flex-wrap: wrap;
margin: 20px 0 0;
}
#voice-box img{
max-width: 8%;
}
}
@media only screen and (max-width: 414px) {
#voice-box img{
max-width: 12%;
}
}

.voice-blog{
flex: 1;
margin: 0 2%;
}
@media only screen and (max-width: 835px) {
.voice-blog{
flex: 1;
margin: 0 1%;
}
}
@media only screen and (max-width: 640px) {
.voice-blog{
flex: 1;
margin: 0 0% 30px;
flex-basis:100%;
}
}

#voice-area .voice-blog img{
max-width: 100%;
border: 1px solid #fff;
}

#voice-area h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 0;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 150%;
font-weight: 300;
overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#voice-area h3 a:link,#voice-area h3 a:visited{
color: #111;
text-decoration: none;
}
#voice-area h3 a:hover{
color: #11ae78;
font-weight: 600;
text-decoration: underline;
}
@media only screen and (max-width: 1280px) {
#voice-area h3{
font-size: 16px;
}
}
@media only screen and (max-width: 835px) {
#voice-area h3{
font-size: 15px;
}
}
@media only screen and (max-width: 640px) {
#voice-area h3{
margin: 10px 0 0;
}
}

#staff-blog{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}

#staff-blog-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5%;
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width: 1440px) {
#staff-blog-area{
padding: 0 2%;
}
}
@media only screen and (max-width: 480px) {
#staff-blog-area{
padding: 0 5%;
}
}

.staff-box{
margin: 0 2% 50px;
flex-basis:46%;
flex-grow: 0;
}
.staff-box img{
max-width: 50%;
border-radius: 10px;
}
.staff-text{
float: right;
width: 50%;
height: auto;
margin: 0;
padding: 0 0 0 2%;
}
@media only screen and (max-width: 835px) {
.staff-box img{
max-width: 100%;
}
.staff-text{
clear: both;
float:left;
width: 100%;
height: auto;
margin: 10px 0 0;
padding: 0;
}
}
@media only screen and (max-width: 480px) {
.staff-box{
margin: 0 0% 40px;
flex-basis:100%;
flex-grow: 0;
}
}

#staff-blog h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
line-height: 120%;
font-size: 17px;
color: #11ae78;
font-weight: 500;
overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#staff-blog h3 a:link,#staff-blog h3 a:visited{
text-decoration: none;
color: #11ae78;
}
#staff-blog h3 a:hover{
text-decoration: underline;
}
#staff-blog p{
width: 100%;
text-align: left;
font-size: 15px;
line-height: 120%;
margin: 0;
overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media only screen and (max-width: 1280px) {
#staff-blog h3{
font-size: 17px;
}
#staff-blog p{
font-size: 15px;
}
}
@media only screen and (max-width: 640px) {
#staff-blog h3{
font-size: 16px;
}
#staff-blog p{
font-size: 14px;
}
}

#staff-blog hr{
clear: both;
float: left;
width: 100%;
border-top:none;
border-left:none;
border-right: none;
border-bottom:3px dotted #11ae78;
margin: 20px 0;
padding: 0;
}
@media only screen and (max-width: 640px) {
#staff-blog hr{
border-bottom:2px dotted #11ae78;
margin: 15px 0;
}
}

#staff-blog ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#staff-blog li{
float: left;
list-style-type: none;
font-size: 13px;
margin: 0 2% 2px 0;
padding: 0;
}
#staff-blog li a:link,#staff-blog li a:visited{
background: #11ae78;
color: #fff;
text-decoration: none;
padding: 2px 10px;
border-radius: 30px;
font-weight:400;
}
#staff-blog li a:hover{
background: #8fdec3;
}

#top-contact {
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:150px 0 0;
    padding: 0;
    position: relative;
}
@media only screen and (max-width: 1600px) {
#top-contact {
    margin:120px 0 0;
}
}
@media only screen and (max-width: 1080px) {
#top-contact {
    margin:80px 0 0;
}
}
@media only screen and (max-width: 640px) {
#top-contact {
    margin:50px 0 0;
}
}
@media only screen and (max-width: 480px) {
#top-contact {
    margin:30px 0 0;
}
}

#top-contact-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 15% 60px;
background: #fee4d7;
position: relative;
z-index: 10;
}
@media only screen and (max-width: 1600px) {
#top-contact-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 50px 10% 60px;
background: #fee4d7;
position: relative;
z-index: 10;
}
}
@media only screen and (max-width: 1440px) {
#top-contact-area{
padding: 50px 5% 50px;
}
}
@media only screen and (max-width: 1280px) {
#top-contact-area{
padding: 20px 5% 50px;
}
}
@media only screen and (max-width: 1080px) {
#top-contact-area{
padding: 20px 5% 50px;
}
}
@media only screen and (max-width: 835px) {
#top-contact-area{
padding: 40px 5% 20px;
}
}
@media only screen and (max-width: 640px) {
#top-contact-area{
padding: 40px 5% 20px;
}
}
@media only screen and (max-width: 414px) {
#top-contact-area{
padding: 30px 5% 20px;
}
}

#top-contact h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 35px;
line-height: 120%;
font-weight: 400;
}
#top-contact h4 span{
color: #fff;
font-size: 20px;
}
@media only screen and (max-width: 1280px) {
#top-contact h4{
margin: 0 0 20px;
}
}
@media only screen and (max-width: 1080px) {
#top-contact h4{
font-size: 30px;
}
#top-contact h4 span{
font-size: 15px;
}
}
@media only screen and (max-width: 835px) {
#top-contact h4{
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#top-contact h4{
font-size: 25px;
line-height: 100%;
}
}

#top-contact p{
text-align: left;
line-height: 160%;
margin: 0;
font-weight: 300;
}
@media only screen and (max-width: 1280px) {
#top-contact p{
font-size: 17px;
}
}
@media only screen and (max-width: 835px) {
#top-contact p{
font-size: 17px;
min-height: 3.5em;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#top-contact p{
min-height: auto;
}
}

#top-contact img{
float: right;
position: absolute;
top:-150px;
right: 15%;
max-width: 25%;
}
#top-contact img.contact-pict2{
float: right;
position: absolute;
top:50px;
right: 40%;
max-width: 20%;
}
@media only screen and (max-width: 1600px) {
#top-contact img{
top:-100px;
right: 10%;
max-width: 20%;
}
#top-contact img.contact-pict2{
top:50px;
right: 35%;
max-width: 15%;
}
}
@media only screen and (max-width: 1080px) {
#top-contact img{
top:-50px;
right: 5%;
max-width: 20%;
}
#top-contact img.contact-pict2{
top:50px;
right: 30%;
max-width: 17%;
}
}
@media only screen and (max-width: 835px) {
#top-contact img{
top:-30px;
right: 5%;
max-width: 20%;
}
#top-contact img.contact-pict2{
top:100px;
right: 30%;
max-width: 17%;
}
}
@media only screen and (max-width: 640px) {
#top-contact img{
display: none;
}
}

.contact-smbox{
clear: both;
float: left;
width: 100%;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 835px) {
.contact-smbox{
float: left;
width: 50%;
margin: 0;
padding: 0 2%;
}
}
@media only screen and (max-width: 640px) {
.contact-smbox{
width: 100%;
padding: 0;
}
}

.link-button2,.link-button3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 10px 0 50px;
padding: 0;
text-align: center;
}
.link-button2 a:link,.link-button2 a:visited,.link-button3 a:link,.link-button3 a:visited{
display: block;
width: 28%;
margin: 0 auto;
border: 2px solid #fea889;
background: url(assets/image/tel-icon.webp) no-repeat 20% 50%,#fff;
text-align:center;
border-radius: 7px;
font-size: 23px;
color: #fea889;
padding: 15px 2.5em 15px 3.5em;
text-decoration: none;
line-height: 100%;
box-shadow: 5px 5px 0 #fec6b0;
font-weight: 500;
}
.link-button2 a:hover,.link-button3 a:hover{
border: 2px solid #fea889;
background: url(assets/image/tel-icon-w.webp) no-repeat 20% 50%,#fea889;
text-align: center;
border-radius: 7px;
font-size: 23px;
color: #fff;
padding: 15px 2.5em 15px 3.5em;
text-decoration: none;
line-height: 100%;
font-weight: 600;
box-shadow: 5px 5px 0 #fec6b0;
}
.link-button3 a:link,.link-button3 a:visited{
font-size: 21px;
padding: 15px 2.5em 15px 4.2em;
background: url(assets/image/mail-icon.webp) no-repeat 20% 50%,#fff;
}
.link-button3 a:hover{
font-size: 21px;
padding: 15px 2.5em 15px 4.2em;
background: url(assets/image/mail-icon-w.webp) no-repeat 20% 50%,#fea889;
}
@media only screen and (max-width: 1280px) {
.link-button2,.link-button3{
margin: 10px 0 20px;
}
.link-button2 a:link,.link-button2 a:visited,.link-button3 a:link,.link-button3 a:visited{
width: 35%;
}
}
@media only screen and (max-width: 1080px) {
.link-button2 a:link,.link-button2 a:visited{
background: url(assets/image/tel-icon.webp) no-repeat 20% 50%,#fff;
width: 40%;
}
.link-button3 a:link,.link-button3 a:visited{
background: url(assets/image/mail-icon.webp) no-repeat 20% 50%,#fff;
width: 40%;
}
.link-button2 a:hover{
background: url(assets/image/tel-icon-w.webp) no-repeat 20% 50%,#fea889;
}
.link-button3 a:hover{
background: url(assets/image/mail-icon-w.webp) no-repeat 20% 50%,#fea889;
}
}
@media only screen and (max-width: 835px) {
.link-button2 a:link,.link-button2 a:visited,.link-button3 a:link,.link-button3 a:visited{
width: 100%;
padding: 10px 0 10px 1.5em;
text-align: center;
}
.link-button3 a:link,.link-button3 a:visited{
font-size: 21px;
padding: 10px 0 10px 1em;
background: url(assets/image/mail-icon.webp) no-repeat 15% 50%,#fff;
text-align: center;
}
.link-button3 a:hover{
background: url(assets/image/mail-icon-w.webp) no-repeat 15% 50%,#fea889;
}
}
@media only screen and (max-width: 640px) {
.link-button2,.link-button3{
margin: 5px auto 20px;
}
.link-button2 a:link,.link-button2 a:visited,.link-button3 a:link,.link-button3 a:visited{
width: 100%;
padding: 10px 0 10px 1.5em;
text-align: center;
background: url(assets/image/tel-icon.webp) no-repeat 10% 50%,#fff;
}
.link-button2 a:hover,.link-button3 a:hover{
background: url(assets/image/tel-icon-w.webp) no-repeat 10% 50%,#fea889;
}
.link-button3 a:link,.link-button3 a:visited{
background: url(assets/image/mail-icon.webp) no-repeat 10% 50%,#fff;
}
.link-button3 a:hover{
background: url(assets/image/mail-icon-w.webp) no-repeat 10% 50%,#fea889;
}
}
@media only screen and (max-width: 480px) {
.link-button2 a:link,.link-button2 a:visited,.link-button3 a:link,.link-button3 a:visited{
width: 100%;
padding: 10px 0 10px 1.5em;
text-align: center;
background: url(assets/image/tel-icon.webp) no-repeat 25% 50%,#fff;
}
.link-button2 a:hover,.link-button3 a:hover{
background: url(assets/image/tel-icon-w.webp) no-repeat 25% 50%,#fea889;
}
.link-button3 a:link,.link-button3 a:visited{
background: url(assets/image/mail-icon.webp) no-repeat 25% 50%,#fff;
}
.link-button3 a:hover{
background: url(assets/image/mail-icon-w.webp) no-repeat 25% 50%,#fea889;
}
}
@media only screen and (max-width: 414px) {
.link-button2 a:link,.link-button2 a:visited,.link-button3 a:link,.link-button3 a:visited{
width: 100%;
padding: 10px 0 10px 1.5em;
text-align: center;
background: url(assets/image/tel-icon.webp) no-repeat 20% 50%,#fff;
}
.link-button2 a:hover,.link-button3 a:hover{
background: url(assets/image/tel-icon-w.webp) no-repeat 20% 50%,#fea889;
}
.link-button3 a:link,.link-button3 a:visited{
background: url(assets/image/mail-icon.webp) no-repeat 20% 50%,#fff;
}
.link-button3 a:hover{
background: url(assets/image/mail-icon-w.webp) no-repeat 20% 50%,#fea889;
}
}

#about-rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0 50% 0 10%;
text-align: left;
background: url(assets/image/about-rinen2.webp) no-repeat right top/auto 100%,url(assets/image/about-rinen.webp) no-repeat left top;
}
@media only screen and (max-width: 1600px) {
#about-rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0 45% 0 10%;
text-align: left;
background: url(assets/image/about-rinen2.webp) no-repeat right top/44%,url(assets/image/about-rinen.webp) no-repeat left top;
}
}
@media only screen and (max-width: 1440px) {
#about-rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0 40% 0 10%;
text-align: left;
background: url(assets/image/about-rinen2.webp) no-repeat right center/40%,url(assets/image/about-rinen.webp) no-repeat left top;
}
}
@media only screen and (max-width: 1280px) {
#about-rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0 40% 0 6%;
text-align: left;
background: url(assets/image/about-rinen2.webp) no-repeat right center/38%,url(assets/image/about-rinen.webp) no-repeat left top;
}
}
@media only screen and (max-width: 1080px) {
#about-rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 10% 420px 10%;
text-align: left;
background: url(assets/image/about-rinen2.webp) no-repeat right bottom/auto 400px,url(assets/image/about-rinen.webp) no-repeat left top;
}
}
@media only screen and (max-width: 835px) {
#about-rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 5% 400px 10%;
text-align: left;
background: url(assets/image/about-rinen2.webp) no-repeat right bottom/auto 400px,url(assets/image/about-rinen.webp) no-repeat left top;
}
}
@media only screen and (max-width: 640px) {
#about-rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 5% 360px 12%;
text-align: left;
background: url(assets/image/about-rinen2.webp) no-repeat right bottom/88%,url(assets/image/about-rinen.webp) no-repeat left top/8%;
}
}
@media only screen and (max-width: 480px) {
#about-rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 5% 240px 12%;
text-align: left;
background: url(assets/image/about-rinen2.webp) no-repeat right bottom/auto 250px,url(assets/image/about-rinen.webp) no-repeat left top/8%;
}
}
@media only screen and (max-width: 414px) {
#about-rinen{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 5% 190px 12%;
text-align: left;
background: url(assets/image/about-rinen2.webp) no-repeat right bottom/auto 200px,url(assets/image/about-rinen.webp) no-repeat left top/8%;
}
}

#about-rinen h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 5px;
text-align: left;
line-height: 120%;
font-size: 30px;
font-weight: 500;
color: #80dabb;
border-bottom: 1px solid #80dabb;
}
#about-rinen h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
line-height: 120%;
font-size: 30px;
font-weight: 500;
}
@media only screen and (max-width: 1080px) {
#about-rinen h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
line-height: 120%;
font-size: 30px;
font-weight: 500;
}
}
@media only screen and (max-width: 835px) {
#about-rinen h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 0 5px;
text-align: left;
line-height: 120%;
font-size: 25px;
font-weight: 500;
color: #80dabb;
border-bottom: 1px solid #80dabb;
}
#about-rinen h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
line-height: 120%;
font-size: 25px;
font-weight: 500;
}
}
@media only screen and (max-width: 480px) {
#about-rinen h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
line-height: 120%;
font-size: 25px;
font-weight:500;
}
}

#about-rinen p{
line-height: 200%;
text-align: left;
margin: 0 0 40px;
padding: 0;
font-size: 20px;
}
@media only screen and (max-width: 1080px) {
#about-rinen p{
line-height: 160%;
text-align: left;
text-align: justify;
text-justify: inter-ideograph;
margin: 0 0 40px;
padding: 0;
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
#about-rinen p{
line-height: 160%;
text-align: left;
text-align: justify;
text-justify: inter-ideograph;
margin: 0 0 30px;
padding: 0;
font-size: 16px;
}
}

#about-point{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 150px 0 80px;
background: url(assets/image/logo-sub.webp) no-repeat center 50px,url(assets/image/about-point-back.webp) repeat-y left top/50% 100%;
}
@media only screen and (max-width: 1080px) {
#about-point{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -100px 0 80px;
padding: 150px 0 80px;
background: url(assets/image/logo-sub.webp) no-repeat center 50px,url(assets/image/about-point-back.webp) repeat-y left top/50% 100%;
}
}
@media only screen and (max-width: 835px) {
#about-point{
clear: both;
float: left;
width: 100%;
height: auto;
margin: -100px 0 80px;
padding: 150px 0 40px;
background: url(assets/image/logo-sub.webp) no-repeat center 50px,url(assets/image/about-point-back.webp) repeat-y left top/50% 100%;
}
}
@media only screen and (max-width: 640px) {
#about-point{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 130px 0 60px;
background: url(assets/image/logo-sub.webp) no-repeat center 50px,url(assets/image/about-point-back.webp) repeat-y left top/50% 100%;
}
}
@media only screen and (max-width: 480px) {
#about-point{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 120px 0 30px;
background: url(assets/image/logo-sub.webp) no-repeat center 50px/15%,url(assets/image/about-point-back.webp) repeat-y left top/50% 100%;
}
}

#about-point h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
font-size: 35px;
line-height: 120%;
text-align: center;
font-weight: 500;
}
#about-point p{
text-align: center;
line-height: 200%;
font-size: 20px;
margin: 0 0 40px;
}
@media only screen and (max-width: 1080px) {
#about-point h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
font-size: 30px;
line-height: 120%;
text-align: center;
font-weight: 500;
}
#about-point p{
text-align: center;
line-height: 180%;
font-size: 17px;
margin: 0 0 30px;
}
}
@media only screen and (max-width: 835px) {
#about-point h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
font-size: 30px;
line-height: 120%;
text-align: center;
font-weight: 500;
}
}
@media only screen and (max-width: 640px) {
#about-point p{
text-align: center;
line-height: 180%;
font-size: 16px;
margin: 0 5% 30px;
}
}
@media only screen and (max-width: 480px) {
#about-point h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
font-size: 25px;
line-height: 120%;
text-align: center;
font-weight: 500;
}
#about-point p{
text-align: left;
line-height: 160%;
font-size: 16px;
margin: 0 5% 30px;
}
}

.about-point-box,.about-point-box2{
clear: both;
float: left;
width: 60%;
height: auto;
margin: 0 5% 50px 35%;
padding: 50px 3% 50px;
background: #fff;
border-radius: 20px 0 0 20px;
display: flex;
}
.about-point-box2{
margin: 0 25% 50px 15%;
}
@media only screen and (max-width: 1440px) {
.about-point-box,.about-point-box2{
clear: both;
float: left;
width: 70%;
height: auto;
margin: 0 5% 50px 20%;
padding: 50px 3% 20px;
background: #fff;
border-radius: 20px 0 0 20px;
display: flex;
}
.about-point-box2{
margin: 0 25% 50px 10%;
}
}
@media only screen and (max-width: 1280px) {
.about-point-box,.about-point-box2{
clear: both;
float: left;
width: 80%;
height: auto;
margin: 0 5% 50px 10%;
padding: 50px 0% 15px 3%;
background: #fff;
border-radius: 20px 0 0 20px;
display: flex;
}
.about-point-box2{
margin: 0 20% 50px 5%;
}
}
@media only screen and (max-width: 1080px) {
.about-point-box,.about-point-box2{
clear: both;
float: left;
width: 85%;
height: auto;
margin: 0 5% 50px 10%;
padding: 30px 0% 15px 3%;
background: #fff;
border-radius: 15px 0 0 15px;
display: flex;
}
.about-point-box2{
margin: 0 20% 50px 5%;
}
}
@media only screen and (max-width: 835px) {
.about-point-box,.about-point-box2{
clear: both;
float: left;
width: 90%;
height: auto;
margin: 0 5% 50px 5%;
padding: 30px 0% 15px 3%;
background: #fff;
border-radius: 15px 0 0 15px;
display: inherit;
}
.about-point-box2{
margin: 0 5% 50px 5%;
}
}

.about-point-box img{
position: absolute;
float: left;
max-width: 30%;
left: 15%;
border-radius: 20px;
}
.about-point-box2 img{
position: absolute;
float:right;
max-width: 30%;
right: 15%;
border-radius: 20px;
}
@media only screen and (max-width: 1440px) {
.about-point-box img{
position: absolute;
float: left;
max-width: 30%;
left: 10%;
border-radius: 20px;
}
.about-point-box2 img{
position: absolute;
float:right;
max-width: 30%;
right: 10%;
border-radius: 20px;
}
}
@media only screen and (max-width: 1280px) {
.about-point-box img{
position: absolute;
float: left;
max-width: 30%;
left: 5%;
border-radius: 20px;
}
.about-point-box2 img{
position: absolute;
float:right;
max-width: 30%;
right: 5%;
border-radius: 20px;
}
}
@media only screen and (max-width: 1080px) {
.about-point-box img{
position: absolute;
float: left;
max-width: 30%;
left: 5%;
border-radius: 15px;
margin: 20px 0 0;
}
.about-point-box2 img{
position: absolute;
float:right;
max-width: 30%;
right: 5%;
border-radius: 15px;
margin: 20px 0 0;
}
}
@media only screen and (max-width: 835px) {
.about-point-box img{
position: static;
float: none;
max-width: 70%;
left: auto;
border-radius: 15px;
margin: 0;
}
.about-point-box2 img{
position: static;
float: none;
max-width: 70%;
right: auto;
border-radius: 15px;
margin: 0;
}
}
@media only screen and (max-width: 480px) {
.about-point-box img{
position: static;
float: none;
max-width: 80%;
left: auto;
border-radius: 15px;
margin: 0;
}
.about-point-box2 img{
position: static;
float: none;
max-width: 80%;
right: auto;
border-radius: 15px;
margin: 0;
}
}

.about-point-text{
float: right;
width: 100%;
padding: 0 15% 0 17%;
}
.about-point-box2 .about-point-text{
float: left;
width: 100%;
padding: 0 35% 0 0;
}
@media only screen and (max-width: 1440px) {
.about-point-text{
float: right;
width: 100%;
padding: 0 15% 0 30%;
}
.about-point-box2 .about-point-text{
float: left;
width: 100%;
padding: 0 35% 0 0;
}
}
@media only screen and (max-width: 1280px) {
.about-point-text{
float: right;
width: 100%;
padding: 0 0 0 35%;
}
.about-point-box2 .about-point-text{
float: left;
width: 100%;
padding: 0 30% 0 0;
}
}
@media only screen and (max-width: 1080px) {
.about-point-text{
float: right;
width: 100%;
padding: 0 0 0 32%;
}
.about-point-box2 .about-point-text{
float: left;
width: 100%;
padding: 0 35% 0 2%;
}
}
@media only screen and (max-width: 835px) {
.about-point-text{
clear: both;
float: left;
width: 100%;
padding: 0;
}
.about-point-box2 .about-point-text{
clear: both;
float: left;
width: 100%;
padding: 0;
}
}

#about-point h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 25px;
line-height: 140%;
font-weight: 500;
}
#about-point h3 span{
color: #11ae78;
font-weight: 400;
font-size: 25px;
line-height: 300%;
}
@media only screen and (max-width: 1080px) {
#about-point h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 25px;
line-height: 140%;
font-weight: 500;
}
#about-point h3 span{
color: #11ae78;
font-weight: 400;
font-size: 20px;
line-height: 300%;
}
}
@media only screen and (max-width: 835px) {
#about-point h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-size: 25px;
line-height: 140%;
font-weight: 500;
}
}
@media only screen and (max-width: 414px) {
#about-point h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0;
text-align: center;
font-size: 20px;
line-height: 140%;
font-weight: 500;
}
#about-point h3 span{
color: #11ae78;
font-weight: 400;
font-size: 20px;
line-height: 250%;
}
}

#about-point .about-point-box p,#about-point .about-point-box2 p{
text-align: left;
text-align: justify;
text-justify: inter-ideograph;
font-size: 17px;
}
@media only screen and (max-width: 414px) {
#about-point .about-point-box p,#about-point .about-point-box2 p{
text-align: left;
text-align: justify;
text-justify: inter-ideograph;
font-size: 16px;
}
}

#greeting{
clear: both;
float: left;
width:70%;
height: auto;
margin: 0 15% 0;
padding: 40px 3% 60px;
background: #fee4d7;
}
@media only screen and (max-width: 1600px) {
#greeting{
clear: both;
float: left;
width:80%;
height: auto;
margin: 0 10% 0;
padding: 40px 3% 60px;
background: #fee4d7;
}
}
@media only screen and (max-width: 1440px) {
#greeting{
clear: both;
float: left;
width:90%;
height: auto;
margin: 0 5% 0;
padding: 40px 3% 60px;
background: #fee4d7;
}
}
@media only screen and (max-width: 1280px) {
#greeting{
clear: both;
float: left;
width:90%;
height: auto;
margin: 0 5% 0;
padding: 30px 5% 50px;
background: #fee4d7;
}
}
@media only screen and (max-width: 640px) {
#greeting{
clear: both;
float: left;
width:100%;
height: auto;
margin: 0 0 0;
padding: 30px 5% 30px;
background: #fee4d7;
}
}

#greeting h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
font-weight: 500;
font-size: 30px;
}
#greeting h2 span{
color: #fff;
font-size: 25px;
line-height: 300%;
}
@media only screen and (max-width: 640px) {
#greeting h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 25px;
}
#greeting h2 span{
color: #fff;
font-size: 20px;
line-height: 250%;
}
}

#greeting img{
float: right;
max-width: 25%;
border: 2px solid #fff;
}
@media only screen and (max-width: 640px) {
#greeting img{
float: none;
max-width: 50%;
border: 2px solid #fff;
}
}

#greeting-box{
float: left;
width: 70%;
height: auto;
margin: 0;
padding: 40px 3%;
background: #fff;
border-radius: 15px;
}
@media only screen and (max-width: 1280px) {
#greeting-box{
float: left;
width: 70%;
height: auto;
margin: 0;
padding: 40px 3%;
background: #fff;
border-radius: 10px;
}
}
@media only screen and (max-width: 640px) {
#greeting-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 30px 5%;
background: #fff;
border-radius: 10px;
}
}

#greeting h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 25px;
font-weight: 400;
line-height: 100%;
}
#greeting h3 span{
font-size: 17px;
padding: 0 1em 0 0;
}
@media only screen and (max-width: 640px) {
#greeting h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align:center;
font-size: 25px;
font-weight: 500;
line-height: 100%;
}
}

#greeting p{
text-align: left;
text-align: justify;
text-justify: inter-ideograph;
font-size: 17px;
line-height: 200%;
margin: 0;
}
@media only screen and (max-width: 1280px) {
#greeting p{
text-align: left;
text-align: justify;
text-justify: inter-ideograph;
font-size: 16px;
line-height: 160%;
margin: 0;
}
}

#about-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 150px 0 150px;
padding: 0 15%;
text-align: center;
}
@media only screen and (max-width: 1440px) {
#about-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 150px 0 150px;
padding: 0 5%;
text-align: center;
}
}
@media only screen and (max-width: 835px) {
#about-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 120px 0 120px;
padding: 0 5%;
text-align: center;
}
}
@media only screen and (max-width: 480px) {
#about-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 90px 0 90px;
padding: 0 5%;
text-align: center;
}
}

#about-area h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 40px 0 40px;
padding: 0 0 10px;
text-align: center;
font-size: 30px;
font-weight: 500;
line-height: 100%;
border-bottom:1px solid #111;
}
#about-area p{
text-align: center;
font-size: 20px;
line-height: 200%;
margin: 0;
}
@media only screen and (max-width: 1280px) {
#about-area p{
text-align: center;
font-size: 17px;
line-height: 160%;
margin: 0;
}
}
@media only screen and (max-width: 1080px) {
#about-area h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 30px;
padding: 0 0 10px;
text-align: center;
font-size: 25px;
font-weight: 500;
line-height: 100%;
border-bottom:1px solid #111;
}
}
@media only screen and (max-width: 480px) {
#about-area h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 15px;
padding: 0 0 10px;
text-align: center;
font-size: 20px;
font-weight: 500;
line-height: 100%;
border-bottom:1px solid #111;
}
#about-area p{
text-align: center;
font-size: 16px;
line-height: 160%;
margin: 0;
}
}

#company{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 15%;
}
@media only screen and (max-width: 1440px) {
#company{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 5%;
}
}

#company h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 0;
background: #eee;
font-size: 25px;
line-height: 100%;
font-weight: 500;
border-radius: 10px;
text-align: center;
}
@media only screen and (max-width: 1080px) {
#company h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 0;
background: #eee;
font-size: 20px;
line-height: 100%;
font-weight: 500;
border-radius: 7px;
text-align: center;
}
}

#company dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 15%;
}
#company dt{
clear: both;
float: left;
width: 30%;
height: auto;
margin: 0 0 20px;
padding: 0 0 20px;
text-align: left;
font-size: 20px;
line-height: 120%;
border-bottom: 1px solid #ddd;
}
#company dd{
float: right;
width: 70%;
height: auto;
margin: 0 0 20px;
padding: 0 0 20px 2%;
text-align: left;
font-size: 20px;
line-height: 120%;
border-bottom: 1px solid #ddd;
}
@media only screen and (max-width: 1080px) {
#company dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0%;
}
#company dt{
clear: both;
float: left;
width: 30%;
height: auto;
margin: 0 0 20px;
padding: 0 0 20px;
text-align: left;
font-size: 17px;
line-height: 120%;
border-bottom: 1px solid #ddd;
}
#company dd{
float: right;
width: 70%;
height: auto;
margin: 0 0 20px;
padding: 0 0 20px 2%;
text-align: left;
font-size: 17px;
line-height: 120%;
border-bottom: 1px solid #ddd;
}
}
@media only screen and (max-width: 640px) {
#company dt{
clear: both;
float: left;
width: 30%;
height: auto;
margin: 0 0 15px;
padding: 0 0 15px;
text-align: left;
font-size: 16px;
line-height: 120%;
border-bottom: 1px solid #ddd;
}
#company dd{
float: right;
width: 70%;
height: auto;
margin: 0 0 15px;
padding: 0 0 15px 2%;
text-align: left;
font-size: 16px;
line-height: 120%;
border-bottom: 1px solid #ddd;
}
}

#company p{
text-align: center;
font-size: 15px;
margin: 0;
line-height: 120%;
}
@media only screen and (max-width: 414px) {
#company p{
text-align: center;
font-size: 13px;
margin: 0;
line-height: 120%;
}
}

#faq{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 20%;
}
@media only screen and (max-width: 1280px) {
#faq{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 15%;
}
}
@media only screen and (max-width: 1080px) {
#faq{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5%;
}
#faq p{
font-size: 17px;
}
}

.faq{
clear: both;
float: left;
width: 100%;
    margin: 0 0 30px;
	padding:20px 3% 20px 5%;
	background: url(assets/image/faq-q.webp) no-repeat top left/8%,#dff1ed;
	text-align: left;
	line-height: 150%;
	font-size: 20px;
}
@media only screen and (max-width: 1080px) {
.faq{
clear: both;
float: left;
width: 100%;
    margin: 0 0 30px;
	padding:15px 3% 15px 5%;
	background: url(assets/image/faq-q.webp) no-repeat top left/10%,#dff1ed;
	text-align: left;
	line-height: 150%;
	font-size: 17px;
}
}
@media only screen and (max-width: 835px) {
.faq{
clear: both;
float: left;
width: 100%;
    margin: 0 0 30px;
	padding:15px 3% 15px 3%;
	background: url(assets/image/faq-q.webp) no-repeat top left/12%,#dff1ed;
	text-align: left;
	line-height: 150%;
	font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
.faq{
clear: both;
float: left;
width: 100%;
    margin: 0 0 30px;
	padding:15px 3% 15px 3%;
	background: url(assets/image/faq-q.webp) no-repeat top left/13%,#dff1ed;
	text-align: left;
	line-height: 120%;
	font-size: 17px;
}
}
@media only screen and (max-width: 414px) {
.faq{
clear: both;
float: left;
width: 100%;
    margin: 0 0 30px;
	padding:15px 3% 15px 3%;
	background: url(assets/image/faq-q.webp) no-repeat top left/14%,#dff1ed;
	text-align: left;
	line-height: 120%;
	font-size: 17px;
}
}

.faq a,.faq span{
display: block;
text-decoration: none;
color: #111;
padding: 0 4% 0 40px;
font-size: 20px;
}
.faq span{
background: none;
font-size: 20px;
}
@media only screen and (max-width: 1080px) {
.faq a,.faq span{
display: block;
text-decoration: none;
color: #111;
padding: 0 4% 0 40px;
font-size: 17px;
}
.faq span{
background: none;
font-size: 17px;
}
}
@media only screen and (max-width: 835px) {
.faq a,.faq span{
display: block;
text-decoration: none;
color: #111;
padding: 0 4% 0 65px;
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
.faq a,.faq span{
display: block;
text-decoration: none;
color: #111;
padding: 0 4% 0 12%;
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
.faq a,.faq span{
display: block;
text-decoration: none;
color: #111;
padding: 0 4% 0 12%;
font-size: 16px;
}
}

.morefaq{
clear: both;
float: left;
width: 95%;
height: auto;
margin: 20px 0 20px 5%;
padding: 30px 5% 0 6%;
background: url(assets/image/faq-a.webp) no-repeat left top/5%,#fff;
border-radius: 7px;
border: 1px solid #11ae78;
}
main #faq .morefaq p{
font-size: 17px;
line-height: 180%;
text-align: left;
margin: 0 0 30px;
}
@media only screen and (max-width: 1080px) {
.morefaq{
clear: both;
float: left;
width: 95%;
height: auto;
margin: 20px 0 20px 5%;
padding: 30px 5% 0 7%;
background: url(assets/image/faq-a.webp) no-repeat left top/5%,#fff;
border-radius: 7px;
border: 1px solid #11ae78;
}
main #faq .morefaq p{
font-size: 16px;
line-height: 160%;
text-align: left;
margin: 0 0 30px;
}
}
@media only screen and (max-width: 835px) {
.morefaq{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 5px 0%;
padding: 30px 5% 0 7%;
background: url(assets/image/faq-a.webp) no-repeat left top/6%,#fff;
border-radius: 7px;
border: 1px solid #11ae78;
}
}
@media only screen and (max-width: 640px) {
.morefaq{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 5px 0%;
padding: 30px 5% 0 7%;
background: url(assets/image/faq-a.webp) no-repeat left top/7%,#fff;
border-radius: 7px;
border: 1px solid #11ae78;
}
}
@media only screen and (max-width: 480px) {
main #faq .morefaq p{
font-size: 16px;
line-height: 160%;
text-align: left;
margin: 0 0 30px;
}
}
@media only screen and (max-width: 414px) {
.morefaq{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 5px 0%;
padding: 30px 5% 0 7%;
background: url(assets/image/faq-a.webp) no-repeat left top/8%,#fff;
border-radius: 7px;
border: 1px solid #11ae78;
}
}

#pri{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 25%;
text-align: left;
}
@media only screen and (max-width: 1280px) {
#pri{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 20%;
text-align: left;
}
}
@media only screen and (max-width: 1080px) {
#pri{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 15%;
text-align: left;
}
}
@media only screen and (max-width: 835px) {
#pri{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5%;
text-align: left;
}
}

main #pri p{
font-size: 17px;
margin: 0 0 30px;
line-height: 160%;
text-align: left;
}
@media only screen and (max-width: 1080px) {
main #pri p{
font-size: 16px;
margin: 0 0 30px;
line-height: 160%;
text-align: left;
}
}

#pri h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 30px;
padding: 0 0 5px;
text-align: left;
font-size: 20px;
font-weight: 500;
line-height: 120%;
border-bottom: 1px solid #111;
}
@media only screen and (max-width: 835px) {
#pri h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 30px 0 30px;
padding: 0 0 5px;
text-align: left;
font-size: 17px;
font-weight: 500;
line-height: 120%;
border-bottom: 1px solid #111;
}
}
@media only screen and (max-width: 480px) {
#pri h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 25px 0 25px;
padding: 0 0 5px;
text-align: left;
font-size: 17px;
font-weight:500;
line-height: 120%;
border-bottom: 1px solid #111;
}
}

#pri ol,#pri ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 0 2%;
}
#pri ol li{
margin: 0 0 25px;
padding: 0;
font-size: 17px;
line-height: 160%;
}
#pri ol ol,#pri ol ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 15px;
padding: 0 0 0 3%;
}
#pri ol ol li{
margin: 0 0 10px;
padding: 0;
font-size: 17px;
line-height: 160%;
list-style-type: decimal-leading-zero;
}
#pri ol ol ul li{
margin: 0 0 10px;
padding: 0;
font-size: 17px;
line-height: 160%;
list-style-type: disc;
}
@media only screen and (max-width: 1080px) {
#pri ol li{
margin: 0 0 25px;
padding: 0;
font-size: 16px;
line-height: 160%;
}
#pri ol ol li{
margin: 0 0 10px;
padding: 0;
font-size: 16px;
line-height: 160%;
list-style-type: decimal-leading-zero;
}
#pri ol ol ul li{
margin: 0 0 10px;
padding: 0;
font-size: 16px;
line-height: 160%;
list-style-type: disc;
}
}
@media only screen and (max-width: 640px) {
#pri ol,#pri ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 0 3%;
}
#pri ol ol,#pri ol ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 15px;
padding: 0 0 0 5%;
}
}
@media only screen and (max-width: 480px) {
#pri ol,#pri ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 0 4%;
}
#pri ol ol,#pri ol ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 15px;
padding: 0 0 0 7%;
}
#pri ol li{
margin: 0 0 20px;
padding: 0;
font-size: 15px;
line-height: 160%;
}
#pri ol ol li{
margin: 0 0 10px;
padding: 0;
font-size: 15px;
line-height: 160%;
list-style-type: decimal-leading-zero;
}
#pri ol ol ul li{
margin: 0 0 5px;
padding: 0;
font-size: 15px;
line-height: 160%;
list-style-type: disc;
}
}
@media only screen and (max-width: 414px) {
#pri ol,#pri ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 0 5%;
}
#pri ol ol,#pri ol ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 15px;
padding: 0 0 0 8%;
}
}

#pri blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 3% 0;
background: #eee;
border-radius: 7px;
}

main #pri blockquote p{
margin: 5px 0 25px;
}
@media only screen and (max-width: 480px) {
main #pri blockquote p{
margin: 5px 0 20px;
font-size: 16px;
}
}
@media only screen and (max-width: 414px) {
main #pri blockquote p{
margin: 5px 0 20px;
font-size: 15px;
}
}

#blog{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:0;
    padding: 50px 15% 0 15%;
}
@media only screen and (max-width: 1600px) {
#blog{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:0;
    padding: 50px 15% 0 10%;
}
}
@media only screen and (max-width: 1440px) {
#blog{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:0;
    padding: 50px 10% 0 5%;
}
}
@media only screen and (max-width: 1280px) {
#blog{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:0;
    padding: 50px 5% 0 5%;
}
}
@media only screen and (max-width: 1080px) {
#blog{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:0;
    padding: 0 5% 0 5%;
}
}
@media only screen and (max-width: 835px) {
#blog{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin:0;
    padding: 0 1%;
}
}

#blog-box{
    clear: both;
    float: left;
    width: 80%;
    height: auto;
    margin: 0;
    padding: 0 0 50px;
}
@media only screen and (max-width: 1440px) {
#blog-box{
    clear: both;
    float: left;
    width: 80%;
    height: auto;
    margin: 0;
    padding: 0 3% 50px 0;
}
}
@media only screen and (max-width: 1280px) {
#blog-box{
    padding: 0 3% 20px 0;
}
}
@media only screen and (max-width: 1080px) {
#blog-box{
    clear: both;
    float: left;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 0 50px 0;
}
}
@media only screen and (max-width: 835px) {
#blog-box{
    padding: 0 0 0px;
}
}
@media only screen and (max-width: 640px) {
#blog-box{
    padding: 0 0 5px;
}
}

#blog-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width: 1080px) {
#blog-area{
margin: 40px 0 20px;
}
}
@media only screen and (max-width: 835px) {
#blog-area{
margin: 20px 0 20px;
}
}
@media only screen and (max-width: 640px) {
#blog-area{
flex-wrap: wrap;
margin: 20px 0 0;
}
}

.blog-blog{
flex: 1;
margin: 0 2% 50px;
flex-basis:46%;
}
@media only screen and (max-width: 835px) {
.blog-blog{
flex: 1;
margin: 0 2% 40px;
flex-basis:46%;
}
}
@media only screen and (max-width: 640px) {
.blog-blog{
flex: 1;
margin: 0 2% 40px;
flex-basis:46%;
}
}

main .blog-blog p{
text-align: left;
font-size: 15px;
margin: 10px 0 0;
line-height: 100%;
}
@media only screen and (max-width: 640px) {
main .blog-blog p{
text-align: left;
font-size: 13px;
margin: 10px 0 0;
line-height: 100%;
}
}

#blog-area .blog-blog img{
width: 100%;
max-width: 100%;
border: 1px solid #11ae78;
}

#blog-area h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 0;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 150%;
font-weight: 400;
overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#blog-area h3 a:link,#blog-area h3 a:visited{
color: #111;
text-decoration: none;
}
#blog-area h3 a:hover{
color: #11ae78;
font-weight: 700;
text-decoration: underline;
}
@media only screen and (max-width: 1280px) {
#blog-area h3{
font-size: 16px;
}
}
@media only screen and (max-width: 835px) {
#blog-area h3{
font-size: 15px;
}
}
@media only screen and (max-width: 640px) {
#blog-area h3{
margin: 10px 0 0;
}
}

#blog-area ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 10px 0 0;
padding: 0;
}
#blog-area li{
float: left;
list-style-type: none;
font-size: 13px;
margin: 0 2% 2px 0;
padding: 0;
}
#blog-area li a:link,#blog-area li a:visited{
background: #11ae78;
color: #fff;
text-decoration: none;
padding: 2px 10px;
border-radius: 30px;
font-weight: 700;
}
#blog-area li a:hover{
background: #8fdec3;
}
@media only screen and (max-width: 835px) {
#blog-area li{
float: left;
list-style-type: none;
font-size: 12px;
margin: 0 2% 2px 0;
padding: 0;
}
}
@media only screen and (max-width: 640px) {
#blog-area li{
float: left;
list-style-type: none;
font-size: 11px;
margin: 0 2% 2px 0;
padding: 0;
}
}

#blog-single{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 0 0;
text-align: left;
}
@media only screen and (max-width: 1080px) {
#blog-single{
margin: 40px 0 50px;
padding: 0;
}
}
@media only screen and (max-width: 835px) {
#blog-single{
margin: 20px 0 50px;
padding: 0 3%;
}
}
@media only screen and (max-width: 640px) {
#blog-single{
margin: 20px 0 30px;
}
}

#single-cate{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
}

#blog-single #single-cate ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}

#blog-single #single-cate li{
list-style-type: none;
font-size: 13px;
line-height: 110%;
margin: 0 1% 10px 0;
padding: 3px 1.5%;
background: #11ae78;
border-radius: 20px;
}
#blog-single #single-cate li a:link,#blog-single #single-cate li a:visited{
color: #fff;
text-decoration: none;
text-align: center;
}

#blog-single img{
max-width: 100%;
margin: 0 0 50px;
}

#blog-single h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 0 10px;
text-align: left;
font-weight: 500;
font-size: 30px;
line-height: 120%;
border-bottom: 2px solid #11ae78;
}
@media only screen and (max-width: 1280px) {
#blog-single h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 0 10px;
text-align: left;
font-weight: 500;
font-size:25px;
line-height: 120%;
border-bottom: 2px solid #11ae78;
}
}
@media only screen and (max-width: 640px) {
#blog-single h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0 0 10px;
text-align: left;
font-weight: 500;
font-size:22px;
line-height: 120%;
border-bottom: 2px solid #11ae78;
}
}

#blog-single h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 30px;
padding:10px 1em;
text-align: left;
font-size: 25px;
line-height: 120%;
font-weight: 500;
border-radius: 7px;
border: 2px solid #11ae78;
color: #11ae78;
}
@media only screen and (max-width: 1280px) {
#blog-single h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 30px;
padding:10px 1em;
text-align: left;
font-size: 20px;
line-height: 120%;
font-weight: 500;
border-radius: 7px;
border: 2px solid #11ae78;
color: #11ae78;
}
}
@media only screen and (max-width: 640px) {
#blog-single h3{
margin:30px 0 30px;
}
}

#blog-single h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 30px;
padding:5px 1em;
text-align: left;
font-size: 25px;
line-height: 120%;
font-weight: 500;
background: #11ae78;
border-radius: 7px;
color: #fff;
}
@media only screen and (max-width: 1280px) {
#blog-single h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 30px;
padding:5px 1em;
text-align: left;
font-size: 20px;
line-height: 120%;
font-weight: 500;
background: #11ae78;
border-radius: 7px;
color: #fff;
}
}
@media only screen and (max-width: 640px) {
#blog-single h4{
margin:30px 0 30px;
}
}

#blog-single h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 30px;
padding:0 0 5px;
text-align: left;
font-size: 25px;
line-height: 120%;
font-weight:500;
border-bottom: 1px solid #111;
}
@media only screen and (max-width: 1280px) {
#blog-single h5{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 30px;
padding:0 0 5px;
text-align: left;
font-size: 20px;
line-height: 120%;
font-weight: 500;
border-bottom: 1px solid #111;
}
}
@media only screen and (max-width: 640px) {
#blog-single h5{
margin:30px 0 30px;
}
}

#blog-single h6{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 30px;
padding:0 0 5px;
text-align: left;
font-size: 20px;
line-height: 120%;
font-weight: 700;
border-bottom: 1px dashed #111;
}
@media only screen and (max-width: 640px) {
#blog-single h6{
margin:30px 0 30px;
}
}

#blog-single ul,#blog-single ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0 0 0 5%;
text-align: left;
}
#blog-single ul li{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 120%;
}
#blog-single ol li{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 120%;
}
@media only screen and (max-width: 835px) {
#blog-single ul li{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 16px;
line-height: 120%;
}
#blog-single ol li{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 16px;
line-height: 120%;
}
}

#blog-single blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 15px 3%;
background: #eee;
border-radius: 7px;
text-align: left;
font-size: 17px;
}
@media only screen and (max-width: 1280px) {
#blog-single blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 15px 3%;
background: #eee;
border-radius: 7px;
text-align: left;
font-size: 16px;
}
}
@media only screen and (max-width: 835px) {
#blog-single blockquote{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 15px 3%;
background: #eee;
border-radius: 7px;
text-align: left;
line-height: 160%;
font-size: 15px;
}
}

#blog-single table{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-spacing: 0px;
}
#blog-single th{
padding: 10px;
background: #eee;
font-weight: 500;
font-size: 17px;
line-height: 120%;
text-align: center;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}
#blog-single td{
padding: 10px;
font-size: 17px;
line-height: 120%;
text-align: center;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}
#blog-single caption{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding:0 0 10px;
text-align: center;
font-size: 20px;
line-height: 100%;
font-weight: 500;
}
@media only screen and (max-width: 1280px) {
#blog-single th{
padding: 10px;
background: #eee;
font-weight: 500;
font-size: 16px;
line-height: 120%;
text-align: center;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}
#blog-single td{
padding: 10px;
font-size: 16px;
line-height: 120%;
text-align: center;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}
#blog-single caption{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding:0 0 10px;
text-align: center;
font-size: 18px;
line-height: 100%;
font-weight: 500;
}
}
@media only screen and (max-width: 1080px) {
#blog-single th{
padding: 10px;
background: #eee;
font-weight: 500;
font-size: 15px;
line-height: 120%;
text-align: center;
}
#blog-single td{
padding: 10px;
font-size: 15px;
line-height: 120%;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#blog-single th{
padding: 10px;
background: #eee;
font-weight: 500;
font-size: 14px;
line-height: 120%;
text-align: center;
}
#blog-single td{
padding: 10px;
font-size: 14px;
line-height: 120%;
text-align: center;
}
#blog-single caption{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding:0 0 10px;
text-align: center;
font-size: 17px;
line-height: 100%;
font-weight: 500;
}
}
@media only screen and (max-width: 480px) {
#blog-single th{
padding: 10px;
background: #eee;
font-weight: 500;
font-size: 13px;
line-height: 120%;
text-align: center;
}
#blog-single td{
padding: 10px;
font-size: 13px;
line-height: 120%;
text-align: center;
}
}

#next-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 0;
padding: 0;
}
#next-back span{
width: 50%;
padding: 0 5%;
}
#next-back a:link,#next-back a:visited{
color: #111;
font-size: 15px;
line-height: 100%;
margin: 0;
text-decoration: underline;
}
#next-back a:hover{
color: #11ae78;
}
@media only screen and (max-width: 1080px) {
#next-back{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 0;
padding: 0;
}
}
@media only screen and (max-width: 640px) {
#next-back span{
float: left;
width: 50%;
padding: 0 2%;
text-align: center;
}
#next-back a:link,#next-back a:visited{
color: #111;
font-size: 13px;
line-height: 100%;
margin: 0;
}
#next-back a:hover{
color: #11ae78;
}
}

main #blog-single p{
text-align: left;
line-height: 180%;
margin: 0 0 40px;
font-size: 17px;
}
main #blog-single p.p-date{
text-align: right;
font-size: 15px;
margin: 0 0 50px;
line-height: 100%;
}
@media only screen and (max-width: 835px) {
main #blog-single p{
text-align: left;
line-height: 160%;
margin: 0 0 30px;
font-size: 16px;
}
}
@media only screen and (max-width: 640px) {
main #blog-single p{
text-align: left;
line-height: 160%;
margin: 0 0 30px;
font-size: 15px;
}
}

#cate{
float: right;
width: 20%;
height: auto;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 1080px) {
#cate{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}
@media only screen and (max-width: 835px) {
#cate{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 30px 3% 0;
}
}

#cate h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 5px;
border-bottom: 1px solid #111;
font-size: 20px;
font-weight: 700;
text-align: left;
line-height: 120%;
}

#cate ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#cate li{
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 1px dashed #666;
font-size: 17px;
line-height: 120%;
list-style-type: none;
text-align: left;
}
#cate li a:link,#cate li a:visited{
color: #111;
text-decoration: none;
}
#cate li a:hover{
text-decoration: underline;
color: #11ae78;
}
@media only screen and (max-width: 1280px) {
#cate li{
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 1px dashed #666;
font-size: 16px;
line-height: 120%;
list-style-type: none;
text-align: left;
}
}

#blog-nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
}
@media only screen and (max-width: 1080px) {
#blog-nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
main #blog-nav p{
font-size: 13px;
}
}

#service{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
}

#service-are{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 0 15%;
display: flex;
flex-wrap: wrap;
align-items: top;
}
.service-box{
flex: 1;
flex-basis:48%;
margin: 0 1% 30px;
padding: 30px 2% 5px;
border:10px solid #dff1ed;
background: url(assets/image/service-area.webp) no-repeat right bottom/30%;
border-radius: 10px;
}
@media only screen and (max-width: 1600px) {
#service-are{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 0 10%;
display: flex;
flex-wrap: wrap;
align-items: top;
}
}
@media only screen and (max-width: 1280px) {
#service-are{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 0 5%;
display: flex;
flex-wrap: wrap;
align-items: top;
}
}
@media only screen and (max-width: 1080px) {
#service-are{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0 5%;
display: flex;
flex-wrap: wrap;
align-items: top;
}
.service-box{
flex: 1;
flex-basis:100%;
margin: 0 0% 30px;
padding: 30px 2% 5px;
border:10px solid #dff1ed;
background: url(assets/image/service-area.webp) no-repeat right bottom/20%;
border-radius: 10px;
}
}
@media only screen and (max-width: 640px) {
#service-are{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0 5%;
display: flex;
flex-wrap: wrap;
align-items: top;
}
}
@media only screen and (max-width: 480px) {
.service-box{
flex: 1;
flex-basis:100%;
margin: 0 0% 30px;
padding: 30px 2% 5px;
border:10px solid #dff1ed;
background: url(assets/image/service-area.webp) no-repeat right bottom/25%;
border-radius: 10px;
}
}

#service-are img{
max-width: 100%;
margin: 0 0 30px;
border-radius: 10px;
}
@media only screen and (max-width: 1080px) {
#service-are img{
float: left;
max-width: 45%;
margin: 0 5% 30px 0;
border-radius: 10px;
}
}
@media only screen and (max-width: 640px) {
#service-are img{
float: left;
max-width:80%;
margin: 0 10% 30px;
border-radius: 10px;
}
}
@media only screen and (max-width: 480px) {
#service-are img{
float: left;
max-width:90%;
margin: 0 5% 30px;
border-radius: 10px;
}
}

#service-are h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 5px;
text-align: center;
line-height: 120%;
font-weight: 500;
font-size: 30px;
color: #11ae78;
border-bottom:1px solid #11ae78;
}
#service-are p{
text-align: left;
font-size: 17px;
}
@media only screen and (max-width: 1280px) {
#service-are h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 5px;
text-align: center;
line-height: 120%;
font-weight: 500;
font-size: 25px;
color: #11ae78;
border-bottom:1px solid #11ae78;
}
}
@media only screen and (max-width: 1080px) {
#service-are h2{
clear: none;
float: left;
width: 50%;
height: auto;
margin: 0 0 20px;
padding: 0 0 5px;
text-align: center;
line-height: 120%;
font-weight: 500;
font-size: 25px;
color: #11ae78;
border-bottom:1px solid #11ae78;
}
#service-are p{
text-align: left;
font-size: 16px;
}
}
@media only screen and (max-width: 640px) {
#service-are h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 0 5px;
text-align: center;
line-height: 120%;
font-weight: 500;
font-size: 25px;
color: #11ae78;
border-bottom:1px solid #11ae78;
}
}

#service-are h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 10px 0;
text-align: center;
line-height: 100%;
border: 1px solid #999;
border-radius: 50px;
font-size: 20px;
font-weight: 500;
}
@media only screen and (max-width: 414px) {
#service-are h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 10px 0;
text-align: center;
line-height: 100%;
border: 1px solid #999;
border-radius: 50px;
font-size: 17px;
font-weight: 500;
}
}

#service-are ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#service-are ul li{
margin: 0 0% 10px 5%;
padding: 0 0 10px;
font-size: 15px;
line-height: 120%;
text-align: left;
flex: 1;
flex-basis:45%;
border-bottom: 1px dashed #999;
}
#service-are ul p{
clear: both;
float: left;
width: 100%;
text-align: right;
font-size: 15px;
}
@media only screen and (max-width: 1280px) {
#service-are ul li{
margin: 0 3% 10px 5%;
padding: 0 0 10px;
font-size: 15px;
line-height: 120%;
text-align: left;
flex: 1;
flex-basis:92%;
border-bottom: 1px dashed #999;
}
#service-are ul p{
clear: both;
float: left;
width: 100%;
text-align: right;
font-size: 15px;
margin: 0;
}
}
@media only screen and (max-width: 1080px) {
#service-are ul li{
margin: 0 0% 10px 5%;
padding: 0 0 10px;
font-size: 15px;
line-height: 120%;
text-align: left;
flex: 1;
flex-basis:45%;
border-bottom: 1px dashed #999;
}
}
@media only screen and (max-width: 480px) {
#service-are ul li{
margin: 0 0% 10px 7%;
padding: 0 0 10px;
font-size: 15px;
line-height: 120%;
text-align: left;
flex: 1;
flex-basis:93%;
border-bottom: 1px dashed #999;
}
}
@media only screen and (max-width: 414px) {
#service-are ul li{
margin: 0 0% 10px 7%;
padding: 0 0 10px;
font-size: 14px;
line-height: 120%;
text-align: left;
flex: 1;
flex-basis:93%;
border-bottom: 1px dashed #999;
}
}

#flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 15% 50px;
background: #dff1ed;
}
@media only screen and (max-width: 1600px) {
#flow{
padding: 100px 12% 50px;
}
}
@media only screen and (max-width: 1440px) {
#flow{
padding: 100px 10% 50px;
}
}
@media only screen and (max-width: 1280px) {
#flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 5% 50px;
background: #dff1ed;
}
}
@media only screen and (max-width: 1080px) {
#flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 80px 5% 0px;
background: #dff1ed;
}
}
@media only screen and (max-width: 640px) {
#flow{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 60px 5% 0px;
background: #dff1ed;
}
}

#flow h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0;
text-align: center;
font-weight: 500;
font-size: 35px;
line-height: 120%;
}
#flow h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-weight: 700;
font-size: 25px;
line-height: 120%;
}
@media only screen and (max-width: 1080px) {
#flow h2{
margin: 0 0 50px;
font-size: 30px;
}
}
@media only screen and (max-width: 640px) {
#flow h2{
margin: 0 0 50px;
font-size: 25px;
}
#flow h3{
margin: 0 0 10px;
font-size: 22px;
font-weight: 500;
}
}
@media only screen and (max-width: 414px) {
#flow h3{
margin: 0 0 10px;
font-size: 20px;
}
}

#flow ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding:20px 3% 30px;
background: #fff;
border-radius: 10px;
border: 2px solid #80dabb;
display: flex;
}
@media only screen and (max-width: 1280px) {
#flow ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding:20px 1% 30px;
background: #fff;
border-radius: 10px;
border: 2px solid #80dabb;
display: flex;
}
}
@media only screen and (max-width: 1080px) {
#flow ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding:20px 5% 30px;
background: #fff;
border-radius: 10px;
border: 2px solid #80dabb;
display: inherit;
}
}
#flow ol li{
font-size: 17px;
line-height: 150%;
text-align: left;
flex: 1 0 auto;
margin: 0 1.5%;
flex-basis:30.3%;
list-style-type: none;
}
#flow ol li:first-letter{
font-size: 40px;
font-weight: 700;
margin: 0 1% 0 0;
color: #80dabb;
}
#flow ol li strong{
font-weight: 700;
font-size: 1.3em;
line-height: 300%;
}
#flow ol li img{
max-width: 40%;
margin: 0 60% 15px 0;
}
@media only screen and (max-width: 1280px) {
#flow ol li strong{
font-weight: 700;
font-size: 1.2em;
line-height: 300%;
}
}
@media only screen and (max-width: 1080px) {
#flow ol li{
clear: both;
float: left;
width: 100%;
font-size: 17px;
line-height: 150%;
text-align: left;
flex: 1 0 auto;
margin: 0 0 30px;
flex-basis:100%;
list-style-type: none;
}
#flow ol li strong{
font-weight: 700;
font-size: 1.4em;
line-height: 300%;
}
#flow ol li img{
float: left;
max-width: 20%;
margin: 0 5% 0 0;
}
}
@media only screen and (max-width: 640px) {
#flow ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 60px;
padding:20px 5% 10px;
background: #fff;
border-radius: 10px;
border: 2px solid #80dabb;
display: inherit;
}
#flow ol li strong{
font-weight: 700;
font-size: 1.3em;
line-height: 300%;
}
}
@media only screen and (max-width: 480px) {
#flow ol li{
clear: both;
float: left;
width: 100%;
font-size: 17px;
line-height: 150%;
text-align:center;
flex: 1 0 auto;
margin: 0 0 30px;
flex-basis:100%;
list-style-type: none;
}
#flow ol li img{
float: left;
max-width: 30%;
margin: 0 35% 15px;
}
}
@media only screen and (max-width: 414px) {
#flow ol li strong{
font-weight: 700;
font-size: 1.2em;
line-height: 300%;
}
#flow ol li img{
float: left;
max-width: 40%;
margin: 0 30% 15px;
}
}

#ser-voice{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 100px 0 100px;
text-align: center;
}
@media only screen and (max-width: 1080px) {
#ser-voice{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 60px 0 50px;
text-align: center;
}
}
@media only screen and (max-width: 640px) {
#ser-voice{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 60px 0 0;
text-align: center;
}
}
@media only screen and (max-width: 480px) {
#ser-voice{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 60px 0 10px;
text-align: center;
}
}

#ser-voice h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: center;
font-size: 40px;
font-weight: 500;
line-height: 100%;
}
@media only screen and (max-width: 1280px) {
#ser-voice h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
font-size: 35px;
font-weight: 500;
line-height: 100%;
}
}
@media only screen and (max-width: 1080px) {
#ser-voice h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: center;
font-size: 30px;
font-weight: 500;
line-height: 100%;
}
}
@media only screen and (max-width: 480px) {
#ser-voice h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: center;
font-size: 25px;
font-weight: 500;
line-height: 100%;
}
}

#ser-voice-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 30px;
padding: 0 5%;
display: flex;
}
@media only screen and (max-width: 1440px) {
#ser-voice-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px 0 30px;
padding: 0 1%;
display: flex;
}
}
@media only screen and (max-width: 1080px) {
#ser-voice-area{
margin: 40px 0 20px;
flex-wrap: wrap;
}
}
@media only screen and (max-width: 835px) {
#ser-voice-area{
margin: 20px 0 20px;
}
}
@media only screen and (max-width: 640px) {
#ser-voice-area{
flex-wrap: wrap;
margin: 20px 0 0;
}
}

.ser-voice-blog{
flex: 1;
margin: 0 1% 0 0;
padding: 65px 0 0 2%;
flex-basis:24%;
background: url(assets/image/ser-voice.webp) no-repeat left top/120px;
}
@media only screen and (max-width: 1280px) {
.ser-voice-blog{
flex: 1;
margin: 0 1% 0 0;
padding: 55px 0 0 2%;
flex-basis:24%;
background: url(assets/image/ser-voice.webp) no-repeat left top/100px;
}
}
@media only screen and (max-width: 1080px) {
.ser-voice-blog{
flex: 1;
margin: 0 1% 15px 0;
padding: 55px 0 0 2%;
flex-basis:49%;
background: url(assets/image/ser-voice.webp) no-repeat left top/100px;
}
}
@media only screen and (max-width: 640px) {
.ser-voice-blog{
flex: 1;
margin: 0 1% 15px 1%;
padding: 55px 0 0 2%;
flex-basis:98%;
background: url(assets/image/ser-voice.webp) no-repeat center top/100px;
}
}

#ser-voice-area .ser-voice-blog img{
max-width: 100%;
border: 1px solid #11ae78;
}

#ser-voice-area h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 0;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 150%;
font-weight: 400;
overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#ser-voice-area h3 a:link,#ser-voice-area h3 a:visited{
color: #111;
text-decoration: none;
}
#ser-voice-area h3 a:hover{
color: #11ae78;
font-weight: 700;
text-decoration: underline;
}
@media only screen and (max-width: 1440px) {
#ser-voice-area h3{
font-size: 15px;
}
}
@media only screen and (max-width: 640px) {
#ser-voice-area h3{
margin: 10px 0 0;
}
}

#service .link-button{
clear: both;
float: none;
width:20%;
height: auto;
margin: 30px auto 0;
padding: 0;
text-align: center;
}
#service .link-button a:link,#service .link-button a:visited{
display: block;
width: auto;
margin: 0 auto;
border: 2px solid #11ae78;
background: url(assets/image/top-smile3.webp) no-repeat 95% 50%,#fff;
text-align: center;
border-radius: 7px;
font-size:17px;
color: #11ae78;
padding: 10px 2.5em 10px 2em;
text-decoration: none;
line-height: 100%;
box-shadow: 5px 5px 0 #b9ead9;
font-weight: 600;
}
#service .link-button a:hover{
border: 2px solid #11ae78;
background: url(assets/image/top-smile4.webp) no-repeat 95% 50%,#11ae78;
text-align: center;
border-radius:7px;
font-size: 17px;
color: #fff;
padding: 10px 2.5em 10px 2em;
text-decoration: none;
line-height: 100%;
font-weight: 700;
box-shadow: 5px 5px 0 #b9ead9;
}
@media only screen and (max-width: 1440px) {
#service .link-button{
clear: both;
float: none;
width:30%;
height: auto;
margin: 30px auto 0;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 1280px) {
#service .link-button a:link,#service .link-button a:visited{
font-size: 16px;
}
#service .link-button a:hover{
font-size: 16px;
}
}
@media only screen and (max-width: 835px) {
#service .link-button{
clear: both;
float: none;
width:40%;
height: auto;
margin: 30px auto 0;
padding: 0;
text-align: center;
}
#service .link-button a:link,#service .link-button a:visited{
font-size: 15px;
}
#service .link-button a:hover{
font-size: 15px;
}
}
@media only screen and (max-width: 640px) {
#service .link-button{
clear: both;
float: none;
width:50%;
height: auto;
margin: 30px auto 0;
padding: 0;
text-align: center;
}
}
@media only screen and (max-width: 480px) {
#service .link-button{
clear: both;
float: none;
width:60%;
height: auto;
margin: 30px auto 0;
padding: 0;
text-align: center;
}
#service .link-button a:link,#service .link-button a:visited{
font-size: 14px;
}
#service .link-button a:hover{
font-size: 14px;
}
}
@media only screen and (max-width: 414px) {
#service .link-button{
clear: both;
float: none;
width:70%;
height: auto;
margin: 30px auto 0;
padding: 0;
text-align: center;
}
}

#rec{
}

.rec-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 15%;
}
@media only screen and (max-width: 1440px) {
.rec-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 10%;
}
}
@media only screen and (max-width: 1280px) {
.rec-area{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 5%;
}
}
@media only screen and (max-width: 640px) {
.rec-area{
margin: 0 0 50px;
}
}

#rec h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 10px;
text-align: center;
font-size: 30px;
line-height: 100%;
font-weight: 500;
border-bottom: 5px solid #80dabb;
}
@media only screen and (max-width: 835px) {
#rec h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 10px;
text-align: center;
font-size: 25px;
line-height: 100%;
font-weight: 500;
border-bottom: 3px solid #80dabb;
}
}
@media only screen and (max-width: 480px) {
#rec h2{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 25px;
padding: 0 0 10px;
text-align: center;
font-size: 20px;
line-height: 100%;
font-weight: 500;
border-bottom:3px solid #80dabb;
}
}

#rec h2.h2sub{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 50px 0 30px;
padding: 10px 0 10px;
text-align: center;
font-size: 20px;
line-height: 100%;
font-weight: 400;
border: 1px solid #666;
border-radius: 50px;
}
@media only screen and (max-width: 835px) {
#rec h2.h2sub{
margin: 0px 0 30px;
padding: 10px 0 10px;
font-size: 20px;
}
}
@media only screen and (max-width: 640px) {
#rec h2.h2sub{
margin: 0px 0 0px;
padding: 10px 0 10px;
font-size: 20px;
}
}
@media only screen and (max-width: 480px) {
#rec h2.h2sub{
margin: 0px 0 0px;
padding: 10px 0 10px;
font-size: 17px;
}
}

#rec-voice{
clear: both;
float: left;
width: 100%;
height: auto;
margin:0 0 30px;
padding: 0 5%;
display: flex;
}
@media only screen and (max-width: 1080px) {
#rec-voice{
clear: both;
float: left;
width: 100%;
height: auto;
margin:0 0 30px;
padding: 0 0%;
display: flex;
}
}
@media only screen and (max-width: 640px) {
#rec-voice{
clear: both;
float: left;
width: 100%;
height: auto;
margin:0 0 0px;
padding: 0 0%;
display: flex;
flex-wrap: wrap;
}
}

.rec-blog{
flex: 1;
margin: 0 1% 0;
padding: 0;
flex-basis:48%;
}
@media only screen and (max-width: 640px) {
.rec-blog{
flex: 1;
margin: 0 0 30px;
padding: 0;
flex-basis:100%;
}
}

.rec-blog img{
max-width: 100%;
border: 1px solid #11ae78;
}

#rec-voice h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 0;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 150%;
font-weight: 400;
overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#rec-voice h3 a:link,#rec-voice h3 a:visited{
color: #111;
text-decoration: none;
font-weight: 400;
}
#rec-voice h3 a:hover{
color: #11ae78;
font-weight: 500;
text-decoration: underline;
}
@media only screen and (max-width: 640px) {
#rec-voice h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 15px 0 0;
padding: 0;
text-align: left;
font-size: 15px;
line-height: 150%;
font-weight: 400;
overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#rec-voice h3 a:link,#rec-voice h3 a:visited{
color: #111;
text-decoration: none;
font-weight: 400;
}
#rec-voice h3 a:hover{
color: #11ae78;
font-weight: 500;
text-decoration: underline;
}
}

#rec .link-button{
clear: both;
float: none;
width:40%;
height: auto;
margin: 30px auto 0;
padding: 0;
text-align: center;
}
#rec .link-button a:link,#rec .link-button a:visited{
display: block;
width: auto;
margin: 0 auto;
border: 2px solid #11ae78;
background: url(assets/image/top-smile3.webp) no-repeat 95% 50%,#fff;
text-align: center;
border-radius: 7px;
font-size:17px;
color: #11ae78;
padding: 10px 2.5em 10px 2em;
text-decoration: none;
line-height: 100%;
box-shadow: 5px 5px 0 #b9ead9;
font-weight: 600;
}
#rec .link-button a:hover{
border: 2px solid #11ae78;
background: url(assets/image/top-smile4.webp) no-repeat 95% 50%,#11ae78;
text-align: center;
border-radius: 7px;
font-size: 17px;
color: #fff;
padding: 10px 2.5em 10px 2em;
text-decoration: none;
line-height: 100%;
font-weight: 700;
box-shadow: 5px 5px 0 #b9ead9;
}
@media only screen and (max-width: 1280px) {
#rec .link-button{
width:60%;
}
}
@media only screen and (max-width: 835px) {
#rec .link-button{
width:70%;
}
}
@media only screen and (max-width: 640px) {
#rec .link-button{
width:80%;
}
}
@media only screen and (max-width: 480px) {
#rec .link-button{
width:100%;
}
}

#rec-pict{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 0;
}
#rec-pict img{
max-width: 100%;
}
@media only screen and (max-width: 835px) {
#rec-pict{
margin: 0 0 70px;
}
}

#tsuyomi{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#tsuyomi div{
margin: 0 2% 30px;
flex-basis:46%;
}
#tsuyomi div img{
max-width: 20%;
margin: 0 0 15px;
}
@media only screen and (max-width: 1080px) {
#tsuyomi{
margin: 0 0 50px;
}
#tsuyomi div img{
max-width: 25%;
}
}
@media only screen and (max-width: 640px) {
#tsuyomi{
margin: 0 0 30px;
}
#tsuyomi div{
margin: 0 0% 20px;
padding: 0 0 20px;
flex-basis:100%;
border-bottom: 1px dashed #999;
}
}
@media only screen and (max-width: 480px) {
#tsuyomi div img{
max-width: 30%;
}
}
@media only screen and (max-width: 480px) {
#tsuyomi{
margin: 0 0 0;
}
}

#tsuyomi h3{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: center;
line-height: 100%;
font-weight: 500;
font-size: 30px;
}
@media only screen and (max-width: 1080px) {
#tsuyomi h3{
font-size: 25px;
}
}
@media only screen and (max-width: 480px) {
#tsuyomi h3{
font-size: 20px;
}
}

#tsuyomi ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#tsuyomi li{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 130%;
}
@media only screen and (max-width: 1080px) {
#tsuyomi li{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size:16px;
line-height: 130%;
}
}
@media only screen and (max-width: 640px) {
#tsuyomi li{
margin: 0 1% 15px 5%;
padding: 0;
text-align: left;
font-size:15px;
line-height: 130%;
}
}
@media only screen and (max-width: 414px) {
#tsuyomi li{
margin: 0 1% 15px 5%;
padding: 0;
text-align: left;
font-size:16px;
line-height: 130%;
}
}

#joken{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#joken div{
margin: 0 2% 30px;
flex-basis:46%;
}
@media only screen and (max-width: 640px) {
#joken div{
margin: 0 0% 0px;
padding: 0 0 10px;
flex-basis:100%;
border-bottom: 1px dashed #999;
}
}
@media only screen and (max-width: 480px) {
#joken h3{
font-size: 20px;
}
}

#joken ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#joken li{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 130%;
}
@media only screen and (max-width: 1080px) {
#joken li{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 16px;
line-height: 130%;
}
}
@media only screen and (max-width: 640px) {
#joken li{
margin: 0 0 15px 5%;
padding: 0;
text-align: left;
font-size: 15px;
line-height: 130%;
}
}
@media only screen and (max-width: 480px) {
#joken li{
margin: 0 0 15px 5%;
padding: 0;
text-align: left;
font-size: 16px;
line-height: 130%;
}
}

p.f30{
font-size: 25px;
line-height: 180%;
}
p.f30 span{
font-size: 17px;
}
@media only screen and (max-width: 640px) {
p.f30{
font-size: 20px;
line-height: 180%;
}
p.f30 span{
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
p.f30{
font-size: 20px;
line-height: 150%;
}
p.f30 span{
font-size: 15px;
}
}

#saiyo{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0 5%;
}
@media only screen and (max-width: 1440px) {
#saiyo{
margin: 0 0 50px;
padding: 0 0%;
}
}
@media only screen and (max-width: 480px) {
#saiyo{
margin: 0 0 30px;
padding: 0 5%;
}
}

#saiyo h4{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
font-size: 35px;
font-weight: 700;
line-height: 100%;
color: #11ae78;
}
@media only screen and (max-width: 1080px) {
#saiyo h4{
margin: 0 0 40px;
font-size: 30px;
}
}
@media only screen and (max-width: 640px) {
#saiyo h4{
margin: 0 0 30px;
font-size: 25px;
}
}

#saiyo ol{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#saiyo li{
margin: 0 1%;
padding: 10px 1% 15px;
flex: 1;
flex-basis:18%;
list-style-position: inside;
text-align: center;
font-size: 15px;
line-height: 150%;
list-style-type: none;
background: url(assets/image/rec-ar.webp) no-repeat right 35%/10%;
}
#saiyo li.bno{
background: none;
}
#saiyo li strong{
font-size: 1.1em;
line-height: 200%;
font-weight: 600;
}
#saiyo li img{
max-width: 50%;
margin: 10px 0 5px;
}
@media only screen and (max-width: 1280px) {
#saiyo ol{
margin: 0 0 20px;
display: flex;
flex-wrap: wrap;
}
#saiyo li{
margin: 0 1% 20px;
padding: 10px 1% 15px;
flex: 1;
flex-basis:23%;
list-style-position: inside;
text-align: center;
font-size: 15px;
line-height: 150%;
flex-grow: 0;
}
}
@media only screen and (max-width: 1080px) {
#saiyo li{
margin: 0 1% 20px;
padding: 10px 1% 15px;
flex: 1;
flex-basis:31.3%;
list-style-position: inside;
text-align: center;
font-size: 15px;
line-height: 150%;
flex-grow: 0;
background: url(assets/image/rec-ar.webp) no-repeat right 35%/7%;
}
#saiyo li img{
max-width: 40%;
margin: 10px 0 5px;
}
}
@media only screen and (max-width: 835px) {
#saiyo li{
margin: 0 1% 20px;
padding: 10px 1% 15px;
flex: 1;
flex-basis:48%;
list-style-position: inside;
text-align: center;
font-size: 15px;
line-height: 150%;
flex-grow: 0;
}
}
@media only screen and (max-width: 640px) {
#saiyo li{
margin: 0 1% 20px;
padding: 10px 1% 15px;
flex: 1;
flex-basis:48%;
list-style-position: inside;
text-align: center;
font-size: 15px;
line-height: 150%;
flex-grow: 0;
background: url(assets/image/rec-ar.webp) no-repeat right 35%/10%;
}
#saiyo li img{
max-width: 45%;
margin: 10px 0 5px;
}
}
@media only screen and (max-width: 480px) {
#saiyo ol{
margin: 0 0 0px;
display: flex;
flex-wrap: wrap;
}
#saiyo li{
margin: 0 0% 20px;
padding: 5px 1% 35px;
flex: 1;
flex-basis:100%;
list-style-position: inside;
text-align: center;
font-size: 16px;
line-height: 150%;
flex-grow: 0;
background: url(assets/image/rec-ar2.webp) no-repeat center bottom/6%;
}
#saiyo li img{
max-width: 35%;
margin: 10px 0 5px;
}
}

#mail{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 15%;
}
@media only screen and (max-width: 1440px) {
#mail{
padding: 0 15%;
}
}
@media only screen and (max-width: 1280px) {
#mail{
padding: 0 10%;
}
}
@media only screen and (max-width: 1080px) {
#mail{
padding: 0 5%;
}
}

#mail a:link,#mail a:visited{
font-weight: 400;
}

#mail p{
margin: 0 0 10px;
}
@media only screen and (max-width: 835px) {
#mail p{
font-size: 16px;
line-height: 150%;
text-align: left;
}
}

form{
clear: both;
width:100%;
height: auto;
margin: 50px auto 0;
padding: 0;
text-align: center;
}

form dl{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
form dl div{
flex-basis:48%;
margin: 0 1%;
}
@media only screen and (max-width: 835px) {
form dl div{
flex-basis:100%;
margin: 0 0%;
}
}

form dt{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 120%;
}
form dd{
float: left;
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
font-size: 17px;
line-height: 120%;
}
@media only screen and (max-width: 835px) {
form dt{
clear: both;
width: 100%;
margin: 0 0 10px;
padding: 0;
text-align:left;
font-size: 17px;
}
form dd{
width: 100%;
margin: 0 0 40px;
padding: 0;
text-align: left;
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
form dl{
margin: 0 0 10px;
}
form dt{
clear: both;
width: 100%;
margin: 0 0 5px;
padding: 0;
text-align:left;
font-size: 17px;
}
form dd{
clear: both;
width: 100%;
margin: 0 0 25px;
padding: 0;
text-align: left;
font-size: 17px;
}
}

.hissu{
font-size: 12px;
border-radius: 30px;
background: #11ae78;
color:#fff;
padding: 0 10px 1px;
margin: 0 0 0 2%;
font-weight: 500;
}
.mail-check{
	clear:both;
	float:left;
	width:100%;
	height:auto;
	margin:30px 0 30px;
	padding:0;
	text-align:center;
}

textarea,input[type="text"] ,input[type="email"]{
width: 100%;
padding:20px 3%;
border-radius: 7px;
border: 2px solid #11ae78;
}
input[type="text"].s70{
width: 75%;
}
input::-webkit-input-placeholder {
    color: #80dabb;
    font-size: 17px;
}
input:-moz-placeholder {
    color:#80dabb;
    font-size: 17px;
}
input::-moz-placeholder {
    color: #80dabb;
    font-size: 17px;
}
input:-ms-input-placeholder {
    color: #80dabb;
    font-size: 17px;
}
textarea::placeholder{
 color:#80dabb;
    font-size: 17px;
}
select{
width: 20%;
margin: 0 2% 0 0;
}
@media only screen and (max-width: 640px) {
textarea,input[type="text"] ,input[type="email"]{
width: 100%;
padding:20px 3%;
border-radius: 7px;
border: 2px solid #11ae78;
}
select{
width: 23%;
margin: 0 2% 0 0;
}
}
@media only screen and (max-width: 480px) {
textarea,input[type="text"] ,input[type="email"]{
width: 100%;
padding:20px 3%;
border-radius: 7px;
border: 2px solid #11ae78;
}
textarea{
font-size: 14px;
}
}

.checkbox {
  appearance: none;
  height: 24px;
  width: 24px;
  margin: 4px;
  border: 2px solid #11ae78;
  border-radius: 4px;
}
.checkbox:checked {
  border: 1px solid #8b98a5;
  background-color: #11ae78;
}
.checkbox:checked::before {
  content: "";
  display: block;
  position: relative;
  left: 7.4px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.checkbox:focus-visible {
  outline: 2px solid #11ae78;
  outline-offset: 2px;
}

label{
  display: flex;
  align-items: center;
margin: 0 0 15px;
 cursor: pointer;
 line-height: 100%;
}

input.btn_submit,input.btn_submit2{
 width:30%;
 height:60px;
 background: #fea889;
 border-radius: 7px;
 box-shadow: 1px 1px 3px #aaa;
 border: 1px solid #fff;
 font-size: 20px;
 font-weight: 500;
 color: #fff;
 line-height: 46px;
}
input.btn_submit2{
 width:20%;
 height:40px;
  line-height: 36px;
   background: #dddddd;
 color: #555;
 font-size: 15px;
 margin: 0 0 0 2%;
}
@media only screen and (max-width: 640px) {
input.btn_submit,input.btn_submit2{
 width:40%;
 height:50px;
 background: #fea889;
 border-radius: 10px;
 box-shadow: 2px 2px 3px #aaa;
 border: 2px solid #fff;
 font-size: 20px;
 font-weight: 500;
 color: #fff;
 line-height: 46px;
}
input.btn_submit2{
 width:25%;
 height:40px;
  line-height: 36px;
   background: #dddddd;
 color: #555;
 font-size: 15px;
 margin: 0 0 0 2%;
}
}
@media only screen and (max-width: 480px) {
input.btn_submit,input.btn_submit2{
 width:50%;
 height:50px;
 background: #fea889;
 border-radius: 10px;
 box-shadow: 2px 2px 3px #aaa;
 border: 2px solid #fff;
 font-size: 17px;
 font-weight: 500;
 color: #fff;
 line-height: 46px;
}
input.btn_submit2{
 width:40%;
 height:40px;
  line-height: 36px;
   background: #dddddd;
 color: #555;
 font-size: 14px;
 margin: 0 0 0 2%;
}
}

input.btn_submit:hover {
 background: #f0561f;
 cursor: pointer;
}

input.btn_submit2:hover {
 background: #ccc;
  cursor: pointer;
}


/*footer
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
}

#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#11ae78;
	transition:all 0.3s;
	color:#fff;
}

#page-top p:hover{
	background:#80dabb;
	color:#fff;
}

#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 100px 0 50px;
background: #80dabb;
position: relative;
z-index: 20;
}
#footer-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 15% 20px;
background: #80dabb;
}
@media only screen and (max-width: 1600px) {
#footer-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 10% 20px;
background: #80dabb;
}
}
@media only screen and (max-width: 1440px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 100px 20% 50px 0;
background: #80dabb;
position: relative;
z-index: 20;
}
#footer-box{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 5% 20px;
background: #80dabb;
}
}
@media only screen and (max-width: 1280px) {
footer{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0 0 0;
padding: 80px 25% 50px 0;
background: #80dabb;
position: relative;
z-index: 20;
}
}
@media only screen and (max-width: 1080px) {
footer{
margin: 0 0 0;
padding: 100px 0 50px;
background: #80dabb;
}
}
@media only screen and (max-width: 835px) {
footer{
margin: 0 0 0;
padding: 50px 0 170px;
background: #80dabb;
}
}
@media only screen and (max-width: 640px) {
footer{
margin: 0 0 0;
padding: 50px 0 110px;
background: #80dabb;
}
}
@media only screen and (max-width: 480px) {
footer{
margin: 0 0 0;
padding: 50px 0 90px;
background: #80dabb;
}
}
@media only screen and (max-width: 414px) {
footer{
margin: 0 0 0;
padding: 50px 0 90px;
background: #80dabb;
}
}

address{
clear: both;
float: left;
width: 25%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-style: normal;
}
address img{
max-width: 100%;
margin: 0 0 15px;
}
address p{
text-align: left;
font-size: 17px;
line-height: 150%;
margin: 0;
font-weight: 400;
color: #fff;
}
@media only screen and (max-width: 1280px) {
address{
width: 30%;
}
}
@media only screen and (max-width: 1080px) {
address{
width: 100%;
}
address img{
float: left;
max-width: 30%;
margin: 0 5% 0 0;
}
address p{
float: left;
text-align: left;
width: 65%;
font-size: 15px;
line-height: 150%;
margin: 0;
font-weight: 500;
}
}
@media only screen and (max-width: 480px) {
address{
width: 100%;
}
address img{
float: left;
max-width: 35%;
margin: 0 5% 0 0;
}
address p{
width: 60%;
font-size: 14px;
}
}
@media only screen and (max-width: 414px) {
address img{
float: none;
max-width: 60%;
margin: 0 20% 10px;
}
address p{
clear: both;
width: 100%;
font-size: 14px;
text-align: center;
}
}

#footer-menu{
float: right;
width: 75%;
height: auto;
margin: 0;
padding: 0 0 0 1%;
}
@media only screen and (max-width: 1280px) {
#footer-menu{
float: right;
width: 70%;
height: auto;
margin: 0;
padding: 0 0 0 3%;
}
}
@media only screen and (max-width: 1080px) {
#footer-menu{
display: none;
}
}

#footer-menu ul{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#footer-menu li{
list-style: none;
font-size: 17px;
margin: 0 3% 10px 0;
padding: 0;
line-height: 120%;
flex: 1 0 auto;
flex-grow: 0;
}
#footer-menu li a:link,#footer-menu li a:visited{
color: #fff;
text-decoration: none;
font-weight: 500;
}
#footer-menu li a:hover{
text-decoration: underline;
}

.wpcf7-form-control-wrap input{
font-size:16px;}
.wpcf7-form-control-wrap textarea{
font-size:16px;}