@charset "UTF-8";
/*==================================================================================================
	TOP
==================================================================================================*/
#top .mv {
    position: relative;
}
#top .mv_inner {
    position: relative;
    height: 100svh;
}
#top .mv_img {
    height: 140svh;
    position: relative;
    z-index: 1;
}
#top .mv_img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
#top .mv_img::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2d2d2d;
    background: linear-gradient(0deg, #2d2d2d 0%, rgba(45, 45, 45, 0.1) 100%);
    z-index: 2;
}
#top .mv_img::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: #2d2d2d;
    background: linear-gradient(0deg, rgba(45, 45, 45, 0.5) 0%, rgba(45, 45, 45, 0) 100%);
    z-index: 2;
}
#top .mv_copy {
    position: absolute;
    z-index: 3;
    left: 1em;
    bottom: 1em;
    font-size: calc(clamp(3.6rem, 6vw, 6rem) * 1.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em 0;
    opacity: 0;
    translate: 0 0.35em;
    transition: opacity 1.5s, translate 1.5s, -webkit-filter 1.5s;
    transition: opacity 1.5s, translate 1.5s, filter 1.5s;
    transition: opacity 1.5s, translate 1.5s, filter 1.5s, -webkit-filter 1.5s;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}
#top .mv_copy.-active {
    opacity: 1;
    translate: 0 0;
    -webkit-filter: blur(0px);
    filter: blur(0px);
}
#top .mv_copy span {
    font-weight: 400;
    line-height: 1.2;
    position: relative;
}
#top .mv_copy span::before {
    content: "";
    position: absolute;
    bottom: -0.15em;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}
#top .concept {
    z-index: 10;
}
#top .concept_top {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 840px) {
    #top .concept_top {
        flex-direction: column-reverse;
    }
}
#top .concept_top .concept_img.-img01 {
    width: 25%;
}
@media (max-width: 840px) {
    #top .concept_top .concept_img.-img01 {
        width: 50%;
        margin-top: clamp(30px, 6vw, 80px);
        margin-left: -6.5%;
    }
}
#top .concept_top .concept_img.-img01 img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    aspect-ratio: 3/4;
}
#top .concept_top .concept_txt {
    margin-top: 5%;
    font-size: 1.25em;
    line-height: 2.25;
    padding: 0 5% clamp(30px, 6vw, 80px);
}
@media (max-width: 840px) {
    #top .concept_top .concept_txt {
        margin-top: 0;
        padding: 0 5%;
    }
}
#top .concept_top .concept_copy {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    font-size: calc(clamp(2rem, 3.2vw, 2.4rem) * 1.25);
    gap: 0 0.5em;
    margin-right: 15%;
    padding-bottom: clamp(30px, 6vw, 80px);
    opacity: 0;
    translate: 0 0.35em;
    transition: opacity 1.5s, translate 1.5s, -webkit-filter 1.5s;
    transition: opacity 1.5s, translate 1.5s, filter 1.5s;
    transition: opacity 1.5s, translate 1.5s, filter 1.5s, -webkit-filter 1.5s;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}
#top .concept_top .concept_copy.-active {
    opacity: 1;
    translate: 0 0;
    -webkit-filter: blur(0px);
    filter: blur(0px);
}
@media (max-width: 1280px) {
    #top .concept_top .concept_copy {
        margin-right: 3.5%;
    }
}
@media (max-width: 840px) {
    #top .concept_top .concept_copy {
        margin: 0 auto;
    }
}
#top .concept_top .concept_copy span {
    display: inline-block;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: relative;
}
#top .concept_top .concept_copy span::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #fff;
}
#top .concept_top .concept_copy span:nth-child(2) {
    margin-top: 2em;
}
#top .concept_bottom {
    display: flex;
    align-items: flex-start;
}
@media (max-width: 840px) {
    #top .concept_bottom {
        flex-direction: column;
    }
}
#top .concept_bottom .concept_img.-img02 {
    width: 35%;
    margin: 15% 10% 0;
}
@media (max-width: 840px) {
    #top .concept_bottom .concept_img.-img02 {
        width: 40%;
        margin: -30% 0 0 auto;
    }
}
#top .concept_bottom .concept_img.-img02 img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    aspect-ratio: 1/1;
}
#top .concept_bottom .concept_img.-img03 {
    width: 60%;
    position: absolute;
    top: 0;
    left: 0;
}
#top .concept_bottom .concept_img.-img03 img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    aspect-ratio: 4/3;
}
#top .concept_bottom .concept_img.-img04 {
    width: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
}
#top .concept_bottom .concept_img.-img04 img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    aspect-ratio: 1/1;
}
#top .concept_bottom .concept_content {
    width: 100%;
    aspect-ratio: 4/2.75;
    margin-right: calc(50% - 50vw);
    position: relative;
}
@media (max-width: 840px) {
    #top .concept_bottom .concept_content {
        margin-top: calc(clamp(30px, 6vw, 80px) * 1.5);
        width: 106.5%;
    }
}
#top .service_inner {
    display: flex;
}
@media (max-width: 1024px) {
    #top .service_inner {
        flex-direction: column;
    }
}
#top .service_secttl {
    white-space: nowrap;
}
#top .service_list {
    flex: 1;
    padding-left: 7.5%;
    margin-right: calc(50% - 50vw);
}
#top .service_item {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
#top .service_item:nth-child(1) {
    background-image: url(../img/top/service_01.jpg);
}
#top .service_item:nth-child(2) {
    background-image: url(../img/top/service_02.jpg);
}
#top .service_item:nth-child(3) {
    background-image: url(../img/top/service_03.jpg);
}
#top .service_link {
    position: relative;
    z-index: 5;
    padding: clamp(30px, 6vw, 80px) min(5%, 80px);
    pointer-events: none;
}
#top .service_link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(45, 45, 45, 0.8);
    transition: background-color 0.5s;
}
#top .service_link:hover::before {
    background-color: rgba(45, 45, 45, 0.6);
}
#top .service_link:hover .service_btn::after {
    right: 0;
}
#top .service_link:hover .service_btn .line::after {
    width: 100%;
}
#top .service_ttl {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 5;
}
#top .service_ttl .en {
    font-size: 1.25em;
    color: #82b4d7;
}
#top .service_ttl .ja {
    font-size: min(4.6vw, 6rem);
    line-height: 1.35;
    margin-left: -0.1em;
}
@media (max-width: 1024px) {
    #top .service_ttl .ja {
        font-size: clamp(2.8rem, 4vw, 4.2rem);
    }
}
#top .service_content {
    margin-top: clamp(30px, 6vw, 80px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 5;
}
@media (max-width: 1024px) {
    #top .service_content {
        flex-direction: column;
    }
}
#top .service_txt {
    padding-right: 5%;
}
#top .service_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 120px;
    max-width: 100%;
    position: relative;
    font-size: 1.25em;
    display: none;
}
@media (max-width: 1024px) {
    #top .service_btn {
        margin-top: 2em;
    }
}
#top .service_btn::after {
    font-family: "icomoon";
    content: "\f0142";
    position: absolute;
    transition: all 0.5s;
    top: 55%;
    right: 0.5em;
    font-size: 0.8em;
    translate: 0 -50%;
}
#top .service_btn .line {
    position: absolute;
    bottom: -0.15em;
    left: 0;
    width: 100%;
    height: 0.1em;
}
#top .service_btn .line::before, #top .service_btn .line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
#top .service_btn .line::before {
    width: 100%;
    background-color: #fff;
}
#top .service_btn .line::after {
    width: 1em;
    transition: width 0.5s;
    background-color: #82b4d7;
}
#top .works {
    display: none;
}
#top .works_list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(30px, 6vw, 80px) 2.5%;
}
#top .works_item {
    width: 48.75%;
    position: relative;
}
@media (max-width: 840px) {
    #top .works_item {
        width: 100%;
    }
}
#top .works_link {
    position: relative;
}
#top .works_link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #2d2d2d;
    background: linear-gradient(0deg, rgba(45, 45, 45, 0.9) 0%, rgba(45, 45, 45, 0) 100%);
    z-index: 2;
}
#top .works_link:hover .works_img img {
    scale: 1.05;
}
#top .works_img {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#top .works_img img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    aspect-ratio: 4/3;
}
#top .works_info {
    position: absolute;
    bottom: 1.5em;
    left: 1em;
    right: 1em;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.15em 0;
}
#top .works_tax::before {
    content: "[ ";
}
#top .works_tax::after {
    content: " ]";
}
#top .works_ttl {
    font-size: 1.25em;
    line-height: 1.45;
}
#top .works_morebtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 120px;
    max-width: 100%;
    position: relative;
    font-size: 1.25em;
    margin: 2em 0 0 auto;
}
@media (max-width: 1024px) {
    #top .works_morebtn {
        margin-top: 2em;
    }
}
#top .works_morebtn::after {
    font-family: "icomoon";
    content: "\f0142";
    position: absolute;
    transition: all 0.5s;
    top: 55%;
    right: 0.5em;
    font-size: 0.8em;
    translate: 0 -50%;
}
#top .works_morebtn .line {
    position: absolute;
    bottom: -0.15em;
    left: 0;
    width: 100%;
    height: 0.1em;
}
#top .works_morebtn .line::before, #top .works_morebtn .line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
#top .works_morebtn .line::before {
    width: 100%;
    background-color: #fff;
}
#top .works_morebtn .line::after {
    width: 1em;
    transition: width 0.5s;
    background-color: #82b4d7;
}
#top .works_morebtn:hover::after {
    right: 0;
}
#top .works_morebtn:hover .line::after {
    width: 100%;
}
#top .about_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(30px, 6vw, 80px) 5%;
}
#top .about_content {
    width: 60%;
}
@media (max-width: 840px) {
    #top .about_content {
        width: 100%;
    }
}
#top .about_txt {
    font-size: 1.25em;
    line-height: 2;
}
@media (max-width: 840px) {
    #top .about_txt {
        font-size: 1em;
        line-height: 1.75;
    }
}
#top .about_nav {
    width: 35%;
    margin-top: clamp(30px, 6vw, 80px);
    display: none;
}
@media (max-width: 840px) {
    #top .about_nav {
        width: 100%;
        margin-top: 0;
    }
}
#top .about_nav .nav_list {
    display: flex;
    flex-direction: column;
    gap: 0.75em 0;
}
#top .about_nav .nav_link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    border: 0.1em solid #fff;
    padding: 1.5em 7.5%;
}
@media (max-width: 840px) {
    #top .about_nav .nav_link {
        padding: 1.5em 5%;
    }
}
#top .about_nav .nav_link .en {
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    line-height: 1.45;
    font-weight: 600;
}
#top .about_nav .nav_link .ja {
    font-size: 1.25em;
    font-weight: 600;
    position: relative;
    padding-left: 1.5em;
}
#top .about_nav .nav_link .ja::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    width: 1em;
    height: 0.075em;
    background: #fff;
}
#top .about_nav .nav_link::after {
    font-family: "icomoon";
    content: "\f0142";
    position: absolute;
    transition: all 0.5s;
    top: 50%;
    font-size: clamp(2rem, 3.2vw, 2.4rem);
    right: 1.5em;
    translate: 0 -50%;
}
#top .partner_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #ccc;
    padding: calc(clamp(30px, 6vw, 80px) * 0.75) min(5%, 80px);
}
@media (max-width: 840px) {
    #top .partner_inner {
        flex-direction: column;
    }
}
#top .partner_secttl {
    white-space: nowrap;
    margin-bottom: 0;
    margin-bottom: calc(clamp(30px, 6vw, 80px) * 0.25);
}
@media (max-width: 840px) {
    #top .partner_secttl {
        margin-bottom: calc(clamp(30px, 6vw, 80px) * 0.75);
    }
}
#top .partner_secttl .en {
    color: #2d2d2d;
}
#top .partner_secttl .ja {
    color: #2d2d2d;
}
#top .partner_secttl .ja::before {
    background: #2d2d2d;
}
#top .partner_content {
    flex: 1;
    padding-left: 10%;
}
@media (max-width: 840px) {
    #top .partner_content {
        padding-left: 0;
        flex: 0 0 auto;
    }
}
#top .partner_txt {
    color: #2d2d2d;
}
#top .partner_tel {
    display: flex;
    align-items: baseline;
    justify-content: center;
    background-color: #2d2d2d;
    padding: 0.4em 1em 0.5em;
    gap: 0 0.25em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    font-size: clamp(2rem, 3.2vw, 2.4rem);
    transition: opacity 0.5s;
    margin-top: 1em;
}
#top .partner_tel span {
    display: inline-block;
    line-height: 1;
}
#top .partner_tel .txt {
    font-size: 0.65em;
}
#top .partner_tel .num {
    white-space: nowrap;
}
#top .blog {
    display: none;
}
#top .blog_list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(30px, 6vw, 80px) 2.5%;
}
#top .blog_item {
    width: 31.6666666667%;
    position: relative;
}
@media (max-width: 840px) {
    #top .blog_item {
        width: 100%;
    }
}
#top .blog_link {
    position: relative;
}
#top .blog_link:hover .blog_img img {
    scale: 1.05;
}
#top .blog_img {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#top .blog_img img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    aspect-ratio: 4/3;
}
#top .blog_info {
    margin-top: 0.5em;
}
#top .blog_ttl {
    font-size: 1.25em;
    line-height: 1.45;
}
#top .blog_morebtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 120px;
    max-width: 100%;
    position: relative;
    font-size: 1.25em;
    margin: 2em 0 0 auto;
}
@media (max-width: 1024px) {
    #top .blog_morebtn {
        margin-top: 2em;
    }
}
#top .blog_morebtn::after {
    font-family: "icomoon";
    content: "\f0142";
    position: absolute;
    transition: all 0.5s;
    top: 55%;
    right: 0.5em;
    font-size: 0.8em;
    translate: 0 -50%;
}
#top .blog_morebtn .line {
    position: absolute;
    bottom: -0.15em;
    left: 0;
    width: 100%;
    height: 0.1em;
}
#top .blog_morebtn .line::before, #top .blog_morebtn .line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
#top .blog_morebtn .line::before {
    width: 100%;
    background-color: #fff;
}
#top .blog_morebtn .line::after {
    width: 1em;
    transition: width 0.5s;
    background-color: #82b4d7;
}
#top .blog_morebtn:hover::after {
    right: 0;
}
#top .blog_morebtn:hover .line::after {
    width: 100%;
}

/*==================================================================================================
	お問い合わせ
==================================================================================================*/
.mailphp p {
    margin: 1em 0;
}
.mailphp .mailphp-header-inner,
.mailphp .mailphp-main-inner,
.mailphp .mailphp-footer-inner {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 1em;
}
.mailphp .mailphp-header {
    text-align: center;
}
.mailphp .mailphp-header-title {
    display: inline-block;
    margin: 1.5em 0 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid;
    font-size: 1.5em;
}
.mailphp .confirm-items,
.mailphp .error-items {
    margin: 1.5em 0;
}
.mailphp .confirm-item,
.mailphp .error-item {
    display: flex;
    margin-bottom: 1px;
}
.mailphp .confirm-item-label, .mailphp .confirm-item-body,
.mailphp .error-item-label,
.mailphp .error-item-body {
    padding: 1em;
}
.mailphp .confirm-item-label,
.mailphp .error-item-label {
    background-color: #eee;
    width: 8em;
}
.mailphp .confirm-item-body,
.mailphp .error-item-body {
    flex: 1;
}
.mailphp .error-item-label {
    background-color: #b12e2e;
    color: #fff;
}
.mailphp .error-item-body {
    color: #d00;
}
.mailphp .mailphp-main {
    flex-grow: 1;
    margin: 3em 0;
}
.mailphp .mailphp-footer {
    margin: 3em 0;
}
.mailphp .confirm-btns {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mailphp .confirm-btn {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    background-color: transparent;
    margin: 0 1em;
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 1.25em;
    text-decoration: none;
    cursor: pointer;
}
.mailphp .confirm-btn::-webkit-search-decoration {
    display: none;
}
.mailphp .confirm-btn:focus {
    outline-offset: -2px;
}
.mailphp .confirm-btn-submit {
    padding: 0.75em 3em;
    background-image: linear-gradient(#fff, #eee);
    border: 1px solid #eee;
    border-bottom: 1px solid #bbb;
    border-radius: 4px;
    color: #444;
}
.mailphp .confirm-btn-submit:hover {
    background-image: linear-gradient(#fff, #fafafa);
}

/*==================================================================================================
	プライバシーポリシー
==================================================================================================*/
/*==================================================================================================
	404,サンクスページ
==================================================================================================*/