@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@700&display=swap');

@font-face {
    font-family: Golos700;
    src: url(../font/GolosText-Bold.ttf);
}

/*html {

	font-size: 62.5% !important;
}*/
body {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: clamp(0.875rem, 0.8rem + 0.38vw, 1.25rem);
    line-height: 1.6em;
    letter-spacing: 0em;
    background: #fff;
    color: #221814;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
a {
    color: inherit;
    text-decoration: none;
}
a:hover,
a:focus {
    color: inherit;
	outline: none;
    transition: .4s;
}
a:active,
button:active,
svg:active {
    text-decoration: none;
    outline: none;
}
ul {
    margin:0;
    padding: 0;
}
li {
    list-style-type: none;
}
figure {
    margin: 0;
}
h1, h2, h3, h4, h5 {
    margin: 0;
}



/***** common *****/
.content-index {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
input {
    outline: none;
}
.content-main {
    width: 100%;
}



/***** header *****/
/***** header bootstrap5 *****/
header {
    position: fixed;
    width: 100%;
    z-index: 99;
}
.bg-light {
    background-color:rgba(255, 255, 255, 0.9) !important;
}
.navbar {
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    z-index: 99;
    border-bottom: 4px solid rgba(248, 182, 44, 0.8);
}
.navbar-brand {
    display: flex !important;
    flex-basis: 50%;
    margin: 0 !important;
    padding: 0 0 0 24px;
}
.navbar-nav {
    align-items: center;
    margin: 0 !important;
    padding: 16px 0 48px;
}
.container-fluid {
    padding: 16px 0;
}
a.navbar-brand img {
    width: min(88%, 640px);
    min-width: 420px;
    height: auto;
}
.navbar-light .navbar-toggler {
    margin-right: 24px;
}
.navbar-toggler:focus {
    box-shadow: 0 0 4px 4px rgba(229, 151, 68, 0.8);
    transition: .2s;
}
.navbar-nav .nav-item {
    width: 100%;
}
.navbar-nav .nav-link {
    position: relative;
    display: block;
    padding: 32px 0 0;
    color: #6fb22c !important;
    font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
    font-weight: 600;
    text-align: center;
}
.show .navbar-nav .nav-link::before {
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #6fb22c;
    display: inline-block;
    position: relative;
    top: 1px;
    margin-right: 6px;
    transition: .4s;
}
.show .navbar-nav .nav-link:hover::before {
    border-color: transparent transparent transparent #f8b62c;
}

@media (min-width: 1200px) {
    .navbar-nav {
        padding: 0;
    }
    .navbar-nav .nav-item {
        width: auto;
    }
    ul.navbar-nav li {
        margin-left: 24px;
    }
    ul.navbar-nav li:nth-child(1) {
        margin-left: 0;
    }
    ul.navbar-nav li.li-prim a {
        position: relative;
        width: 100%;
        display: block;
        padding: 16px !important;
        text-align: center;
        border-bottom: 1px solid #6fb22c;
        color: #6fb22c !important;
        font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
        font-weight: 600;
    }
    ul.navbar-nav li.li-prim a::before {
        content: "";
        position: absolute;
        bottom: -24px;
        left: 50%;
        margin-left: -15px;
        border: 12px solid transparent;
        border-top: 12px solid #FFF;
        z-index: 2;
    }
    ul.navbar-nav li.li-prim a::after {
        content: "";
        position: absolute;
        bottom: -28px;
        left: 50%;
        margin-left: -17px;
        border: 14px solid transparent;
        border-top: 14px solid #6fb22c;
        z-index: 1;
    }
    ul.navbar-nav li.li-prim a:hover,
    ul.navbar-nav li.li-prim a:focus {
        background: #eaeaea;
    }
    ul.navbar-nav li.li-prim a:hover::before {
        border-top-color: #eaeaea;
        transition: .4s;
    }
    ul.navbar-nav li.li-contact {
        background: #f8b62c;
        /*min-width: 320px;*/
        width: clamp(15rem, 14rem + 5vw, 20rem);
        height: 120px;
    }
    ul.navbar-nav li.li-contact a {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 0 0 0 4.8em !important;
        color: #fff !important;
        font-weight: bold;
        line-height: 1.2;
        text-align: left;
    }
    ul.navbar-nav li.li-contact a span {
        display: block;
    }
    ul.navbar-nav li.li-contact a::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 32px;
        background: url(../img/envelope.svg) no-repeat;
        background-size: 40px 40px;
        margin-top: -21px;
        width: 40px;
        height: 40px;
    }

    .container-fluid {
        padding: 0;
    }
    .navbar-brand,
    .navbar-expand-xl .navbar-collapse {
        display: flex !important;
        flex-basis: 50%;
    }
    .navbar-expand-xl .navbar-collapse {
        justify-content: flex-end;
        margin: 0 !important;
        flex: 0 0 auto;
    }
}



/***** content *****/
.section-block {
    width: 100%;
}
.section-hero figure img {
    width: 100%;
    height: auto;
}
.content-inner {
    /*width: clamp(15rem, 5.5rem + 47.5vw, 62.5rem);*/
    width: clamp(20rem, 9rem + 55vw, 75rem);
    margin: 0 auto;
    padding: 64px 0 88px;
}
h2.tit-h2 {
    position: relative;
    margin-bottom: 12px;
}
h2.tit-h2::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    margin-top: -2px;
    width: 80%;
    border: 4px solid #6fb22c;
    z-index: 1;
}
h2.tit-h2 span {
    position: relative;
    display: inline-block;
    background: #fff;
    padding-right: 0.2em;
    font-family: 'Golos700', sans-serif;
    font-size: clamp(2.5rem, 1.8rem + 3.5vw, 6rem);
    color: #6fb22c;
    z-index: 9;
}
h2.tit-h2-bg {
    font-family: 'Golos Text', sans-serif;
    font-size: clamp(2.5rem, 1.8rem + 3.5vw, 6rem);
    color: rgba(0,0,0,0);
    background: url(../img/bg_headline03.jpg) no-repeat;
    -webkit-background-clip: text;
    margin-bottom: 12px;
}
.content-inner h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
    margin-bottom: 12px;
}



/***** scroll animetion *****/
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}
.scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
}
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}



/*** profile ***/
.section-profile {
    background: url(../img/bg_town.png) repeat-x bottom;
    background-size: clamp(60rem, 48rem + 60vw, 120rem);
}
.tbl-profile {
    border-collapse: separate;
    border-spacing: 4px;
    width: calc(100% + 8px);
    margin-left: -4px;
    margin-top: 24px;
    margin-bottom: 24px;
}
.tbl-profile th,
.tbl-profile td {
    padding: 24px;
}
.tbl-profile th {
    background: #f4eedd;
    font-weight: normal;
}
.tbl-profile td {
    background: #eff5d6;
}
ul.feature-profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
ul.feature-profile li {
    flex: 1 0 33.3%;
}
ul.feature-profile li img {
    width: 100%;
    height: auto;
}



/*** service ***/
.section-service {
    background: #fdf6e9 url(../img/bg_town_circle.png) no-repeat;
    /* 20230403変更 */
    background-position: left 24px bottom 40px;
/*    background-position: left 24px center;*/
    /*background-size: 520px 520px;*/
    background-size: clamp(20rem, 17.5rem + 12.5vw, 32.5rem);
}
.group-service {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 16px;
}
.group-service .unit-service {
    position: relative;
    flex: 0 0 calc(50% - 8px);
}
.group-service .unit-service::before {
    content: '';
    display: block;
    padding-top: 100%;
    background: rgba(0, 0, 0, 0.4);
}
.group-service .unit-service .box-service {
    position: absolute;
    width: 72%;
    top: 50%;
    left: 50%;
    text-align: center;
    color: #fff;
    transform: translate(-50%, -50%);
}
.unit-service01 {
    background: url(../img/service01.jpg) no-repeat;
    background-size: cover;
}
.unit-service02 {
    background: url(../img/service02.jpg) no-repeat;
    background-size: cover;
}
.unit-service03 {
    background: url(../img/service03.jpg) no-repeat;
    background-size: cover;
}
.unit-service04 {
    background: url(../img/service04.jpg) no-repeat;
    background-size: cover;
}
h3.tit-service {
    margin-bottom: clamp(1.125rem, 0.542rem + 1.22vw, 2rem);
}
h3.tit-service span {
    display: block;
    margin-bottom: clamp(1.125rem, 0.875rem + 0.52vw, 1.5rem);
}
h3.tit-service span img {
    width: clamp(5.813rem, 4.271rem + 3.21vw, 8.125rem);
    height: clamp(6.25rem, 4.583rem + 3.47vw, 8.75rem);
}
p.tit-service {
    height: 4.75rem;
    margin: 0;
    line-height: 1.4;
    text-align: left;
}



/*** access ***/
.section-access {
    margin-top: -160px;
    padding-top: 160px;
    background: url(../img/bg_town_circle.png) no-repeat;
    background-position: right 24px top;
    /*background-size: 520px 520px;*/
    background-size: clamp(20rem, 17.5rem + 12.5vw, 32.5rem);
}
ul.list-access {
    margin-bottom: 24px;
}
ul.list-access li {
    line-height: 2.0;
}
ul.list-access li span {
    display: inline-block;
    margin-right: 12px;
}
ul.list-access li span img {
    position: relative;
    top: -3px;
    width: auto;
    height: 22px;
}
.map-access {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56%;
    border: 1px solid #ddd;
}
.map-access iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/*** contact ***/
.section-contact {
    background: #f1dca3 url(../img/bg_town.png) repeat-x bottom;
    background-size: clamp(60rem, 48rem + 60vw, 120rem);
}
.section-contact h2.tit-h2 span {
    background: #f1dca3;
}
.tbl-contact-form {
    /*border-collapse: separate;
    border-spacing: 12px;
    width: calc(100% + 24px);
    margin-left: -12px;*/
    width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
}
.tbl-contact-form tr {
    display: flex;
    justify-content: space-between;
    gap: 12px 12px;
}
.tbl-contact-form th {
    flex: 0 0 12em;
    background: #f1b36b;
    margin-bottom: 12px;
    padding: 16px 20px;
    font-weight: normal;
}
.tbl-contact-form td {
    flex: 1 0 auto;
    margin-bottom: 12px;
    height: 64px;
}
.tbl-contact-form td input,
.tbl-contact-form td select,
.tbl-contact-form td textarea {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0 16px;
}
.tbl-contact-form tr.code-box td input[type="number"] {
    width: 12em;
    height: 100%;
    margin-right: 12px;
}
.tbl-contact-form tr.select-box {
    display: flex;
    align-items: stretch;
}
.tbl-contact-form th {
    flex: 0 0 12em;
}
.tbl-contact-form tr.select-box td {
    flex: 1 0 auto;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-wrap: wrap;
}
.tbl-contact-form tr.select-box td select {
    flex: 0 0 12em;
    width: 12em;
    margin-right: 12px;
    margin-bottom: 12px;
}
.tbl-contact-form tr.select-box td span:nth-of-type(1) {
    display: inline-block;
    flex: 0 0 calc(100% - 12em - 64px);
    width: calc(100% - 12em - 64px);
    margin-bottom: 12px;
}
.tbl-contact-form tr.select-box td span:nth-of-type(1) input {
    width: 100%;
}
.tbl-contact-form tr.select-box td span:nth-of-type(2) {
    display: block;
    flex: 0 0 calc(100% - 52px);
}
.tbl-contact-form tr.select-box td span:nth-of-type(2) input {
    width: 100%;
    height: 64px;
}
.tbl-contact-form td textarea {
    padding: 16px;
}

.form-contact {
    margin: 24px 0;
}
div.flex-form {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px 12px;
}
div.flex-form label {
    flex: 0 0 12em;
    height: 62px;
    margin-bottom: 12px;
    padding: 0 16px;
    background: #f1b36b;
    display: flex;
    align-items: center;
}
div.flex-form input,
div.flex-form select,
div.flex-form textarea {
    flex: 1 0 auto;
    height: 62px;
    margin-bottom: 12px;
    padding: 0 16px;
    border: none;
    outline: none;
}
::placeholder {
    color: #aaa;
    font-weight: normal;
}
select {
    color: #aaa;
}
option {
    color: #221814;
}
.input-number-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.input-number-box .flex-form {
    justify-content: flex-start;
    flex: 0 0 calc(20em + 32px)
}
.input-number-box .flex-form input {
    flex: 0 0 8em;
    width: 8em;
}
.input-number-box a {
    margin-bottom: 12px;
    color: #be6c15;
    text-decoration: underline;
}
.input-number-box a:hover {
    text-decoration: none;
}
.flex-form-height label {
    height: auto !important;
}
.flex-form .input-column {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}
.flex-form .input-column select {
    flex: 0 0 8em;
    width: 8em;
    margin-right: 12px;
}
.flex-form .input-column input:nth-of-type(1) {
    flex: 1 0 auto;
}
.flex-form .input-column input:nth-of-type(2) {
    flex: 1 0 100%;
}
.flex-form-textarea label,
.flex-form-textarea textarea {
    height: auto !important;
}
.flex-form-textarea textarea {
    padding: 16px !important;
}
.btn-submit-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin:  24px 0;
}
.btn-submit-box .btn-submit {
    /*flex: 0 0 400px;*/
    flex: 0 0 clamp(16.25rem, 10.417rem + 12.15vw, 25rem);
    height: 72px;
    margin-right: 24px;
}
.btn-submit-box .btn-confirm,
.btn-submit-box .btn-back,
.btn-submit-box .btn-enter {
    position: relative;
}
.btn-submit-box .btn-confirm input {
    position: relative;
    width: 100%;
    height: 100%;
    background: #aaa;
    border: none;
    border-radius: 72px;
    color: #fff;
    font-size: clamp(1rem, 0.75rem + 0.52vw, 1.375rem);
    font-weight: 600;
}
.btn-submit-box .btn-back input {
    position: relative;
    width: 100%;
    height: 100%;
    background: #aaa;
    border: none;
    border-radius: 72px;
    color: #fff;
    font-size: clamp(1rem, 0.75rem + 0.52vw, 1.375rem);
    font-weight: 600;
}
.btn-submit-box .btn-enter input {
    position: relative;
    width: 100%;
    height: 100%;
    background: #e59744;
    border: none;
    border-radius: 72px;
    color: #fff;
    font-size: clamp(1rem, 0.75rem + 0.52vw, 1.375rem);
    font-weight: 600;
}
.btn-submit-box .btn-confirm::after {
    position: absolute;
    content: "";
    display: inline-block;
    top: 50%;
    right: 24px;
    width: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    height: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    margin-top: clamp(-0.813rem, -0.688rem + -0.26vw, -1rem);
    background: url(../img/check-circle-fill.svg) no-repeat;
    background-size: cover;
    z-index: 9;
}
.btn-submit-box .btn-back::before {
    position: absolute;
    content: "";
    display: inline-block;
    top: 50%;
    left: 24px;
    width: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    height: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    margin-top: clamp(-0.813rem, -0.688rem + -0.26vw, -1rem);
    background: url(../img/arrow-left-circle-fill.svg) no-repeat;
    background-size: cover;
    z-index: 9;
}
.btn-submit-box .btn-enter::after {
    position: absolute;
    content: "";
    display: inline-block;
    top: 50%;
    right: 24px;
    width: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    height: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    margin-top: clamp(-0.813rem, -0.688rem + -0.26vw, -1rem);
    background: url(../img/send.svg) no-repeat;
    background-size: cover;
    z-index: 9;
}
.btn-submit input[type="submit"]:hover,
.btn-submit input[type="submit"]:focus {
    box-shadow: 0 0 4px 4px rgba(229, 151, 68, 0.8);
    transition: .2s;
}



/***** confirm *****/
.tbl-form-confirm {
    width: calc(100% + 24px);
    border-collapse: separate;
    border-spacing: 12px;
    margin-left: -12px;
    margin-top: -12px;
    margin-bottom: 0;
}
.tbl-form-confirm th,
.tbl-form-confirm td {
    height: 62px;
    padding: 16px;
    border: none;
}
.tbl-form-confirm td.td-textarea {
    height: auto;
}
.tbl-form-confirm th {
    width: 12em;
    background: #f1b36b;
    font-weight: normal;
}
.tbl-form-confirm td {
    background: #fff;
}



/***** complete *****/
h2.h2-comp {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
    color: #6fb22c;
    font-weight: 600;
    margin-bottom: 24px;
    text-align: center;
    line-height: 1.4;
}
p.txt-comp {
    border: 1px solid #666;
    border-radius: 40px;
    padding: 24px 40px;
}
.btn-back-top {
    margin: 32px auto 40px;
    text-align: center;
}
.btn-back-top a {
    position: relative;
    display: inline-block;
    width: clamp(16.25rem, 10.417rem + 12.15vw, 25rem);
    height: 64px;
    background: #aaa;
    border: none;
    border-radius: 64px;
    color: #fff;
    font-size: clamp(1rem, 0.75rem + 0.52vw, 1.375rem);
    font-weight: 600;
    line-height: 64px;
}
.btn-back-top a::before {
    position: absolute;
    content: "";
    display: inline-block;
    top: 50%;
    left: 24px;
    width: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    height: clamp(1.5rem, 1.167rem + 0.69vw, 2rem);
    margin-top: clamp(-0.813rem, -0.688rem + -0.26vw, -1rem);
    background: url(../img/arrow-left-circle-fill.svg) no-repeat;
    background-size: cover;
    z-index: 9;
}



/***** privacy policy *****/
.content-ppolicy {
    padding: 24px;
    color: #221814;
}
.h1-ppolicy {
    font-size: clamp(1rem, 0.911rem + 0.6vw, 1.625rem);
    color: #6fb22c;
    font-weight: 600;
    text-align: center;
}
.h2-ppolicy {
    font-size: clamp(1rem, 0.911rem + 0.6vw, 1.625rem);
}
.content-inner-ppolicy {
    margin: 24px auto;
}
.content-inner-ppolicy h3 {
    font-size: clamp(0.938rem, 0.857rem + 0.54vw, 1.5rem);
}
.content-inner-ppolicy p {
    font-size: clamp(0.875rem, 0.8rem + 0.38vw, 1.25rem);
}
.content-ppolicy .btn-back-top {
    margin: 24px auto 0;
}



/***** footer *****/
footer {
    display: block;
    position: relative;
    width: 100%;
    background: #333;
}
.content-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /*width: clamp(15rem, 5.5rem + 47.5vw, 62.5rem);*/
    width: clamp(20rem, 9rem + 55vw, 75rem);
    margin: 0 auto;
    padding: 40px 0 16px;
}
.logo-footer {
    flex: 0 0 50%;
}
.logo-footer a {
    display: block;
}
ul.nav-footer {
    flex: 0 0 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}
.logo-footer a img {
    width: 88%;
    height: auto;
}
ul.nav-footer li {
    flex: 0 0 48%;
    text-align: center;
    border-left: 1px solid #fff;
    margin-bottom: 16px;
}
ul.nav-footer li:nth-of-type(even) {
    border-right: 1px solid #fff;
}
ul.nav-footer li a {
    display: block;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.08em;
    text-decoration: none;
    transition: .2s;
}
ul.nav-footer li a:hover,
ul.nav-footer li a:focus {
    text-decoration: underline;
}
.copy {
    width: 100%;
    border-top: 1px solid #fff;
}
.copy p.copylight {
    width: clamp(15rem, 5.5rem + 47.5vw, 62.5rem);
    margin: 0 auto;
    padding: 8px 0;
    font-size: 12px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.1em;
}
.copy p.copylight span {
    display: inline-block;
    margin-right: 1em;
}



/***** other *****/
.page-top-scroll {
    opacity: 0;
    position: fixed;
    bottom: 104px;
    right: 4%;
    z-index: 99;
    transition: 0.4s;
}
.page-top-scroll.show {
    opacity: 1;
    animation: appear 0.8s ease;
}
.page-top-scroll a {
    position: relative;
    display: block;
    background: rgba(230, 152, 66, 0.88);
    width: 80px;
    height: 80px;
    border-radius: 80px;
}
.page-top-scroll a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-top: -6px;
    margin-left: -12px;
    border-top: 2px solid rgba(255, 255, 255, 0.88);
    border-left: 2px solid rgba(255, 255, 255, 0.88);
    transform: rotate(45deg);
}



/***** sp view *****/
@media (max-width: 767px) {
    .section-hero figure {
        position: relative;
        width: 100%;
    }
    .section-hero figure::before {
        content: "";
        display: block;
        padding-top: 88%;
    }
    .section-hero figure img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .content-inner {
        padding: 32px 8px 40px;
    }
    .content-inner h3 {
        font-size: clamp(0.875rem, 0.619rem + 1.71vw, 1.438rem);
    }
    .navbar-brand {
        padding-left: 8px;
    }
    .navbar-brand {
        flex-basis: calc(100% - 80px);
    }
    a.navbar-brand img {
        width: 100%;
        max-width: 420px;
        min-width: auto;
    }
    .navbar-light .navbar-toggler {
        margin: 8px;
    }
    .tbl-profile {
        border-spacing: 8px;
        width: calc(100% + 16px);
        margin-left: -8px;
    }
    .tbl-profile th,
    .tbl-profile td {
        display: block;
        padding: 16px 12px;
    }
    ul.feature-profile {
        display: block;
    }
    ul.feature-profile li {
        margin-bottom: 12px;
    }
    .group-service {
        display: block;
    }
    .section-service {
        background-image: none;
    }
    .section-access {
        margin-top: -100px;
        padding-top: 100px;
        background-position: right top;
        background-size: 200px 200px;
    }
    .map-access {
        padding-top: 80%;
    }
    div.flex-form {
        display: block;
    }
    div.flex-form label {
        height: 48px;
        margin-bottom: 0;
        padding: 0 12px;
    }
    div.flex-form input,
    div.flex-form select,
    div.flex-form textarea {
        width: 100%;
        margin-bottom: 16px;
        height: 48px;
        padding: 0 12px;
    }
    .input-number-box {
        display: block;
    }
    .input-number-box .flex-form input {
        margin-bottom: 8px;
    }
    .input-number-box a {
        display: block;
        margin-bottom: 16px;
    }
    .flex-form-height label {
        height: 48px !important;
    }
    .flex-form .input-column select,
    .flex-form .input-column input:nth-of-type(1) {
        margin-bottom: 4px;
    }
    .flex-form.textarea label {
        height: 48px !important;
    }
    .flex-form-textarea textarea {
        padding: 12px !important;
    }
    .btn-submit-box {
        display: block;
        margin: 8px auto 24px;
    }
    .btn-submit-box .btn-submit {
        width: 80%;
        height: 48px;
        margin: 0 auto 16px;
    }
    .btn-submit-box .btn-back input,
    .btn-submit-box .btn-enter input {
        font-size: clamp(0.938rem, 0.624rem + 1.57vw, 1.375rem);
    }
    .btn-back-top a {
        font-size: clamp(0.875rem, 0.818rem + 0.38vw, 1rem);
    }
    .tbl-form-confirm {
        border-spacing: 16px;
    }
    .tbl-form-confirm th,
    .tbl-form-confirm td {
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 12px;
        color: #221814
    }
    .tbl-form-confirm td.w-8em {
        width: 8em !important;
    }
    .tbl-form-confirm td.m-b-n12 {
        margin-bottom: -12px !important;
    }
    h2.h2-comp span {
        display: block;
    }
    .content-footer {
        display: block;
        padding: 32px 0 16px;
    }
    .logo-footer {
        margin: 0 auto 32px;
    }
    .logo-footer a {
        display: block;
        text-align: center;
    }
    .logo-footer a img {
        width: 80%;
    }
}