/*
 * 共通パーツ
 */

 /* Header */
@media screen and (min-width: 768px) {
    .l-header {
        display: contents;
    }

    .header {
        width: calc(100% - 40px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
        padding: 16px 32px;
        position: sticky;
        top: 24px;
        background-color: rgba(255, 255, 255, 0.5);
        border: 2px solid rgb(255, 255, 255);
        border-radius: 1000px;
        z-index: 5;
    }
}

.header p {
    margin: 0;
}


.header_logo {
    margin: 0;
}

.header_logo_img {
    height: 48px;
}

.header_menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 2em;
    font-size: 16px;
    font-weight: 500;
}

@media screen and (max-width: 767px) {
    .header {
        width: calc(100% - 40px);
        margin: auto;
        position: fixed;
        top: 20px;
        left: 24px;
        z-index: 5;
    }

    .headerNav {
        padding: 20px 24px;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%; /* メニューの幅を設定 */
        max-width: 100%;
        height: 100%;
        background-color: #9AD9CD;
        box-shadow: -2px 0 80px rgba(39, 39, 39, 0.7);
        transition: right 0.3s ease-in-out;
        z-index: 99;
    }

    .header._isOpen .headerNav {
        right: 0;
    }

    .header_menu {
        display: block;
        margin-top: 40px;
    }

    .header_menu_item {
        
        border-bottom: #272727 1px solid;
    }
    .header_menu_item a {
padding: 24px 16px !important;
color: #272727 !important;
display: block;
background-color: transparent !important;
border: none !important;
transition: .3s;
    }

    .header_menu .btn03 a:hover::after{
right: 100%;
    }

    .header_menu_item a:hover {
    opacity: .6;
    }

    .header_menu_item a span {
        color: #272727 !important;
    }

    .header_menu_item a:hover {

    }

    ._repos {
        border-top: #272727 1px solid;
    }

    ._contact {
        margin-top: 32px;
        border-bottom: none;
    }

    ._privacy {
        font-size: 14px;
        border-bottom: none;
    }

    .header_menu_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 8px;
        border-radius: 24px;
        background-color: #00a888;
        position: absolute;
        inset: 0 0 auto auto;
        z-index: 2;
        cursor: pointer;
    }

    .header_menu_btn span {
        width: 20px;
        height: 2px;
        margin: 0 auto;
        font-size: 0;
        text-indent: -9999px;
        border-radius: 2px;
        background-color: #ffffff;
        position: relative;
        right: 0;
        transition: .2s ease-out;
    }

    .header_menu_btn span::before,
    .header_menu_btn span::after {
        content: "";
        position: absolute;
        right: 0;
        height: 2px;
        background-color: #ffffff;
        border-radius: 2px;
        transition: .2s ease-out;
    }

    .header_menu_btn span::before {
        width: 24px;
        top: -8px;
    }

    .header_menu_btn span::after {
        width: 14px;
        top: 8px;
    }
}


/* heading */
hgroup {
    margin-bottom: 40px;
}
hgroup h2 {
    position: relative;
}

hgroup h2 span {
    margin-bottom: 16px;
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 600;
    font-size: 56px;
    letter-spacing: 0.02em;
    position: relative;
}

hgroup h2::before {
    content: attr(data-text);
    color: #F7FBFA;
    /* font-family: 'EB Garamond', serif;
    font-weight: 500; */
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: min(22vw, 200px);
    position: absolute;
    top: -150px;
    left: -100px;
}

hgroup h2.hgroup_right::before {
    left: auto;
    right: -80px;
}

hgroup span {
    /* font-family: 'Montserrat Alternates', sans-serif; */
    font-weight: 500;
    font-size: 24px;
    position: relative;
}

.footer_hgroup h2::before {
    color: #e3f0ee40;
}

@media screen and (max-width: 767px) {
    hgroup h2::before {
        top: -70px;
        left: auto;
        right: 0;
        font-size: 21vw;
    }

    hgroup h2.hgroup_right::before {
        left: auto;
        right: 0;
    }

    hgroup h2 span {
        font-size: 40px;
    }

    hgroup span {
        font-size: 18px;
    }
    

    .footer_top hgroup {
        margin-bottom: 0;
    }

    .footer_top hgroup h2::before {
        left: -10px;
    }
}

/* button */
.btn01 {
    width: 260px;
    display: grid;
    position: relative;
    padding: 24px 4px;
    font-size: 20px;
    font-weight: 600;
    align-items: center;
    border-bottom: #272727 1px solid;
}

.btn01::before, .btn01::after {
    width: 12px;
}

.btn01::before {
    content: "";
    grid-column: 1 / 2;
}

.btn01::after {
    content: "chevron_right";
    font-family: "Material Symbols Outlined";
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    transition: color .3s ease, transform .3s ease;
    color: #272727;
}

@media screen and (max-width: 767px) {
	.btn01 {
        padding: 16px 4px;
        font-size: 16px;
    }

    .btn01::after {
        top: 27%;
        transform: rotate(90deg);
    }
}

.btn02 {
    width: 275px;
    min-width: 250px;
    height: 56px;
    display: flex;
    position: relative;
    overflow: hidden;
    font-weight: 500;
    color: #272727;
    text-align: center;
    line-height: normal;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 32px;
    box-shadow: 2px 3px 3px #777777;
}

.btn02 span {
    position: relative;
    transition: color .3s ease;
}

.btn02::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #40BEA6;
    border: #ffffff 1px solid;
    border-radius: 32px;
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.btn02::after {
    content: "chevron_right";
    font-family: "Material Symbols Outlined";
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    transition: color .3s ease, transform .3s ease;
    color: #272727;
}

.btn02:hover::before {
    transform: scaleX(1);
}

.btn02:hover span {
    color: #ffffff;
}

.btn02:hover::after {
    color: #ffffff;
    transform: translate(4px, -50%);
}

.btn03 a {
    padding: 8px 24px;
    background-color: #00a888;
    border: #00a888 1px solid;
    border-radius: 1000px;
    transition: .3s ease;
    position: relative;
    display: block;
    overflow: hidden;
}

.btn03 a::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    right: 100%;
    transition: .3s;
}

.btn03 a span {
    color: #ffffff;
    position: relative;
    display: block;
    z-index: 6;
    transition: .3s;
}

.btn03 a:hover::after {
    right: 0;
}

.btn03 a:hover span {
    color: #00a888;
}

/* footer */
.footer {
    padding: 64px 0 0;
    color: #ffffff;
    background-color: #00a888;
    border-radius: 40px 40px 0 0;
    position: relative;
}

.footer_top {
    margin: 0 80px 0;
    border-bottom: #ffffff 1px solid;
}

.footer_hgroup {
    display: flex;
}

.footer_hgroup_text {
    margin: auto 0 auto 24px;
}

.footer_contact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    column-gap: 40px;
}

.footer_contact_text {
    width: 665px;
}

.footer_bottom {
    margin: 32px 80px 0;
}
.footer_link {
    display: flex;
    justify-content: space-between;
}

.footer_link_privacy {
    text-decoration: underline;
    margin-top: 16px;
}

.footer_link_sns {
    display: flex;
    column-gap: 24px;
}

.footer_copyright {
    padding: 16px 80px;
    column-gap: 40px;
    display: flex;
    justify-content: space-between;
    color: #777777;
    background-color: #ffffff;
    font-size: 14px;
}

.footer_copyright_text {
    /* font-family: 'EB Garamond', serif; */
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
}

@media screen and (max-width: 767px) {
    .footer {
        padding: 48px 0 0;
    }

    .footer_top {
        margin: 0 24px 0;
    }

    .footer_contact {
        display: block;
    }

    .footer_contact_text {
        width: auto;
    }

    .footer_contact a {
        margin: 24px auto 40px;
    }

    .footer_bottom {
        margin: 32px 24px 0;
    }

    .footer_copyright {
        padding: 16px 16px 8px;
        display: block;
        font-size: 12px;
    }

    .footer_copyright p {
        margin: 0 0 8px;
    }

    .footer_copyright_text {
        text-align: right;
    }
}

/* インライン */
@media screen and (min-width: 768px) {
    .about, .service, .flow {
        padding: 120px 80px;
    }
}

@media screen and (max-width: 767px) {
    .about, .service {
        padding: 40px 16px;
    }

    .flow {
        padding: 80px 16px;
    }
}

/* 下層のページ共通パーツ */
.lower_layer {
    padding: 80px;
}

.page_title {
    margin-bottom: 80px;
    padding-top: 80px;
    font-size: 56px;
}

.page_title::before {
    font-size: max(12vw, 130px);
    position: absolute;
    top: 60px;
    left: auto;
    right: 0;
}

.page_title span {
    position: relative;
    z-index: 2;
}

h1::before {
    content: attr(data-text);
    color: #F7FBFA;
    /* font-family: 'EB Garamond', serif;
    font-weight: 500; */
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: min(25vw, 270px);
    position: absolute;
    top: -200px;
    left: -100px;
}

.content {
    margin: auto;
    padding: 80px;
    max-width: 1000px;
    background-color: #ffffff;
    border-radius: 64px;
}

.content h2 {
    font-size: 36px;
}

@media screen and (max-width: 767px) {
    .content {
        padding: 16px;
        border-radius: 32px;
    }

    .content div {
        margin-top: 40px;
    }

    .content h2 {
        font-size: 24px;
    }
}

@media screen and (max-width: 767px) {
    .lower_layer {
        padding: 0 16px 120px;
    }

    .page_title {
        margin-bottom: 40px;
        padding-top: 80px;
        font-size: 32px;
    }

    .page_title::before {
        font-size: max(12vw, 54px);
        top: 80px;
    }
}

/*
 * トップページ
 */

/* MV */
.mv {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 60 / 43;
    margin-top: -85px;
}

.mv::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/mv.jpg");
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

.mv_fv {          
    width: 100%;
    position: absolute;
    top: 0;
}                 

.mv_catchphrase {
    position: relative;
    padding: 37vw 0 12vw 4.4vw;
    font-size: 3.56vw;
    font-weight: 500;
}

@media (max-width: 767px) {
    .mv {
        height: 630px;
    }

    .mv::before {
        content: "";
        background-image: url("../img/mv_sp.jpg");
        /* width: 170%;
        top: 80px; */
    }

    .mv_catchphrase {
        position: absolute;
        bottom: 0;
        font-size: 9.5vw;
    }
}


/* About us */
.about {
    background-image: url("../img/about_background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    justify-content: space-between;
    position: relative;
}

.about_text {
    max-width: 900px;
}

@media screen and (min-width: 768px) {
    .about_text {
        width: 75%;
        margin-left: auto;
        margin-right: 0;
    }
}

/* Service */
.service {
    position: relative;
}

.service_con {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    column-gap: 4rem;
}

.service_menu {
    width: 320px;
    min-width: 260px;
    margin: 0;
    padding: 0;
}

.service_menu_item {
    cursor: pointer;
}

.service_outline {
    max-width: 1000px;
    height: auto;
    margin-top: 24px;
    display: none;
}

.service_outline.is-tab-open {
    display: block;
}

.service_outline_img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media screen and (max-width: 767px) {
    .service_con {
        margin-top: 0;
        display: block;
    }

    .service_menu {
        width: 90%;
        margin: auto;
    }

    .service_menu_item {
        width: 100%;
    }

    ._corporate {
        border-top: #272727 1px solid;
    }

    .service_outline {
        width: 90%;
        margin: 40px auto;
    }
}

/* Flow */
.flow {
    position: relative;
    background-color: #ffffff;
    border-radius: 64px 64px 0 0;
}

.flow_step {
    width: 350px;
    position: absolute;
    top: 200px;
    right: 0;
    color: #00a888;
    /* font-family: 'EB Garamond', serif;
    font-weight: 600; */
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 72px;
    border-top: #00a888 1px solid;
}

.flow_list {
    width: calc(100% - 40px);
    margin: 120px auto 0;
    position: sticky;
}

.flow_list_item {
    height: 280px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-evenly;
}

.flow_item_number {
    width: 200px;
    margin: 0 0 0 40px;
    color: #9AD9CD;
    /* font-family: 'EB Garamond', serif; */
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 200px;
}

.flow_item_box {
    width: calc(100% - 200px);
    max-width: 900px;
}

.flow_item_box h3 {
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 24px;
}

@media screen and (min-width: 768px) {
    .flow_item_box p {
        width: 90%;
    }
}

@media screen and (max-width: 767px) {
    .flow {
        border-radius: 32px 32px 0 0;
    }

    .flow_step {
        width: 320px;
        margin-bottom: 0;
        font-size: 48px;
    }

    .flow_list {
        position: sticky;
        width: auto;
        margin: 160px 0 0;
    }

    .flow_list_item {
        height: auto;
        margin-bottom: 40px;
        flex-direction: column;
        align-items: self-start;
    }

    .flow_item_number {
        width: auto;
        margin: 0;
        /* position: absolute; */
    }

    .flow_item_box {
        width: 100%;
        display: block;
        align-items: baseline;
    }

    .flow_item_box h3 {
        /* width: calc(100% - 56px); */
        /* margin-top: 30px; */
        /* margin-left: auto; */
        font-size: 20px;
    }

    .flow_item_number {
        font-size: 48px;
    }
}

/* Photo */
.photo {
    padding: 120px 80px;
}

.photo_img {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .photo {
        padding: 80px 0;
    }
}

/*
 * お問い合わせフォーム
 */

/* フォーム */
._form {
    margin-top: 0;
}

.wpcf7-form {
    margin: auto;
    display: grid;
}

.form_con_data {
    margin-bottom: 40px;
}

.form_con_data_type {
    padding-left: 16px;
    color: #00a888;
    font-size: 20px;
    font-weight: 500;
}

.form_con_data_item {
    width: auto;
    margin-bottom: 40px;
}

.form_con_data_item a {
    color: #286ed3;
    text-decoration: underline;
    margin: 0 8px;
}

.form_con_box .wpcf7-form-control {
    position: relative;
    width: 100%;
    max-width: 900px;
    padding: 8px 16px;
    background-color: #F7FBFA;
    border: 2px solid #00a888;
    border-radius: 24px;
}

.btn03 input {
    width: 100%;
    padding: 8px 24px;
    background-color: #00a888;
    border: #00a888 1px solid;
    border-radius: 1000px;
    transition: .3s ease;
    position: relative;
    display: block;
    overflow: hidden;
}

.btn03 input::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    right: 100%;
    transition: .3s;
}

.btn03 input span {
    color: #ffffff;
    position: relative;
    display: block;
    z-index: 6;
    transition: .3s;
}

.btn03 input:hover::after {
    right: 0;
}

.btn03 input:hover span {
    color: #00a888;
}

.wpcf7_submit {
    margin: auto;
    width: 200px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

/*
 * 個人情報保護方針
 */

.policy_content div {
    margin-top: 60px;
}