@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

@media screen and (min-width: 768px) {
    html {
        font-size:10px
    }
}

@media screen and (max-width: 1200px) {
    html {
        font-size:.8333333333vw
    }
}

@media screen and (max-width: 767px) {
    html {
        font-size:1.3333333333vw
    }
}

body{
    font-family: "Noto Sans JP",sans-serif;
}

article {
    position: relative;
    width: 100%;
    margin: 0 auto
}

section {
    padding: 10rem 0
}

@media screen and (max-width: 767px) {
    section {
        padding:10.2564102564vw 0
    }
}

section .inner {
    margin: 0 auto;
    width: calc(100% - 6.6rem);
    max-width: 1100px
}

@media screen and (max-width: 767px) {
    section .inner {
        width:calc(100% - 10.24vw)
    }
}

section .inner._full {
    max-width: 100%
}

section p+p {
    margin-top: 1.5em
}

.hero {
    max-width: 1600px;
    width: 90%;
    margin: 0 auto
}

.hero .title {
    padding-top: 22rem;
    margin-bottom: 8rem
}

@media screen and (max-width: 767px) {
    .hero .title {
        padding-top:35.8974358974vw;
        margin-bottom: 15.3846153846vw
    }
}

.hero .title h1 {
    font-size: 1.4rem;
    letter-spacing: .06em
}

@media screen and (max-width: 767px) {
    .hero .title h1 {
        font-size:3.5897435897vw;
        width: 100%
    }
}

.hero .title h1 .en {
    font-family: "Be Vietnam Pro",serif;
    font-size: 4rem;
    letter-spacing: .06em;
    display: block
}

@media screen and (max-width: 767px) {
    .hero .title h1 .en {
        font-size:7.1794871795vw
    }
}

.cta_contact {
    background: url(../images/webp/contact_ph.webp) no-repeat right center/cover;
    width: 100%;
    aspect-ratio: 144/54;
    min-height: 54rem;
    padding: 0
}

@media screen and (max-width: 767px) {
    .cta_contact {
        background:url(../images/webp/contact_ph_sp.webp) no-repeat center top/cover;
        aspect-ratio: 39/81;
        min-height: 207.6923076923vw
    }
}

.cta_contact .inner {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 900px
}

@media screen and (max-width: 767px) {
    .cta_contact .inner {
        position:relative;
        top: 120vw;
        display: block;
        height: auto
    }
}

.cta_contact .title {
    margin-bottom: 6rem
}

@media screen and (max-width: 767px) {
    .cta_contact .title {
        display:block;
        margin-bottom: 12.8205128205vw
    }
}

.cta_contact .title h2 {
    font-size: 1.4rem;
    letter-spacing: .06em
}

@media screen and (max-width: 767px) {
    .cta_contact .title h2 {
        font-size:3.5897435897vw;
        width: 100%
    }
}

.cta_contact .title h2 .en {
    font-family: "Be Vietnam Pro",serif;
    font-size: 4rem;
    letter-spacing: .06em;
    display: block;
    margin-bottom: .8rem
}

@media screen and (max-width: 767px) {
    .cta_contact .title h2 .en {
        font-size:7.1794871795vw
    }
}

.cta_contact_contents {
    color: #fff
}

@media screen and (max-width: 767px) {
    .cta_contact_contents {
        width:76.9230769231vw;
        margin: 0 auto
    }
}

.cta_contact_contents .title {
    margin-bottom: 5rem!important
}

@media screen and (max-width: 767px) {
    .cta_contact_contents .title {
        margin-bottom:7.6923076923vw
    }
}

.cta_contact_contents p {
    line-height: 180%
}

.cta_contact_contents .btn {
    margin-top: 5rem
}

@media screen and (max-width: 767px) {
    .cta_contact_contents .btn {
        margin-top:7.6923076923vw
    }
}

.tabs .tab {
    cursor: pointer
}

.tabs .tab.active {
    display: block
}

.tabs__body {
    display: none
}

ol,ul.disc {
    margin-left: 2em
}

ul.disc li {
    list-style: disc outside
}

ul.non_style {
    list-style: none
}

.wrap_div {
    position: relative;
    cursor: pointer
}

.child_div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%
}

.js_accordion_openbar {
    position: relative;
    cursor: pointer
}

.js_accordion_openbar .plus {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1px;
    background: #333;
    border-radius: .1em;
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%
}

.js_accordion_openbar .plus::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    rotate: 90deg;
    transition: .6s cubic-bezier(.19,1,.22,1)
}

.js_accordion_openbar.active .plus::before {
    rotate: 0deg
}

.js_accordion_content {
    display: none
}

.marker {
    background: linear-gradient(transparent 60%,#26533D 80%)
}

.fo600 {
    font-weight: 600!important
}

.fo700 {
    font-weight: 700!important
}

.fo400 {
    font-weight: 400!important
}

.enfont {
    font-family: "Be Vietnam Pro",serif;
    letter-spacing: 0
}

.jp_default {
    font-family: "Noto Sans JP","Yu Gothic Medium","Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Verdana,Meiryo,sans-serif;
    letter-spacing: 0
}

.txt_l {
    text-align: left!important
}

.txt_c {
    text-align: center!important
}

.txt_r {
    text-align: right!important
}

.txt_j {
    text-align: justify
}

sup {
    font-size: 75%
}

.margin_auto {
    margin-inline:auto
}

.letter0 {
    letter-spacing: 0!important
}

.nowrap {
    white-space: nowrap
}

@media screen and (min-width: 768px) {
    .sp {
        display:none!important
    }

    .pc {
        display: block!important
    }
}

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

    .pc {
        display: none!important
    }
}

@media screen and (min-width: 768px) {
    nav {
        mix-blend-mode:exclusion;
        position: fixed;
        top: 2rem;
        right: 18rem;
        display: flex!important;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;
        z-index: 100
    }
}

@media screen and (max-width: 767px) {
    nav {
        position:fixed;
        top: 0;
        left: 100vw;
        width: 100%;
        height: 100vh;
        padding: 20.5128205128vw 0 10rem;
        z-index: 15;
        overflow-y: auto;
        box-sizing: border-box;
        background: linear-gradient(90deg, #26533D 0%, #4A916E 80%);
        transition: .4s cubic-bezier(.19,1,.22,1)
    }

    nav.is-active {
        left: 0
    }

    nav .logo {
        width: 85%;
        margin: 0 auto 8.2051282051vw;
        filter: brightness(0) invert(1)
    }
}

nav ul.gnav {
    display: flex;
    align-items: center;
    height: 100%
}

@media screen and (max-width: 767px) {
    nav ul.gnav {
        display:block;
        width: 91.7948717949vw;
        margin: 0 auto;
        height: auto
    }
}

nav ul.gnav li {
    position: relative;
    top: 1px;
    margin: 0 3.6rem 0 0
}

@media screen and (max-width: 767px) {
    nav ul.gnav li {
        top:0;
        margin: 0;
        border-bottom: 1px solid #fff
    }
}

nav ul.gnav li a {
    position: relative;
    display: block;
    padding: 0;
    cursor: pointer;
    color: #fff;
    transition: .4s cubic-bezier(.19,1,.22,1);
    font-weight: 400
}

@media screen and (max-width: 767px) {
    nav ul.gnav li a {
        padding:4.1025641026vw 0
    }
}

nav ul.gnav li a:hover {
    opacity: .4
}

@media screen and (max-width: 767px) {
    nav ul.gnav li a .arrow {
        position:absolute;
        top: 50%;
        translate: 0 -50%;
        right: 0;
        border: 1px solid #fff;
        width: 6.1538461538vw;
        height: 6.1538461538vw;
        background: url(../images/ico_arrow.svg) no-repeat center center/2.8205128205vw 2.5641025641vw;
        border-radius: 50%;
        filter: brightness(0) invert(1)
    }
}

.header_tel{
    text-align: center;
    color: #fff;
    transition: 0.3s;
}

@media screen and (max-width: 767px) {
    .header_tel{
        margin: 7.5vw 0 6vw;
        display: block;
    }
}

.header_tel:hover{
    opacity: 0.6;
}

.tel_flex{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media screen and (max-width: 767px) {
    .tel_flex{
        justify-content: center;
    }
}

.tel_flex img{
    width: 1.8rem;
    filter: invert(100%);
}

@media screen and (max-width: 767px) {
    .tel_flex img{
        width: 10vw;
        filter: none;
    }
}

.tel_flex p{
    font-size: 2.4rem;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1em;
}

@media screen and (max-width: 767px) {
    .tel_flex p{
        font-size: 10vw;
        letter-spacing: 0.04em;
    }
}

.cd_page img{
    display: inline-block;
    padding-left: 0.5rem;
    width: 1.2rem;
    vertical-align: baseline;
}

.cd_page div img{
    display: inline-block;
    padding-left: 1rem;
    width: 1.2rem;
    vertical-align: baseline;
}

@media screen and (max-width: 767px) {
    .cd_page img,
    .cd_page div img {
        width: 12px;
    }
}

.header_open{
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.13em;
}

@media screen and (max-width: 767px) {
    .header_open{
        font-size: 2.5vw;
    }
}

nav .nav_contents {
    width: 91.7948717949vw;
    margin: 0 auto
}

nav .nav_contents .tel {
    margin: 8.2051282051vw auto
}

nav .nav_contents .tel a {
    display: block;
    text-align: center;
    font-size: 6.1538461538vw;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff
}

nav .nav_contents .tel a span {
    vertical-align: baseline;
    letter-spacing: -.02em;
    font-size: 9.2307692308vw;
    font-weight: 500
}

nav .nav_contents .btn {
    width: 100%
}

nav .nav_contents .btn a {
    width: 100%;
    background: #fff;
    color: #26533D;
    font-size: 6.1538461538vw
}

@media screen and (min-width: 768px) {
    .nav_switch {
        display:none
    }
}

@media screen and (max-width: 767px) {
    .nav_switch {
        display:block;
        position: fixed;
        width: 7.1794871795vw;
        height: 5.1282051282vw;
        min-width: 28px;
        min-height: 20px;
        top: 7.1794871795vw;
        right: 5.1282051282vw;
        cursor: pointer;
        z-index: 100
    }

    .nav_switch span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        height: 1px;
        background: #333;
        width: 100%
    }

    .nav_switch span:nth-of-type(1) {
        top: 0
    }

    .nav_switch span:nth-of-type(2) {
        top: 2.5vw
    }

    .nav_switch span:nth-of-type(3) {
        top: 5vw
    }

    .nav_switch.is-open span {
        background: #fff;
        left: 1vw
    }

    .nav_switch.is-open span:nth-of-type(1) {
        top: 2.5vw;
        transform: rotate(-45deg)
    }

    .nav_switch.is-open span:nth-of-type(2) {
        opacity: 0
    }

    .nav_switch.is-open span:nth-of-type(3) {
        top: 2.5vw;
        transform: rotate(45deg)
    }
}

@media screen and (max-width: 767px) {
    .nav_contents .cta_btn{
        color: #26533D;
        background: #fff;
    }
}

.btn {
    display: block;
    width: 30rem
}

@media screen and (max-width: 767px) {
    .btn {
        width:76.9230769231vw
    }
}

.btn a {
    position: relative;
    background: #333;
    height: 5.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .6s cubic-bezier(.19,1,.22,1);
    color: #fff;
    border-radius: 100px;
}

@media screen and (max-width: 767px) {
    .btn a {
        height:12.8205128205vw;
    }
}

.btn a::before {
    position: absolute;
    content: "";
    background: url(../images/ico_arrow.svg) no-repeat center center/100%;
    width: 1.6rem;
    height: 1.2rem;
    right: 2rem;
    transition: .6s cubic-bezier(.19,1,.22,1);
    filter: brightness(0) invert(1)
}

@media screen and (max-width: 767px) {
    .btn a::before {
        width:4.1025641026vw;
        height: 3.0769230769vw;
        right: 3.8461538462vw
    }
}

.btn a:hover {
    background: #26533D
}

.btn._contact {
    width: 13rem;
    box-shadow: 0 0 17px 0 rgba(255,255,255,.1411764706)
}

@media screen and (max-width: 767px) {
    .btn._contact {
        width:76.9230769231vw;
        margin: 0 auto
    }
}

.btn._contact a {
    height: 3.6rem;
    font-size: 1.4rem;
    font-weight: 500;
    box-sizing: border-box;
    border-radius: 100px;
    background: linear-gradient(90deg, #26533D 0%, #4A916E 80%);
    transition: 0.3s;
}

.btn._contact a:hover{
    opacity: 0.6;
}

@media screen and (max-width: 767px) {
    .btn._contact a {
        height:12.8205128205vw;
        margin: 0 auto;
        font-size: 4.1025641026vw
    }
}

@media screen and (min-width: 768px) {
    .btn._contact a::before {
        display:none
    }
}

@keyframes floating_y {
    0% {
        transform: translateY(-10%)
    }

    100% {
        transform: translateY(10%)
    }
}

.title_en{
    display: inline-block;
    font-size: 7.2rem;
    font-weight: 900;
    line-height: 1em;
    letter-spacing: 0.1em;
    background: linear-gradient(90deg, #26533D 0%, #4A916E 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 767px) {
    .title_en{
        font-size: 15vw;
    }
}

.top .title {
    margin-bottom: 6rem
}


@media screen and (max-width: 767px) {
    .top .title {
        display:block;
        margin-bottom: 18.4615384615vw
    }
}

.top .title .ico {
    font-size: 1.4rem;
    font-weight: 400
}

@media screen and (max-width: 767px) {
    .top .title .ico {
        font-size:3.5897435897vw;
    }
}

.top .title .en {
    font-family: "Be Vietnam Pro",serif;
    font-size: 5.2rem;
    font-weight: 600;
    line-height: 1.265;
    margin-bottom: 1rem
}

@media screen and (max-width: 767px) {
    .top .title .en {
        font-size:13.3333333333vw
    }
}

.top .fv {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin-top: 8rem
}

@media screen and (max-width: 767px) {
    .top .fv {
        width:100%;
        height: calc(100svh - 23.0769230769vw);
        margin-top: 20.5128205128vw
    }
}

.top .fv picture {
    position: relative;
    border-radius: .8rem;
    overflow: hidden
}

@media screen and (max-width: 767px) {
    .top .fv picture {
        border-radius:1.0256410256vw;
        height: calc(100svh - 23.0769230769vw)
    }
}

.top .fv picture img {
    object-fit: cover;
    height: 100%;
    width: 100%
}

@media screen and (max-width: 767px) {
    .top .fv picture img {
        object-position:center bottom
    }
}

.top .fv_contents {
    position: absolute;
    bottom: 8.4rem;
    left: 8.4rem;
    color: #fff
}

@media screen and (max-width: 767px) {
    .top .fv_contents {
        left:10.7692307692vw;
        bottom: 6.1538461538vw
    }
}

.top .fv_contents p {
    font-size: 6.4rem;
    font-weight: 600;
    line-height: 1.8;
    font-family: "Noto Sans JP",serif
}

@media screen and (max-width: 767px) {
    .top .fv_contents p {
        line-height:1.265;
        font-size: 8.2051282051vw
    }
}

.top .fv_contents h2 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 30px;
    letter-spacing: .07em
}

@media screen and (max-width: 767px) {
    .top .fv_contents h2 {
        margin-top:4vw;
        font-size: 3.5897435897vw;
        line-height: 1.5;
    }
}

.top .fv .scroll {
    position: absolute;
    right: 8.4rem;
    bottom: 8.4rem;
    width: 8.6rem;
    text-align: center;
    z-index: 2
}

@media screen and (max-width: 767px) {
    .top .fv .scroll {
        display:none
    }
}

.top .fv .scroll p {
    font-weight: 300;
    font-family: "Be Vietnam Pro",serif;
    color: #fff;
    margin-bottom: 1rem
}

.top .fv .scroll .circle {
    position: relative;
    display: block;
    width: 8.6rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1px solid #fff
}

.top .fv .scroll .circle::before {
    position: absolute;
    content: "";
    background: url(../images/ico_arrow_b.svg) no-repeat center center/auto 100%;
    width: 3rem;
    height: 3rem;
    top: 50%;
    left: 50%;
    transition: .6s cubic-bezier(.19,1,.22,1);
    translate: -50% -50%;
    z-index: 2;
    animation: floating_y 1s ease-in-out infinite alternate-reverse
}

@media screen and (max-width: 767px) {
    .top .fv .scroll .circle::before {
        width:4.1025641026vw;
        height: 3.0769230769vw;
        right: 3.8461538462vw
    }
}


/* about -------------------------------------------------- */

.top .about {
    position: relative;
    padding: 7.2rem 0;
    margin-top: 10rem;
    overflow: clip
}

@media screen and (max-width: 767px) {
    .top .about {
        padding:20.5128205128vw 0 0;
        margin-bottom: 0
    }
}

.top .about::before {
    position: absolute;
    content: "";
    background: #F7F7F7;
    width: 66.666666%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 0 .8rem .8rem 0
}

@media screen and (max-width: 767px) {
    .top .about::before {
        width:100%;
        height: 155vw;
        border-radius: 0 2.0512820513vw 2.0512820513vw 0
    }
}

.top .about_contents {
    position: relative;
    display: flex;
    gap: 8rem;
    width: 100%;
    justify-content: space-between
}

@media screen and (max-width: 767px) {
    .top .about_contents {
        display:block
    }
}

.top .about_content {
    color: #333;
    width: 56.5rem
}

@media screen and (max-width: 767px) {
    .top .about_content {
        width:100%
    }
}

.top .about_content .title {
    margin-bottom: 5rem
}

@media screen and (max-width: 767px) {
    .top .about_content .title {
        margin-bottom:13vw;
    }
}

.top .about_content .title .ico {
    margin: 1rem 0 5rem;
}

@media screen and (max-width: 767px) {
    .top .about_content .title .ico {
        font-size:3.7vw;
        margin-bottom: 8.2051282051vw
    }
}

@media screen and (max-width: 767px) {
    .top .about_content .title .ico::before {
        top:1.7948717949vw;
        width: 2.0512820513vw;
        height: 2.0512820513vw
    }
}

.top .about_content .title h2 {
    font-size: 3.6rem
}

@media screen and (max-width: 767px) {
    .top .about_content .title h2 {
        font-size:9.3vw;
    }
}

.about_text {
    line-height: 2.4;
    text-align: justify;
}

.top .about picture {
    position: relative;
    width: calc(100% - 8rem - 56.5rem)
}

@media screen and (max-width: 767px) {
    .top .about picture {
        width:100%;
        margin-top: 10.2564102564vw
    }
}

.top .about picture img {
    position: absolute;
    width: 59rem;
    left: 0;
    top: 0;
    border-radius: .8rem;
    overflow: hidden
}

@media screen and (max-width: 767px) {
    .top .about picture img {
        position:relative;
        width: 100%;
        border-radius: 2.0512820513vw
    }
}


/* space -------------------------------------------------- */

.top .space {
    width: 100%;
    aspect-ratio: 144/44;
    max-height: 60rem;
    overflow: hidden
}

@media screen and (max-width: 767px) {
    .top .space {
        height: 260px;
    }
}

.top .space picture {
    height: 100%
}

.top .space picture img {
    height: 100%;
    object-fit: cover
}


/* support -------------------------------------------------- */

.support{
    padding: 10rem 0;
}

@media screen and (max-width: 767px) {
    .support {
        padding: 26vw 0;
    }
}

.support h2{
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.7;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .support h2{
        font-size: 6vw;
    }
}

.support_content{
    display: flex;
    justify-content: center;
    gap: 8rem;
    margin-top: 10rem;
}

@media screen and (max-width: 767px) {
    .support_content{
        flex-flow: column;
        gap: 12vw;
        margin-top: 25vw;
    }
}

.support_item {
    text-align: center;
}

.support_item img{
    width: 14.5rem;
    margin-bottom: 3.4rem;
}

@media screen and (max-width: 767px) {
    .support_item img{
        width: 37vw;
        margin-bottom: 7vw;
    }
}

.support_item p{
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

@media screen and (max-width: 767px) {
    .support_item p{
        font-size: 5vw;
    }
}


/* service -------------------------------------------------- */

section.service{
    margin-top: -4rem;
    padding: 0 0 10rem;
}

@media screen and (max-width: 767px) {
    section.service{
        padding: 0 0 19.4rem;
    }
}

.service_content{
    display: flex;
    flex-flow: column;
    gap: 10rem;
    margin-top: 10rem;
}

@media screen and (max-width: 767px) {
    .service_content{
        gap: 26vw;
    }
}

.service_item{
    display: flex;
    gap: 10rem;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .service_item{
        flex-flow: column-reverse;
        gap: 10vw;
    }

    .service_content .service_item:nth-of-type(2) {
        flex-flow: column;
    }
}

.service_text{
    display: flex;
    flex-flow: column;
    gap: 3.6rem;
    flex: 1;
}

@media screen and (max-width: 767px) {
    .service_text{
        gap: 8vw;
    }
}

.service_header{
    display: flex;
    align-items: center;
    gap: 3rem;
}

.service_number{
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: 8rem;
    line-height: 1em;
    display: inline-block;
    background: linear-gradient(90deg, #26533D 0%, #4A916E 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 767px) {
    .service_number{
        font-size: 16.5vw;
    }
}

.service_title{
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

.service_title h3{
    font-size: 3.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1em;
}

@media screen and (max-width: 767px) {
    .service_title h3{
        font-size: 5vw;
    }
}

.service_title p{
    color: #9A9A9A;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.07em;
}

@media screen and (max-width: 767px) {
    .service_title p{
        font-size: 3.5vw;
        margin-top: 5px;
    }
}

.service_detail{
    font-weight: 400;
    line-height: 2.4;
    letter-spacing: 0.04em;
}

.service_img{
    flex: 0.87;
}

.banner{
    margin: 10rem auto 0;
    border-radius: 0.4rem;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .banner{
        margin: 26vw auto 0;
        width: 100%;
    }
}


/* company -------------------------------------------------- */

section.company{
    padding: 10rem 0;
}

@media screen and (max-width: 767px) {
    section.company{
        padding: 19.4rem 0;
    }
}

.company_img{
    margin-right: 11rem;
}

@media screen and (max-width: 767px) {
    .company_img{
        margin-right: 5vw;
    }
}

.company_contents{
    width: 70rem;
    margin-left: auto;
    margin-top: 10rem;
}


.contact_contents{
    width: 70rem;
    margin-left: auto;
    margin-top: 10rem;
}

.top .company_contents dl {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
    .top .company_contents dl {
        display:block;
    }
}

.top .company_contents dl dd,.top .company_contents dl dt {
    padding: 2.8rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid #d9d9d9;
}

.top .company_contents dl dt {
    display: flex;
    align-items: center;
    color: #616161;
    font-weight: 500;
    letter-spacing: 0;
    width: 14rem;
}

@media screen and (max-width: 767px) {
    .top .company_contents dl dt {
        width:100%;
        border: none;
        padding: 7.2vw 0 0;
    }
}

.top .company_contents dl dd {
    color: #000;
    letter-spacing: .08em;
    width: calc(100% - 14rem)
}

@media screen and (max-width: 767px) {
    .top .company_contents dl dd {
        padding-top:0;
        width: 100%;
        padding: 0 0 7.2vw;
    }
}


/* news -------------------------------------------------- */

.news{
    background: #F7F7F7;
}

@media screen and (max-width: 767px) {
    section.news{
        padding: 26vw 0;
    }
}

.top .news .inner {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 767px) {
    .top .news .inner {
        display:block;
    }
}

.top .news .inner .title {
    width: calc(100% - 81rem);
    margin-top: .8rem;
}

@media screen and (max-width: 767px) {
    .top .news .inner .title {
        width:100%;
        margin-bottom: 20vw;
    }
}

.top .news_contents {
    width: 70rem;
}

@media screen and (max-width: 767px) {
    .top .news_contents {
        width:100%;
    }
}

.top .news_content {
    position: relative;
}

.top .news_content a {
    display: flex;
    padding: 2.4rem 0;
    border-bottom: solid 1px #E4E4E4;
}

@media screen and (max-width: 767px) {
    .top .news_content a {
        padding:2.5641025641vw 0;
    }
}

.top .news_content .date {
    color: #a9a9a9;
    font-size: 1.4rem;
    letter-spacing: 0;
    line-height: 1.8;
    width: calc(100% - 58rem);
}

@media screen and (max-width: 767px) {
    .top .news_content .date {
        width:calc(100% - 65.641025641vw);
        font-size: 3.5897435897vw;
    }
}

.top .news_content h3 {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0;
    width: 70rem;
    transition: .6s cubic-bezier(.19,1,.22,1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

@media screen and (max-width: 767px) {
    .top .news_content h3 {
        width:65.641025641vw;
        font-size: 3.5897435897vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.top .news_content h3:hover {
    color: #4A916E;
}


/* cta -------------------------------------------------- */

.cta{
    padding: 10rem 0;
    background-image: url(../images/fv_ph.jpg);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
    .cta{
        padding: 15.5vw 5vw;
    }
}

.cta .inner{
    background: #fff;
    padding: 4.4rem 0 5.5rem;
    text-align: center;
    border-radius: 0.4rem;
}

@media screen and (max-width: 767px) {
    .cta .inner{
        padding: 45px 15px;
    }
}

.cta h2{
    font-size: 3.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.5;
}

.cta_text{
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.8;
    margin: 2.5rem 0 3.5rem;
}

@media screen and (max-width: 767px) {
    .cta_text{
        margin: 6vw 0 11vw;
    }
}

.cta_content{
    display: flex;
    justify-content: center;
    gap: 9rem;
}

@media screen and (max-width: 767px) {
    .cta_content{
        flex-flow: column-reverse;
        gap: 9vw;
    }
}

.cta_btn{
    color: #fff;
    background: linear-gradient(to right, #26533D, #4A916E);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 4rem;
    border-radius: 10rem;
    transition: 0.3s;
}

.cta_btn:hover{
    opacity: 0.6;
}

@media screen and (max-width: 767px) {
    .cta_btn{
        font-size: 20px;
        padding: 25px;
        gap: 10px;
    }
}

.cta_btn img{
    width: 2.5rem;
}

@media screen and (max-width: 767px) {
    .cta_btn img{
        width: 25px;
    }
}

.cta_tel{
    text-align: center;
}

.tel_number{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media screen and (max-width: 767px) {
    .tel_number{
        justify-content: center;
    }
}

.tel_number img{
    width: 4rem;
}

@media screen and (max-width: 767px) {
    .tel_number img{
        width: 35px;
    }
}

.tel_number p{
    font-size: 4.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

@media screen and (max-width: 767px) {
    .tel_number p{
        font-size: 36px;
    }
}

.tel_open{
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1em;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .tel_open{
        font-size: 10px;
        margin-top: 5px;
    }
}

/* contact -------------------------------------------------- */

@media screen and (max-width: 767px) {
    section.contact{
        padding: 26vw 0;
        background: #F7F7F7;
    }
}

.top .contact_contents_note {
    margin-bottom: 4rem;
    letter-spacing: 0;
}

@media screen and (max-width: 767px) {
    .top .contact_contents_note {
        margin-bottom:10.2564102564vw;
    }
}

.top .contact_content {
    padding: 1.5rem 0;
}

.top .contact_content p {
    position: relative;
    margin-bottom: 1rem;
    letter-spacing: .1em;
    color: #000;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .top .contact_content p {
        margin-bottom:2.5641025641vw;
    }
}

.top .contact_content p .required {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 1.2rem;
    background: #BE3F3F;
    width: 3.8rem;
    height: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .2rem;
    margin-left: 1rem;
}

@media screen and (max-width: 767px) {
    .top .contact_content p .required {
        margin-left:2.5641025641vw;
        font-size: 3.0769230769vw;
        width: 9.7435897436vw;
        height: 4.1025641026vw;
        border-radius: .5128205128vw;
    }
}

input::placeholder,
textarea::placeholder{
    color: #B4B4B4;
}

.top .contact_content input,.top .contact_content textarea {
    display: block;
    padding: 1rem 1.4rem;
    background: #fff;
    outline: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.6rem;
    font-family: "Noto Sans JP","Yu Gothic Medium","Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Verdana,Meiryo,sans-serif;
    letter-spacing: 0;
    border-radius: .4rem;
    border: 1px solid #e9e9e9;
}

@media screen and (max-width: 767px) {
    .top .contact_content input,.top .contact_content textarea {
        padding:3.8461538462vw;
        font-size: 4.1025641026vw;
    }
}

.top .contact_content input[type=text] {
    height: 50px;
}

@media screen and (max-width: 767px) {
    .top .contact_content input[type=text] {
        height:12.8205128205vw;
    }
}

.top .contact_content textarea {
    height: 200px;
}

@media screen and (max-width: 767px) {
    .top .contact_content textarea {
        height:46.1538461538vw
    }
}

.top .contact_content .row {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(2,1fr)
}

@media screen and (max-width: 767px) {
    .top .contact_content .row {
        display:block
    }
}

@media screen and (max-width: 767px) {
    .top .contact_content .item {
        margin-bottom:3.8461538462vw
    }
}

.top .contact_content .policy_contents {
    background: #fff;
    border-radius: .4rem;
    border: 1px solid #e9e9e9;
    color: #000;
    overflow-y: scroll;
    padding: 2.8rem 2.4rem;
    height: 54.6rem;
    box-sizing: border-box
}

@media screen and (max-width: 767px) {
    .top .contact_content .policy_contents {
        height:auto;
        overflow: inherit;
        padding: 7.1794871795vw 6.1538461538vw
    }
}

.top .contact_content .policy_contents p {
    letter-spacing: .1em;
    line-height: 1.47777;
    font-size: 1.4rem
}

@media screen and (max-width: 767px) {
    .top .contact_content .policy_contents p {
        font-size:3.5897435897vw
    }
}

.top .contact .wpcf7-spinner {
    position: absolute
}

.top .contact .wpcf7-list-item {
    display: inline-block;
    margin: 0
}

.top .contact .submit_btn {
    position: relative;
    margin: 0 auto 0;
    width: 30rem;
    display: flex;
    justify-content: center;
    align-items: center
}

@media screen and (max-width: 767px) {
    .top .contact .submit_btn {
        width:76.9230769231vw
    }
}

.top .contact .submit_btn p {
    margin: 0
}

.top .contact .submit_btn::before {
    position: absolute;
    content: "";
    background: url(../images/ico_arrow.svg) no-repeat center center/100%;
    width: 1.6rem;
    height: 1.2rem;
    top: 50%;
    right: 2rem;
    transition: .6s cubic-bezier(.19,1,.22,1);
    transform: translateY(-50%);
    z-index: 2;
    filter: brightness(0) invert(1)
}

@media screen and (max-width: 767px) {
    .top .contact .submit_btn::before {
        width:4.1025641026vw;
        height: 3.0769230769vw;
        right: 3.8461538462vw
    }
}

.top .contact .submit_btn input {
    position: relative;
    width: 30rem;
    height: 5.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .6s cubic-bezier(.19,1,.22,1);
    padding: 0;
    letter-spacing: .04em;
    background: #333;
    border-radius: .4rem;
    color: #fff
}

@media screen and (max-width: 767px) {
    .top .contact .submit_btn input {
        height:14.358974359vw;
        width: 76.9230769231vw;
        border-radius: 1.0256410256vw
    }
}

.top .contact .submit_btn:hover input {
    cursor: pointer;
    background: #333
}

.top .contact .submit_btn:hover input:disabled {
    cursor: not-allowed;
    background: #26533D;
    color: #fff
}

.top .contact .appearance {
    letter-spacing: .1em;
    margin: 2.6rem 0;
    text-align: center;
    font-weight: 500
}

@media screen and (max-width: 767px) {
    .top .contact .appearance {
        margin:6.6666666667vw
    }
}

.top .contact .appearance p {
    justify-content: center
}

.top .contact .appearance label {
    display: flex;
    align-items: center
}

.top .contact .appearance label input {
    appearance: none;
    height: 2rem;
    width: 2rem;
    margin-right: 1.5rem;
    border: 1px solid #c4c4c4;
    border-radius: .2rem;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden
}

@media screen and (max-width: 767px) {
    .top .contact .appearance label input {
        height:5.1282051282vw;
        width: 5.1282051282vw
    }
}

.top .contact .appearance label input:checked {
    background-color: #26533D
}

.top .contact .appearance label input:checked::before {
    content: "";
    display: block;
    position: relative;
    left: .6rem;
    top: 1px;
    width: .6rem;
    height: 1.2rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

@media screen and (max-width: 767px) {
    .top .contact .appearance label input:checked::before {
        height:3.0769230769vw;
        width: 1.5384615385vw;
        left: 1.5384615385vw
    }
}

.top .contact .appearance label input:focus-visible {
    outline: 2px solid #0C4691;
    outline-offset: 2px
}

.page .news {
    padding: 20rem 0 10rem
}

@media screen and (max-width: 767px) {
    .page .news {
        padding:25.641025641vw 0 12.8205128205vw
    }
}

.page .news .inner {
    max-width: 70rem
}

.page .news h1 {
    font-size: 3.6rem;
    line-height: 1.5;
    margin-bottom: 1.8rem
}

@media screen and (max-width: 767px) {
    .page .news h1 {
        font-size:5.1282051282vw;
        margin-bottom: 3.0769230769vw
    }
}

.page .news .date {
    font-size: 1.4rem;
    color: #a9a9a9
}

@media screen and (max-width: 767px) {
    .page .news .date {
        font-size:3.5897435897vw
    }
}

.page .news_contents {
    margin: 4rem auto
}

@media screen and (max-width: 767px) {
    .page .news_contents {
        margin:6.1538461538vw auto
    }
}

.page .news_contents dl,.page .news_contents figure,.page .news_contents ol,.page .news_contents p,.page .news_contents ul {
    margin-bottom: 3rem
}

@media screen and (max-width: 767px) {
    .page .news_contents dl,.page .news_contents figure,.page .news_contents ol,.page .news_contents p,.page .news_contents ul {
        margin-bottom:7.6923076923vw
    }
}

.page .news .btn {
    margin: 12rem auto 0
}

.page .thanks {
    min-height: calc(100vh - 37.4rem);
    background: #F7F7F7;
    padding: 16rem 0 10rem;
    box-sizing: border-box
}

@media screen and (max-width: 767px) {
    .page .thanks {
        padding:41.0256410256vw 0 25.641025641vw;
        min-height: auto
    }
}

.page .thanks .inner {
    max-width: 80rem;
    padding: 3.6rem 3rem;
    background: #fff;
    box-sizing: border-box;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .page .thanks .inner {
        padding:9.2307692308vw 2.5641025641vw
    }
}

.page .thanks h1 {
    font-size: 2.8rem;
    letter-spacing: .07em;
    text-align: center;
    display: inline-block;
    background: linear-gradient(90deg, #26533D 0%, #4A916E 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 767px) {
    .page .thanks h1 {
        font-size:5.1282051282vw
    }
}

.page .thanks_contents p {
    margin: 3rem 0;
    text-align: center;
    line-height: 2.4
}

@media screen and (max-width: 767px) {
    .page .thanks_contents p {
        margin:7.6923076923vw 0
    }
}

.page .thanks .btn {
    margin: auto
}

.f-white {
    color: white;
}