@charset "UTF-8";
/*===========
body
============*/
@media screen and (orientation: landscape) {/* 横向きの場合のスタイル*/}
@media screen and (orientation: portrait) {/* 縦向きの場合のスタイル */}

/* html/body
------------------------------------------------- */
html{width: 100%;height: 100vh;overflow-y: scroll;font-size: 62.5%;-webkit-font-smoothing: antialiased;}

@media only screen and (max-width:750px){
html {overflow-x: hidden;}
}
body {
font-family: 'Zen Maru Gothic','M PLUS Rounded 1c', serif;
position: relative;width: 100%;height: 100%;font-weight: 500;font-size: 16px;font-size: 1.6rem;line-height: 1.8;color: #3C3C3C;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;overflow-x: hidden;position: relative;transition: 0.4s;overflow-x: hidden;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;text-size-adjust: 100%;-webkit-text-size-adjust: 100%;/*Chrome,Safari*/-ms-text-size-adjust: 100%;/*EgdeMobile*/-moz-text-size-adjust: 100%;/*firefox*/
}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
body {font-size: 14px;font-size: 1.4rem;}
}
/*STYLE
------------------------------------------------- */
#wrapper {opacity: 0;position: relative}

/* loading------------------------------------------------ */
#loading {background: #529136;width: 100%; height: 100vh;  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; display: flex; justify-content: center; align-items: center;}
#loading svg {width: 30em;}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
#loading svg {width: 50vw;}
}
@-webkit-keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-1{-webkit-animation:animate-svg-fill-1 0.5s ease-out 0.5s both;animation:animate-svg-fill-1 0.5s ease-out 0.5s both}@-webkit-keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-2{-webkit-animation:animate-svg-fill-2 0.5s ease-out 0.6s both;animation:animate-svg-fill-2 0.5s ease-out 0.6s both}@-webkit-keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-3{-webkit-animation:animate-svg-fill-3 0.5s ease-out 0.7s both;animation:animate-svg-fill-3 0.5s ease-out 0.7s both}@-webkit-keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-4{-webkit-animation:animate-svg-fill-4 0.5s ease-out 0.8s both;animation:animate-svg-fill-4 0.5s ease-out 0.8s both}@-webkit-keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-5{-webkit-animation:animate-svg-fill-5 0.5s ease-out 0.9s both;animation:animate-svg-fill-5 0.5s ease-out 0.9s both}@-webkit-keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-6{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-6{-webkit-animation:animate-svg-fill-6 0.5s ease-out 1s both;animation:animate-svg-fill-6 0.5s ease-out 1s both}@-webkit-keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-7{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-7{-webkit-animation:animate-svg-fill-7 0.5s ease-out 1.1s both;animation:animate-svg-fill-7 0.5s ease-out 1.1s both}@-webkit-keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-8{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-8{-webkit-animation:animate-svg-fill-8 0.5s ease-out 1.2000000000000002s both;animation:animate-svg-fill-8 0.5s ease-out 1.2000000000000002s both}


/*header*/
#header .logo {width: 222px;position: relative;white-space: nowrap;margin-top: 24px;}
#header .logo .catch{font-size: 5.8rem;	color: #53972b;
letter-spacing: 0.15em; display: inline;position: absolute;writing-mode: vertical-rl;-ms-writing-mode: tb-rl;left: 50%;top: 149px;transform: translate(-50%, 0%);}
/*========= 1文字ずつ出現させるためのCSS ===============*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
#header .logo {width: 28%;margin-top: 0px;}
#header .logo h1{text-align: center;padding: 10px}
#header .mainimg{width: 68%}
#header .logo .catch{font-size: 2.3rem;top:30%;}
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
/*デバイス横向きで画面の横幅が 1024px 以下の場合のスタイルを記述*/
#header .logo {width: 23%;margin-top: 12px;}
#header .mainimg{width: 72%}
#header .mainimg .pc{display: block}
#header .mainimg .sp{display: none}
#header .logo .catch{top:120px;}
}

.copy{font-size: 3.2rem;text-align: center;margin: 80px 0 0}
.copy span{background: linear-gradient(transparent 0%, #ffff66 0%);}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
.copy{font-size: 1.8rem;margin: 50px 0}
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
.copy .pc{display: block}
.copy .sp{display: none}
}

.block-service{margin-top: 120px}
.block-service .title,
.block-company .title{text-align: center;font-size: 3rem;color: #53972b;line-height: 1.7em;letter-spacing: 0.1em;text-indent: 0.1em}
.block-service .title svg,
.block-company .title svg{width: 80px;height: auto;}
.block-service .item{text-align: center;width: 48%;margin-top: 30px;}
.block-service.service2 .item{width:100%}
.block-service .item .num{font-size: 1.2rem;color: #53972b;letter-spacing: 0.1em;text-indent: 0.1em}
.block-service .item .num span{font-size: 2rem}
.block-service .item .kind li{margin: 0 5px}
.block-service .item .kind .sale{padding: 0 6px; border: 1px solid #53972b;color: #53972b;letter-spacing: 0.3em;text-indent: 0.3em;border-radius: 5px}
.block-service .item .kind .rental{padding: 0 6px; border: 1px solid #ec9e46;color: #ec9e46;letter-spacing: 0.3em;text-indent: 0.3em;border-radius: 5px}
.block-service .item .kind .set{padding: 0 6px; border: 1px solid #329bb5;color: #329bb5;letter-spacing: 0.3em;text-indent: 0.3em;border-radius: 5px}
.block-service .item .img{position: relative;margin: 10px 0; width: 100%;}
.block-service .item .img .svg__content {position: absolute;top: 0;left: 0;}

.block-service.service2 .item .img{width: 826px;margin: auto;}
.block-service .item .img svg{position: absolute; top: 0; left: 0;}
.block-service .item h3{margin-top: 15px}
.block-service .item .bt{width: 320px;margin:14px auto;}
.block-service .item .bt a{display: block;color: #fff; background: #53972b;padding: 4px 0; font-size: 1.6rem; border-radius: 10px;letter-spacing: 0.1em;text-indent: 0.1em}
.block-service .item .bt a span{display: inline-block;vertical-align: middle}
.block-service .item .bt a img{vertical-align: middle}
.block-service .item .bt a span.fo10{transform: scale(0.7, 1);}
.block-service .item .bt a:hover{border-radius: 30px;background: #356317;}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
.block-service{margin-top: 60px}
.block-service .title,
.block-company .title{font-size: 1.8rem;}
.block-service .item{width: 100%;margin: 30px auto 0}
.block-service .item .img{position: relative;width: 80%;margin: auto;}
.block-service.service2 .item .img{width: 80%;margin: auto;}
.block-service .item .bt{width: 100%;margin:14px auto;}
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
.block-service .item{width:48%;}
.block-service.service2 .item .img .pc{display: block}
.block-service.service2 .item .img .dammy{height: 260px}
.block-service.service2 .item .img .sp{display: none;}
.block-service.service2 .item .img{width: 100%;margin: auto;}
.block-service.service2 .item .img img{width: 100%;height: auto}

}

.block-toiawase{background:url("../images/obi.svg") no-repeat center center;width: 100%;padding: 80px 0; background-size:100% 100%;color: #fff;text-align: center;margin: 80px 0}
.block-toiawase .title{font-size: 3rem;margin-bottom: 20px}
.block-toiawase ul{margin-top: 20px}
.block-toiawase li{margin: 0 10px}
.block-toiawase li a{display: block;background: #fff;padding: 12px;width: 300px;border-radius: 10px}
.block-toiawase li a:hover{border-radius: 30px;}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
.block-toiawase{margin: 20px 0;background-size:230% 100%;}
.block-toiawase .title{font-size: 2rem;}
.block-toiawase ul.flex--center{justify-content: space-between;}
.block-toiawase li{margin: 10px 0px;width: 100%}
.block-toiawase li a{width: 100%;padding: 12px 0}
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
.block-toiawase li{width: 46%}
}

.block-company table{width: 860px;margin: 30px auto 0;border-collapse: collapse;border-spacing:0px; border-top: 1px solid #53972b }
.block-company table th,
.block-company table td{padding: 12px;border-bottom: 1px solid #53972b}
.block-company table th{width: 30%;}
.block-company .member{text-align: center;width: 700px;margin:50px auto}
.block-company .member h3{font-size: 1.8rem;margin: 30px 0 20px}
.block-company .member li{width: 166px;height: 166px; background: url("../images/menber_bg.svg") no-repeat center center;background-size: contain;color: #fff;display: -webkit-box;display: -ms-flexbox;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -webkit-box-pack: center; -ms-flex-pack: center;justify-content: center;}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
.block-company table{width: 100%;}
.block-company .member{width: 100%;margin:20px auto}
.block-company .member li{width:48%;height: 100px; margin-top: 20px;}
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
.block-company .member li{width:20%;}
}

#footer{background:#53972b url("../images/obi.svg") no-repeat center top;width: 100%;padding: 80px 0; background-size:100% auto;color: #fff;margin: 0px 0 0}
#footer h2{font-size: 1.8rem;margin-bottom: 12px}
#footer a{color: #fff}
#footer .mail a span{display: inline-block;vertical-align: middle;}
#footer .mail img{vertical-align: middle}
#footer .sns li{margin-top: 22px;margin-right: 22px}
#footer .side{text-align: right;position: absolute;right: 0;top: 40px}
#footer .copyright {padding-top: 30px}
.pagetop {width: 8.5em;margin-left: auto;}
.pagetop a {color: #53972b;text-align: center;padding-top: 20px;display: block;position: relative;background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212.093%22%20height%3D%228.228%22%20viewBox%3D%220%200%2012.093%208.228%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_19466%22%20data-name%3D%22%E3%83%91%E3%82%B9%2019466%22%20d%3D%22M0%2C0%2C6.051%2C5.294%2C0%2C10.588%22%20transform%3D%22translate(0.753%207.569)%20rotate(-90)%22%20fill%3D%22none%22%20stroke%3D%22%2353972b%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E') center top no-repeat;
background-size: 20% auto;}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
#footer{background-size:230% 100%;text-align: center;padding-bottom: 20px}
#footer .side{text-align:center;position:static;right: 0;top: 0px;margin-top: 20px;}
#footer .logo{width: 50%;margin: auto}
#footer .sns{ width: 70%;margin: auto; justify-content: space-between;}
#footer .sns li{width: 18%;margin-right: 0;}
#footer .mail a{display: block;width: 80%; margin: 20px auto;padding: 12px 0;border-radius: 10px; border: 1px solid #fff;font-size: 2rem}
#footer .mail a span{margin: 0 2px}
#footer .mail img{width: 30px}
}

#aside{position: fixed;right: -120px;top: 50%;-webkit-transform: translate(0%, -50%);transform: translate(-0%, -50%);}
#aside p{margin: 10px 0}
@media screen and (max-width: 896px) {/*スマホのスタイル*/
#aside{display: none}
}

@media screen and (max-width: 896px) {/*スマホのスタイル*/
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
/*デバイス横向きで画面の横幅が 1024px 以下の場合のスタイルを記述*/
}
@media screen and (min-width: 897px) {/*PCスタイルのスタイル*/
}
.info {
border: 2px solid rgba(255,0,4,1.00);
padding: 15px;
margin-top: 30px;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.info a {
color: rgba(255,0,4,1.00);
text-decoration: underline;
}