@charset "UTF-8";
/* Scss Document */
/* COMMON
========================================================================== */
/* Scss Document */
/* UTILITY ========================================================================== */
/*
font-family: noto-sans, sans-serif;
font-weight: 400;
font-style: normal;

font-family: noto-sans, sans-serif;
font-weight: 700;
font-style: normal;

font-family: acumin-pro, sans-serif;
font-weight: 700;
font-style: normal;
*/
* { margin: 0px; padding: 0px; }

html, body { font-family: noto-sans, sans-serif; font-weight: 400; font-style: normal; background-color: #FFFFFF; color: #333333; text-size-adjust: none; -webkit-text-size-adjust: none; position: relative; }

p { margin: 0; }

a { color: #333333; text-decoration: none; }

body { font-size: 1rem; letter-spacing: 0.1em; min-width: 1000px; }
@media screen and (max-width: 767px) { body { font-size: 4.0625vw; min-width: 0px; } }

figure { margin: 0; }

a[href^="tel:"] { pointer-events: none; }
@media screen and (max-width: 767px) { a[href^="tel:"] { pointer-events: auto; } }

img.resize { width: 100%; height: auto; display: block; }
img.responsive { max-width: 100%; width: auto; height: auto; }
img.ofi { object-fit: cover; font-family: "object-fit: cover;"; }

.justify { text-align: justify; text-justify: inter-ideograph; }

.fade { opacity: 1; transition: opacity 0.2s linear; backface-visibility: hidden; }
.fade:hover { opacity: .6; }

.bold { font-weight: bold; }

@media screen and (max-width: 767px) { .sp-hide { display: none; } }

.pc-hide { display: none; }
@media screen and (max-width: 767px) { .pc-hide { display: block; } }

.pc-br { display: block; }
@media screen and (max-width: 767px) { .pc-br { display: inline; } }

@media screen and (max-width: 767px) { .sp-br { display: block; } }

.resize { width: 100%; height: auto; }

.text-right { text-align: right; }

.indent_1 { text-indent: -1em; margin-left: 1em; }

.bg-pink { background-color: #F7F6F4; }

/* HEADER
========================================================================== */
.header-poss { position: absolute; z-index: 2; width: 100%; height: 80px; background-color: #FFFFFF; transition: all 500ms 0s ease; }
@media screen and (max-width: 767px) { .header-poss { height: 60px; } }
.header-poss .header-wrap { width: 100%; max-width: 1400px; padding: 0 0 0 50px; }
@media screen and (max-width: 767px) { .header-poss .header-wrap { padding: 0 0 0 20px; } }
.header-poss .header-wrap .logo { padding: 25px 0 0 0; width: 122px; }
@media screen and (max-width: 767px) { .header-poss .header-wrap .logo { width: 90px; padding: 20px 0 0 0; } }

/* TITLE ICON
========================================================================== */
.nav-poss { position: fixed; top: 0; right: 0; z-index: 3; width: 80px; height: 100vh; background-color: #FFFFFF; }
@media screen and (max-width: 767px) { .nav-poss { width: 60px; height: 60px; background-color: rgba(0, 0, 0, 0); } }
.nav-poss .bt-bg { width: 80px; height: 100vh; background-repeat: no-repeat; background-size: 32px; background-position: center center; background-image: url("../img/icon02.svg"); }
@media screen and (max-width: 767px) { .nav-poss .bt-bg { width: 60px; height: 60px; } }
.nav-poss .bt-bg.open { background-image: url("../img/icon01.svg"); }

.open-box { position: fixed; top: 0; right: 80px; z-index: 1; width: calc( 50% - 80px); height: 100vh; background-color: rgba(255, 255, 255, 0.9); transition: 0.5s; }
@media screen and (max-width: 767px) { .open-box { top: 0; right: 0; width: 100%; height: 100vh; } }
.open-box.on { width: 0px; }
@media screen and (max-width: 767px) { .open-box.on { top: 0px; width: 100%; height: 0; } }
.open-box .list-wrap { font-size: 2rem; line-height: 180%; padding: 30% 0 0 0px; }
.open-box .list-wrap .poppup { margin: 0 0 0 100px; opacity: 1; transition: 0.2s; font-family: acumin-pro, sans-serif; font-weight: 500; font-style: normal; }
.open-box .list-wrap .poppup a:link, .open-box .list-wrap .poppup a:visited { transition: 0.5s; color: #333333; }
.open-box .list-wrap .poppup a:hover { color: #999999; }
.open-box .list-wrap .poppup i { font-size: 1.875rem; }
@media screen and (max-width: 767px) { .open-box .list-wrap .poppup { text-align: right; margin: 0 20px 0 0; } }
@media screen and (max-width: 767px) { .open-box.on .list-wrap { height: 0; padding: 0; } }
.open-box.on .list-wrap .poppup { transition: 0.2s; opacity: 0; }
@media screen and (max-width: 767px) { .open-box.on .list-wrap .poppup { display: none; } }

/* FOOTER
========================================================================== */
.bg-footer { background-color: #D0B7AE; padding: 60px 0; }
@media screen and (max-width: 767px) { .bg-footer { padding: 30px 0px; } }
.bg-footer .flex { display: flex; align-items: center; justify-content: space-around; color: #FFFFFF; }
.bg-footer .flex a:link, .bg-footer .flex a:visited { color: #FFFFFF; }
@media screen and (max-width: 767px) { .bg-footer .flex { flex-direction: column-reverse; justify-content: flex-start; text-align: center; } }
.bg-footer .flex .box { width: 200px; }
@media screen and (max-width: 767px) { .bg-footer .flex .box { width: 100%; } }
.bg-footer .flex .box01 { font-size: 0.75rem; }
@media screen and (max-width: 767px) { .bg-footer .flex .box01 { padding: 20px 0 0 0; font-size: 3.75vw; } }
.bg-footer .flex .box02 { width: 120px; margin: 0 auto; }
@media screen and (max-width: 767px) { .bg-footer .flex .box02 { padding: 20px 0 0 0; } }
.bg-footer .flex .box03 { font-size: 1.25rem; text-align: right; }
@media screen and (max-width: 767px) { .bg-footer .flex .box03 { text-align: center; font-size: 6.25vw; } }

/* PAGE TOP
========================================================================== */
.pagetop { display: none; position: fixed; bottom: 0px; right: 0px; z-index: 899; }
@media screen and (max-width: 767px) { .pagetop { bottom: 0px; right: 0px; } }
.pagetop a { width: 80px; height: 80px; display: block; background-image: url("../img/icon10.svg"); background-repeat: no-repeat; background-size: contain; background-position: center center; }
@media screen and (max-width: 767px) { .pagetop a { width: 70px; height: 70px; } }

/* TOP-PAGE HEADER
========================================================================== */
.bg-main { background-image: url(../img/main_pc.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
@media screen and (max-width: 767px) { .bg-main { background-image: url(../img/main_sp.jpg); height: auto; display: block; } }
.bg-main img { width: 100%; }
.bg-main .main-image { width: 852px; padding: 110px 0 0 0; }
@media screen and (max-width: 767px) { .bg-main .main-image { width: 100%; padding: 60px 0 0 0; } }

/* TOP-PAGE concept
========================================================================== */
.cpt-bg { max-width: 1254px; background-image: url(../img/img01.jpg); background-repeat: no-repeat; background-position: left top; margin: 70px auto 0 auto; padding: 175px 0 0 0; display: flex; justify-content: flex-end; }
@media screen and (max-width: 767px) { .cpt-bg { background-size: 80%; margin: 110px 0 0 0; padding: 40% 0 0 0; } }
.cpt-bg .text-bg { width: 816px; padding: 80px; line-height: 200%; font-size: 1rem; background-color: white; }
@media screen and (max-width: 767px) { .cpt-bg .text-bg { width: 80%; padding: 20px; font-size: 4.0625vw; } }
.cpt-bg .text-bg .subtitle { line-height: 1em; color: #4C4C4C; font-size: 1.125rem; font-family: acumin-pro, sans-serif; font-weight: 500; font-style: normal; padding: 0 0 20px 0; margin: 0; }
@media screen and (max-width: 767px) { .cpt-bg .text-bg .subtitle { font-size: 4.375vw; } }
.cpt-bg .text-bg .bb01 { font-size: 3.25rem; /*font-family: acumin-pro, sans-serif;*/ font-weight: 500; font-style: normal; }
@media screen and (max-width: 767px) { .cpt-bg .text-bg .bb01 { display: block; font-size: 9.6875vw; } }
.cpt-bg .text-bg .bb02 { font-size: 1.125rem; font-weight: bold; padding: 0; }
@media screen and (max-width: 767px) { .cpt-bg .text-bg .bb02 { display: block; padding: 30px 0 0 0; font-size: 4.6875vw; } }

.cpt-image { width: 100%; max-width: 1040px; margin: 0 auto; padding: 70px 0 0 0; }
@media screen and (max-width: 767px) { .cpt-image { padding: 40px 0 0 0; } }

/* TOP-PAGE how to ranto
========================================================================== */
.how-bg01 { background-color: #FFFFFF; width: 100%; }

.how-bg02 { background-image: url(../img/img03_pc.png); background-repeat: no-repeat; background-position: right bottom; background-size: cover; padding: 0 0 144px 0; width: 100%; }
@media screen and (max-width: 767px) { .how-bg02 { padding: 0 0 60% 0; background-size: contain; background-image: url(../img/img03_sp.png); } }

.how-wrap { width: 100%; max-width: 1100px; padding: 0 50px; margin: 0 auto; line-height: 200%; }
@media screen and (max-width: 767px) { .how-wrap { padding: 0; width: 85%; font-size: 4.0625vw; } }
.how-wrap .bb01 { position: relative; line-height: 1em; font-size: 3.25rem; /*font-family: acumin-pro, sans-serif;*/ font-weight: 500; font-style: normal; top: -30px; }
@media screen and (max-width: 767px) { .how-wrap .bb01 { display: block; font-size: 9.6875vw; top: -5.3125vw; } }
.how-wrap .bb02 { font-size: 1rem; font-weight: bold; padding: 20px 0 0 0; }
@media screen and (max-width: 767px) { .how-wrap .bb02 { display: block; padding: 0; font-size: 4.0625vw; } }
.how-wrap .bb03 { width: 50%; }
@media screen and (max-width: 767px) { .how-wrap .bb03 { width: 100%; } }

/* TOP-PAGE about
========================================================================== */
.abt-wrap { width: 100%; max-width: 1100px; padding: 0 50px; margin: 0 auto; }
@media screen and (max-width: 767px) { .abt-wrap { width: 85%; padding: 0 0 70px 0; } }
.abt-wrap .flex { display: flex; justify-content: space-between; padding: 0 0 140px 0; }
.abt-wrap .flex:nth-child(even) { flex-direction: row-reverse; }
@media screen and (max-width: 767px) { .abt-wrap .flex { padding: 0 0 70px 0; display: block; } }
.abt-wrap .flex .img { max-width: 544px; width: 54.4%; }
@media screen and (max-width: 767px) { .abt-wrap .flex .img { max-width: 1000px; margin: 0 auto; width: 80%; } }
.abt-wrap .flex .box { line-height: 200%; max-width: 390px; width: 39%; }
@media screen and (max-width: 767px) { .abt-wrap .flex .box { font-size: 4.0625vw; max-width: 1000px; padding: 0 0 30px 0; width: 100%; } }
.abt-wrap .flex .box .bb01 { display: inline-block; line-height: 1em; font-size: 1.875rem; font-weight: 500; border-bottom: 2px solid #333; padding: 0 0 15px 0; letter-spacing: 0.2em; }
@media screen and (max-width: 767px) { .abt-wrap .flex .box .bb01 { font-size: 5.625vw; padding: 0 0 10px 0; } }
.abt-wrap .flex .box .bb02 { font-size: 1rem; font-weight: bold; padding: 40px 0; line-height: 250%; letter-spacing: 0.2em; }
@media screen and (max-width: 767px) { .abt-wrap .flex .box .bb02 { display: block; padding: 20px 0; font-size: 4.375vw; } }

/* TOP-PAGE rantoのお手入れ
========================================================================== */
.mem-wrap { width: 100%; max-width: 1110px; margin: 0 auto; }
@media screen and (max-width: 767px) { .mem-wrap { width: 85%; } }

.mem-title { width: 100%; text-align: center; display: block; line-height: 1em; font-size: 2.125rem; font-weight: 500; letter-spacing: 0.2em; }
@media screen and (max-width: 767px) { .mem-title { font-size: 7.1875vw; padding: 0; margin: 0 auto; } }

.mem-flx { display: flex; justify-content: space-between; }
@media screen and (max-width: 767px) { .mem-flx { display: block; } }
.mem-flx .box { width: 28%; line-height: 200%; }
@media screen and (max-width: 767px) { .mem-flx .box { width: 100%; padding: 50px 0 0 0; }
  .mem-flx .box:first-child { padding: 0; } }
.mem-flx .box .img { width: 228px; margin: 0 auto; }
.mem-flx .box .bb01 { font-size: 1rem; text-align: center; font-weight: bold; letter-spacing: 0.2em; }
@media screen and (max-width: 767px) { .mem-flx .box .bb01 { font-size: 4.375vw; } }
.mem-flx .box .bb02 { font-size: 1rem; }
@media screen and (max-width: 767px) { .mem-flx .box .bb02 { font-size: 4.0625vw; } }
.mem-flx .box .bb03 { font-size: 0.875rem; }
@media screen and (max-width: 767px) { .mem-flx .box .bb03 { font-size: 3.75vw; } }

/* TOP-PAGE about ranto
========================================================================== */
.ab-wrap { display: flex; justify-content: space-between; }
@media screen and (max-width: 767px) { .ab-wrap { display: block; } }
.ab-wrap .box01 { width: 33%; background-image: url(../img/img10_pc.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
@media screen and (max-width: 767px) { .ab-wrap .box01 { width: 100%; padding: 60% 0 0 0; background-image: url(../img/img10_sp.jpg); } }
.ab-wrap .box02 { width: 56%; }
@media screen and (max-width: 767px) { .ab-wrap .box02 { padding: 40px 0 0 0; width: 100%; } }
.ab-wrap .box02 .bb01 { line-height: 1em; font-size: 3.25rem; /*font-family: acumin-pro, sans-serif;*/ font-weight: 500; font-style: normal; letter-spacing: 0.2em; }
@media screen and (max-width: 767px) { .ab-wrap .box02 .bb01 { padding: 0 8% 0 8%; font-size: 9.6875vw; } }
.ab-wrap .box02 .bb02 { line-height: 200%; font-size: 1rem; max-width: 622px; padding: 60px 0 0 0; box-sizing: border-box; background-image: url(../img/img11_pc.svg); background-repeat: no-repeat; background-position: left bottom; }
@media screen and (max-width: 767px) { .ab-wrap .box02 .bb02 { width: 100%; padding: 30px 8% 0 8%; font-size: 4.0625vw; background-image: url(../img/img11_sp.svg); } }
.ab-wrap .box02 .bb02 .text-right { padding: 50% 0 0 0; text-align: right; font-size: 0.875rem; }
@media screen and (max-width: 767px) { .ab-wrap .box02 .bb02 .text-right { font-size: 4.0625vw; } }
.ab-wrap .box02 .bb02 .text-right .name { font-size: 1.125rem; font-weight: bold; }
@media screen and (max-width: 767px) { .ab-wrap .box02 .bb02 .text-right .name { font-size: 4.375vw; } }
.ab-wrap .box02 .bb02 .text-right a.tel { font-size: 1rem; font-weight: bold; }
@media screen and (max-width: 767px) { .ab-wrap .box02 .bb02 .text-right a.tel { font-size: 5vw; } }

/* TOP-PAGE contact
========================================================================== */
.cnt-wrap { width: 100%; max-width: 922px; margin: 0 auto; }
@media screen and (max-width: 767px) { .cnt-wrap { width: 85%; } }
.cnt-wrap .cnt-title { line-height: 1em; font-size: 3.25rem; /*font-family: acumin-pro, sans-serif;*/ font-weight: 500; font-style: normal; text-align: center; letter-spacing: 0.2em; }
@media screen and (max-width: 767px) { .cnt-wrap .cnt-title { font-size: 9.6875vw; text-align: left; } }
.cnt-wrap .cub { font-size: 1rem; text-align: center; }
@media screen and (max-width: 767px) { .cnt-wrap .cub { font-size: 4.375vw; text-align: left; } }
.cnt-wrap .flex { display: flex; flex-wrap: wrap; align-items: center; }
.cnt-wrap .flex .box01 { width: 29%; font-size: 1rem; padding: 0 0 50px 0; }
@media screen and (max-width: 767px) { .cnt-wrap .flex .box01 { width: 100%; font-size: 4.375vw; padding: 0 0 10px 0; } }
.cnt-wrap .flex .box02 { width: 70%; font-size: 1rem; flex-grow: 2; padding: 0 0 50px 0; }
.cnt-wrap .flex .box02 input { font-size: 1rem; padding: 10px; border-radius: 5px; border: none; }
@media screen and (max-width: 767px) { .cnt-wrap .flex .box02 input { font-size: 4.375vw; } }
.cnt-wrap .flex .box02 textarea { font-size: 1rem; padding: 10px; border-radius: 5px; border: none; }
@media screen and (max-width: 767px) { .cnt-wrap .flex .box02 textarea { font-size: 4.375vw; } }
@media screen and (max-width: 767px) { .cnt-wrap .flex .box02 { padding: 0 0 30px 0; width: 100%; } }
.cnt-wrap .flex .box02 .input01 { width: 380px; }
@media screen and (max-width: 767px) { .cnt-wrap .flex .box02 .input01 { width: 100%; } }
.cnt-wrap .flex .box02 .input02 { width: 280px; }
@media screen and (max-width: 767px) { .cnt-wrap .flex .box02 .input02 { width: 100%; } }
.cnt-wrap .flex .box02 .input03 { width: 650px; }
@media screen and (max-width: 767px) { .cnt-wrap .flex .box02 .input03 { width: 100%; } }
.cnt-wrap .flex .box02 .textarea { width: 650px; min-height: 180px; }
@media screen and (max-width: 767px) { .cnt-wrap .flex .box02 .textarea { width: 100%; } }
.cnt-wrap .reCAPTCHA { width: 304px; margin: 0 auto; }
.cnt-wrap .wbutton { font-size: 1rem; background-color: #FFFFFF; display: block; border: 1px solid #CCCCCC; text-align: center; width: 340px; position: relative; padding: 30px 0; letter-spacing: 0.1em; margin: 0 auto; cursor: pointer; }
.cnt-wrap .wbutton:disabled { cursor: no-drop; }
.cnt-wrap .wbutton.af::after { font-family: "Font Awesome 5 Free"; content: "\f054"; position: absolute; font-weight: 900; right: 20px; top: 50%; margin: -10px 0 0 0; }
.cnt-wrap .wbutton.be::after { font-family: "Font Awesome 5 Free"; content: "\f053"; position: absolute; font-weight: 900; left: 20px; top: 50%; margin: -10px 0 0 0; }
@media screen and (max-width: 767px) { .cnt-wrap .wbutton { font-size: 4.375vw; width: 100%; }
  .cnt-wrap .wbutton:first-child { margin: 0 0 20px 0; } }
.cnt-wrap .flex_bt { display: flex; justify-content: space-around; }
@media screen and (max-width: 767px) { .cnt-wrap .flex_bt { display: block; } }