/* ----------共通スタイル---------- */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Zen+Kaku+Gothic+New:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
    --title-fontsize: 25rem;
    --side-margin: 10vw;
    --top-maring: 10vh;
    font-family: 'BIZ UDPGothic', sans-serif;
}
a:hover {
    opacity: .5;
    transition: all .3s;
}
body {
    overflow-x: hidden;
}

/* ----------HEADER---------- */

header {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.header_imgBx {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -100;
    overflow: hidden;
}

.header_imgBx video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header_imgBx video.header_video_sp {
    display: none;
}

.header_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 12rem;
    z-index: 1000;
}

.header_top_imgBx {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25rem;
    height: 7rem;
    margin-left: 2rem;
}

.header_top_imgBx img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header_top ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-right: 2rem;
}

.header_top ul li {
    list-style: none;
}

.header_top ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 1.1rem;
}

.header_text {
    position: relative;
    top: 50%;
    left: var(--side-margin);
    transform: translateY(-50%);
    z-index: -1;
}

.header_text p {
    color: #fff;
    font-size: 2rem;
    line-height: 3rem;
}

.header_text p:nth-child(2) {
    margin-top: 3rem;
    color: #fff;
    font-size: 1.2rem;
    line-height: 2rem;
}

.header_contact {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33rem;
    height: 11rem;
    border-radius: 1.8rem;
    background: #304C97;
    z-index: 10000;
    opacity: 1;
    transition: all .5s;
}

.header_magazine {
    position: fixed;
    bottom: 14rem;
    right: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33rem;
    height: 11rem;
    border-radius: 1.8rem;
    background: #B13594;
    transition: all .5s;
    z-index: 10000;
}

.header_contact a,
.header_magazine a {
    text-decoration: none;
}

.header_contact_imgBx, .header_magazine_imgBx {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8rem;
    height: 8rem;
    background: #fff;
    border-radius: 50%;
}

.header_contact_imgBx img, .header_magazine_imgBx img {
    width: 4rem;
}

.header_magazine_text {
    display: flex;
    flex-direction: column;
}

.header_contact_text p, .header_magazine_text p {
    width: 20rem;
    margin-left: 2rem;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.7;
}

.header_magazine_text a {
    margin-left: 2rem;

    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
}

.header_contact.stricky3 {
    opacity: 0;

    z-index: -100;
    pointer-events: none;
}

.header_magazine_text p {
    font-size: 1.6rem;
}

.header_magazine.stricky {
    opacity: 0;

    z-index: -100;
    pointer-events: none;
}

.header_contact_text p:nth-child(2) {
    font-size: 1.2rem;
}

header.headerBg .header_imgBx {
    display: none;
}

header.headerBg {
    background: #000;
}

/* ----------MAIN---------- */

main {
    width: 100vw;
    overflow: hidden;
}

/* ----------IMPRESSION---------- */

.impression {
    position: relative;
    width: 100%;
    height: 1200px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    overflow: hidden;
    transition: 1s;
    white-space: nowrap;
}

.impression h2 {
    position: absolute;
    top: 0;
    right: -50%;
    color: #2188E470;
    font-size: var(--title-fontsize);
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    transition: 1s;
}

.impression h2.appear01 {
    right: -2rem;
}

.impression_text_left {
    position: absolute;
    top: 30rem;
    left: var(--side-margin);
}

.impression_text_left h3 {
    margin-bottom: 3rem;
    color: #fff;
    font-size: 3rem;
}

.impression_text_left p {
    color: #fff;
    font-size: 1.8rem;
    line-height: 5rem;
}

.impression_text_right {
    position: absolute;
    bottom: 5rem;
    right: var(--side-margin);
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

.impression_text_right p {
    color: #fff;
    font-size: 1.2rem;
    line-height: 2.5rem;
}

.impression_text_right p:first-child {
    position: relative;
}

.impression_text_right p:first-child::before {
    content: '';
    position: absolute;
    bottom: -8rem;
    right: -8rem;
    width: 8rem;
    height: 8rem;
    background: #304C97;
    border-radius: 50%;
}

.impression_text_right p:first-child::after {
    content: '';
    position: absolute;
    width: 260%;
    height: 1px;
    background-color: rgb(48, 76, 151);
    bottom: -4rem;
    right: -15rem;
}

.impressionBg {
    background: #000;
    backdrop-filter: none;
    transition: 1s;
}

/* ----------SERVICE OVERVIEW---------- */

.serviceOverview {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #C5C5C5;
    overflow: hidden;
    position: relative;
}

.serviceOverview_circle {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 0;
}

.serviceOverview_circle_circle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 20vw;
    height: 20vw;
    background: #808080;
    border-radius: 50%;
}

.serviceOverview_circle_circle h3 {
    color: #fff;
    font-size: 2rem;
    text-align: center;
}

#serviceOverview_title {
    font-size: 3.0rem;
    color: #fff;
}

.serviceOverview_circle_circle p {
    width: 70%;
    margin-top: 1.6rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.7;
}

.serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child::before {
    content: '';
    width: 4vw;
    height: 4vw;
    border: 2px solid #304C97;
    border-radius: 50%;
    transform: translateX(-40vw);
}

.serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child::after {
    content: '';
    width: 28vw;
    height: 2px;
    background: #304C97;
    transform: translateX(calc(-1 * (50% + 10vw))) translateY(calc(-1 * (2vw + 1px)));
}

.slideIn {
    animation-name: slideInAnime;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes slideInAnime {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.rotateIn {
    animation-name: rotateInAnime;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    transform: rotateY(90deg);
}

@keyframes rotateInAnime {
    from {
        transform: rotateY(90deg);
    }
    to {
        transform: rotateY(0deg);
    }
}

/* ----------Concept---------- */

.concept {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000000;
    overflow: hidden;
}

.concept_left {
    position: absolute;
    bottom: 0;
    left: var(--side-margin);
    width: 25vw;
    height: 90vh;
    border-right: 2px solid #304C97;
    color: #fff;
}

.concept_left h2 {
    position: relative;
    width: 30vw;
    height: 12rem;
    color: #2188E4;
    font-size: 3.5rem;
    border-bottom: 2px solid #304C97;
    line-height: 12rem;
}

.concept_left h2::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 5vw;
    height: 5vw;
    background: #B13594;
    border-radius: 50%;
    transform: translate(-50%, 50%);
}

.concept_left h2 span {
    margin-left: 2rem;
    color: #fff;
    font-size: 2rem;
}

.concept_left h3 {
    margin: 2.5rem;
    font-size: 2rem;
    line-height: 1.7;
}

.concept_left p {
    font-size: 1.5rem;
    margin: 0 2.5rem 0 5rem;
    line-height: 1.7;
}

.concept_right {
    color: #fff;
}

.concept_right_ball {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 20rem;
    height: 20rem;
    border: solid 1px #304C97;
    border-radius: 50%;
}

.concept_right_ball h4 {
    width: 70%;
    color: #2188E4;
    font-size: 2.5rem;
    line-height: 3rem;
}

.concept_right_ball p {
    width: 70%;
    margin-top: 1rem;
    font-size: 1rem;
}

.concept_right_ball:first-child {
    position: absolute;
    top: 10%;
    left: calc(50% - 5vw);
}

.concept_right_ball:nth-child(2) {
    position: absolute;
    top: calc(10% + 13rem);
    left: calc(50% - 5vw + 13rem);
    width: 25rem;
    height: 25rem;
}

.concept_right_ball:nth-child(3) {
    position: absolute;
    top: calc(10% + 19.5rem);
    left: calc(50% - 5vw + 19.5rem + 17rem);
    width: 12rem;
    height: 12rem;
}

.concept_right_ball:nth-child(4) {
    position: absolute;
    top: calc(10% + 19.5rem + 7.5rem);
    left: calc(50% - 5vw + 19.5rem + 14rem);
    width: 12rem;
    height: 12rem;
}

.concept_right_ball:nth-child(5) {
    position: absolute;
    top: calc(10% + 19.5rem + 14.5rem);
    left: calc(50% - 5vw + 19.5rem + 8.5rem);
    width: 12rem;
    height: 12rem;
}

.concept_right_ball:nth-child(6) {
    position: absolute;
    top: calc(10% + 15.5rem + 15rem);
    left: calc(50% - 5vw + 15.5rem + 26rem);
}

.concept_right_ball:nth-child(7) {
    position: absolute;
    bottom: 10%;
    left: calc(50% - 10vw);
}

.concept_right_ball:nth-child(3) h4,
.concept_right_ball:nth-child(4) h4,
.concept_right_ball:nth-child(5) h4,
.concept_right_ball:nth-child(7) h4 {
    font-size: 1.5rem;
    text-align: center;
}

.concept_right_yajirushi {
    position: absolute;
    bottom: calc(10% + 10rem);
    left: calc(50% - 10vw + 20rem - 1px);
    width: 1px;
    height: 25rem;
    background: #304C97;
    opacity: 0;
}

.concept_right_yajirushi::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(-45deg);
    transform-origin: right;
    width: 5rem;
    height: 1px;
    background: #304C97;
}

.concept_right_ball:last-child {
    position: absolute;
    bottom: 14%;
    right: var(--side-margin);
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    background: #304C97;
}

.zoomIn {
    animation-name: zoomInAnime;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.zoomIn:nth-child(2) {
    animation-delay: .2s;
}

.zoomIn:nth-child(3) {
    animation-delay: .4s;
}

.zoomIn:nth-child(4) {
    animation-delay: .6s;
}

.zoomIn:nth-child(5) {
    animation-delay: .8s;
}

.zoomIn:nth-child(6) {
    animation-delay: 1s;
}

.zoomIn:nth-child(7) {
    animation-delay: 1.2s;
}

@keyframes zoomInAnime {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.slideUp {
    animation-name: slideUpAnime;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
    opacity: 0;
}

@keyframes slideUpAnime {
    from {
        transform: translateY(25rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ----------visualSolution---------- */

.visualSolution {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
    overflow: hidden;
}

.visualSolution_bg_bar {
    width: 18%;
    height: 100%;
    background-color: #11447270;
    margin-left: var(--side-margin);
    position: absolute;
}

.visualSolution_title {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    border-top: solid var(--top-maring) #114472;
    border-bottom: solid calc(var(--top-maring) / 2) #114472;
}

.visualSolution_title div {
    margin-left: var(--side-margin);
    width: var(--top-maring);
    height: var(--top-maring);
    background: #304C97;
    border-radius: 50%;
}

.visualSolution_title h2 {
    margin-left: 3rem;
    color: #2188E4;
    font-size: 3rem;
}

.visualSolution_title h2 span {
    margin-left: 2rem;
    color: #fff;
    font-size: 1.8rem;
}

.visualSolution_content {
    display: flex;
    justify-content: center;
    gap: 5vw;
    margin-top: var(--top-maring);
    margin-bottom: 30rem;
}

.visualSolution_content_container {
    width: 20vw;
    z-index: 1;
}

.visualSolution_content_container:nth-child(1) {
    transform: translateY(10vh);
    transition: 1s ease-in-out;
}

.visualSolution_content_container:nth-child(2) {
    transform: translateY(20vh);
    transition: 1s ease-in-out;
}

.visualSolution_content_container:nth-child(3) {
    transform: translateY(30vh);
    transition: 1s ease-in-out;
}

.visualSolution_content_container__imgBx {
    width: 100%;
}

.visualSolution_content_container__imgBx img {
    width: 100%;
}

.visualSolution_content_container h3 {
    color: #2188E4;
    font-size: 2rem;
    line-height: 1.2;
    padding: 1.6rem 0 1.6rem 0;
}

.visualSolution_content_container p {
    margin-bottom: 3rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.7;
}

.visualSolution_content_container a {
    padding: 1rem 1rem 1rem 2rem;
    margin-right: 1rem;
    background: #B13594;
    border-radius: .5rem;
    color: #fff;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: .5s;
}

.visualSolution_content_container p:nth-of-type(2) {
    margin-top: 2rem;
}

.visualSolution_content_container a span {
    box-sizing: border-box;
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: rotate(45deg);
    transition: .5s;
    opacity: 0;
}

.visualSolution_content_container a:hover span {
    margin-left: 1rem;
    font-size: 1.5rem;
    opacity: 1;
}

.visualSolution > div:last-of-type {
    position: absolute;
    bottom: 0;
    right: -2rem;
    color: #2a567c;
    font-size: var(--title-fontsize);
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    transition: transform 1s ease-in-out;
    transform: translateX(80%);
}



/* -----visualSolution_animation----- */

.visualSolution > div:last-of-type.appear01 {
    transform: none;
}

.visualSolution_content.appear01 .visualSolution_content_container:nth-child(1) {
    transform: translateY(0vh);
}

.visualSolution_content.appear01 .visualSolution_content_container:nth-child(2) {
    transform: translateY(0vh);
}

.visualSolution_content.appear01 .visualSolution_content_container:nth-child(3) {
    transform: translateY(0vh);
}

/* ----------promotion---------- */

.promotion {
    position: relative;
    width: 100%;
    height: 100%;
    background: #304C97;
    overflow: hidden;
}

.promotion_bg_bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    margin-right: calc(var(--side-margin) + var(--top-maring));
}

.promotion_title {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    width: 100%;
    margin-top: calc(var(--top-maring) / 2);
    border-top: solid calc(var(--top-maring) / 2) rgba(0, 0, 0, 0.1);
}

.promotion_title div {
    margin-right: var(--side-margin);
    width: var(--top-maring);
    height: var(--top-maring);
    background: rgba(197, 197, 197, 0.4);
    border-radius: 50%;
}

.promotion_title h2 {
    margin-right: 3rem;
    color: #2188E4;
    font-size: 3rem;
}

.promotion_title h2 span {
    margin-left: 2rem;
    color: #fff;
    font-size: 1.8rem;
}

.promotion_content {
    display: flex;
    justify-content: center;
    gap: 5vw;
    margin-top: var(--top-maring);
    margin-bottom: 30rem;
}

.promotion_content_container {
    width: 20vw;
    z-index: 1;
}

.promotion_content_container:nth-child(1) {
    transform: translateY(30vh);
    transition: 1s ease-in-out;
}

.promotion_content_container:nth-child(2) {
    transform: translateY(20vh);
    transition: 1s ease-in-out;
}

.promotion_content_container:nth-child(3) {
    transform: translateY(10vh);
    transition: 1s ease-in-out;
}

.promotion_content_container__imgBx {
    width: 100%;
}

.promotion_content_container__imgBx img {
    width: 100%;
}

.promotion_content_container h3 {
    color: #2188E4;
    font-size: 2rem;
    line-height: 1.2;
    padding: 1.6rem 0 1.6rem 0;
}

.promotion_content_container p {
    margin-bottom: 3rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 2.4rem;
}

.promotion > div:last-of-type {
    position: absolute;
    bottom: 0;
    left: -2rem;
    color: #4174a0;
    font-size: var(--title-fontsize);
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    transition: 1s;
    transform: translateX(-80%);
}



/* -----promotion_animation----- */

.promotion > div:last-of-type.appear01 {
    transform: none;
}

.promotion_content.appear01 .promotion_content_container:nth-child(1) {
    transform: translateY(0vh);
}

.promotion_content.appear01 .promotion_content_container:nth-child(2) {
    transform: translateY(0vh);
}

.promotion_content.appear01 .promotion_content_container:nth-child(3) {
    transform: translateY(0vh);
}

/* ----------creativeProduct---------- */

.creativeProduct {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
    overflow: hidden;
}

.creativeProduct_bg_bar {
    position: absolute;
    width: var(--top-maring);
    height: 100%;
    background-color: #11447270;
    margin-left: var(--side-margin);
}

.creativeProduct_title {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    border-top: solid var(--top-maring) #114472;
    border-bottom: solid calc(var(--top-maring) / 2) #114472;
}

.creativeProduct_title div {
    margin-left: var(--side-margin);
    width: var(--top-maring);
    height: var(--top-maring);
    background: #304C97;
    border-radius: 50%;
}

.creativeProduct_title h2 {
    margin-left: 3rem;
    color: #2188E4;
    font-size: 3rem;
}

.creativeProduct_title h2 span {
    margin-left: 2rem;
    color: #fff;
    font-size: 1.8rem;
}

.creativeProduct_content {
    display: flex;
    justify-content: center;
    gap: 5vw;
    margin-top: var(--top-maring);
    margin-bottom: 30rem;
}

.creativeProduct_content_container {
    width: 20vw;
    z-index: 1;
}

.creativeProduct_content_container:nth-child(1) {
    transform: translateY(10vh);
    transition: 1s ease-in-out;
}

.creativeProduct_content_container:nth-child(2) {
    transform: translateY(20vh);
    transition: 1s ease-in-out;
}

.creativeProduct_content_container:nth-child(3) {
    transform: translateY(30vh);
    transition: 1s ease-in-out;
}

.creativeProduct_content_container__imgBx {
    width: 100%;
}

.creativeProduct_content_container__imgBx img {
    width: 100%;
}

.creativeProduct_content_container h3 {
    color: #2188E4;
    font-size: 2rem;
    line-height: 1.2;
    padding: 1.6rem 0 1.6rem 0;
}

.creativeProduct_content_container p {
    margin-bottom: 3rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 2.4rem;
}

.creativeProduct > div:last-of-type {
    position: absolute;
    bottom: 0;
    right: -2rem;
    color: #2a567c;
    font-size: var(--title-fontsize);
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    transition: 1s;
    transform: translateX(80%);
}



/* -----creativeProduct_animation----- */

.creativeProduct > div:last-of-type.appear01 {
    transform: none;
}

.creativeProduct_content.appear01 .creativeProduct_content_container:nth-child(1) {
    transform: translateY(0vh);
}

.creativeProduct_content.appear01 .creativeProduct_content_container:nth-child(2) {
    transform: translateY(0vh);
}

.creativeProduct_content.appear01 .creativeProduct_content_container:nth-child(3) {
    transform: translateY(0vh);
}

/* ----------designMaintenance---------- */

.designMaintenance {
    position: relative;
    width: 100%;
    height: 100%;
    background: #304C97;
    overflow: hidden;
}

.designMaintenance_bg_bar {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--top-maring);
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    margin-right: var(--side-margin);
}

.designMaintenance_title {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    width: 100%;
    margin-top: var(--top-maring);
    border-bottom: solid calc(var(--top-maring) / 2) rgba(0, 0, 0, 0.1);
}

.designMaintenance_title div {
    margin-right: var(--side-margin);
    width: var(--top-maring);
    height: var(--top-maring);
    background: rgba(197, 197, 197, 0.4);
    border-radius: 50%;
}

.designMaintenance_title div::before {
    content: '';
    width: 50rem;
    height: 50rem;
    background: #707070;
    transform: translateY(-10rem);
}

.designMaintenance_title h2 {
    margin-right: 3rem;
    color: #2188E4;
    font-size: 3rem;
}

.designMaintenance_title h2 br {
    display: none;
}

.designMaintenance_title h2 span {
    margin-left: 2rem;
    color: #fff;
    font-size: 1.8rem;
}

.designMaintenance_content {
    display: flex;
    justify-content: center;
    gap: 5vw;
    margin-top: var(--top-maring);
    margin-bottom: 30rem;
}

.designMaintenance_content_container {
    width: 20vw;
    z-index: 1;
}

.designMaintenance_content_container:nth-child(1) {
    transform: translateY(30vh);
    transition: 1s ease-in-out;
}

.designMaintenance_content_container:nth-child(2) {
    transform: translateY(20vh);
    transition: 1s ease-in-out;
}

.designMaintenance_content_container:nth-child(3) {
    transform: translateY(10vh);
    transition: 1s ease-in-out;
}

.designMaintenance_content_container__imgBx {
    width: 100%;
}

.designMaintenance_content_container__imgBx img {
    width: 100%;
}

.designMaintenance_content_container h3 {
    color: #2188E4;
    font-size: 2rem;
    line-height: 1.2;
    padding: 1.6rem 0 1.6rem 0;
}

.designMaintenance_content_container p {
    margin-bottom: 3rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 2.4rem;
}

.designMaintenance > div:last-of-type {
    position: absolute;
    bottom: 0;
    left: -2rem;
    color: #4174a0;
    font-size: var(--title-fontsize);
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    transition: 1s;
    transform: translateX(-80%);
}



/* -----designMaintenance_animation----- */

.designMaintenance > div:last-of-type.appear01 {
    transform: none;
}

.designMaintenance_content.appear01 .designMaintenance_content_container:nth-child(1) {
    transform: translateY(0vh);
}

.designMaintenance_content.appear01 .designMaintenance_content_container:nth-child(2) {
    transform: translateY(0vh);
}

.designMaintenance_content.appear01 .designMaintenance_content_container:nth-child(3) {
    transform: translateY(0vh);
}

/* ----------photographer---------- */

.photographer {
    position: relative;
    width: 100%;
    background: #000000;
    overflow: hidden;
}

.photographer_topright {
    position: absolute;
    top: 5rem;
    right: var(--side-margin);
    color: #fff;
    z-index: 1;
    transition: .5s ease-in-out;
    transition-delay: .5s;

    transform: translateY(20rem);
    opacity: 0;
}

.photographer_circle_ball1 {
    position: absolute;
    top: calc(-1 * (5rem - 2.5vw));
    right: -6rem;
    width: 30rem;
    height: 30rem;
    background: #304C9755;
    outline: solid 4rem #304C97;
    border-radius: 50%;
    transition: .5s ease-in-out;

    transform: translateX(20rem);
    opacity: 0;
}

.photographer_circle_ball1::before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    width: 0%;
    height: 4px;
    background: #304C97;
    transition: .5s ease-in-out;
    transition-delay: .5s;
}

.photographer_circle_ball2 {
    position: absolute;
    bottom: calc(-5rem);
    left: -6rem;
    width: 30rem;
    height: 30rem;
    background: #304C9755;
    border: solid 4rem #304C97;
    border-radius: 50%;
    transition: .5s ease-in-out;

    transform: translateX(-20rem);
    opacity: 0;
}

.photographer_circle_ball2::before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: calc(-50% - 19rem);
    width: 30rem;
    height: 4px;
    background: #304C97;
}

.photographer_circle_ball3 {
    position: absolute;
    bottom: var(--top-maring);
    right: var(--side-margin);
    width: var(--top-maring);
    height: var(--top-maring);
    background: #B13594;
    border-radius: 50%;
}

.photographer_title {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    margin-top: var(--top-maring);
    margin-bottom: calc(var(--top-maring) / 2);
}

.photographer_title div {
    margin-left: var(--side-margin);
    width: var(--top-maring);
    height: var(--top-maring);
    background: #304C97;
    border-radius: 50%;
}

.photographer_title h2 {
    margin-left: 3rem;
    color: #2188E4;
    font-size: 3rem;
}

.photographer_title h2 span {
    margin-left: 2rem;
    color: #fff;
    font-size: 1.8rem;
}

.photographer_contents {
    width: 100%;
    margin-bottom: calc(var(--top-maring) * 4);
}

.photographer_container {
    width: 60vw;
    margin-left: calc(var(--side-margin) + ((((40vw - (var(--side-margin) * 2)) / 2) * var(--photographer_container))));
    margin-bottom: 5rem;
    transition: .8s ease-in-out;

    transform: translateX(-20rem);
    opacity: 0;
}

.photographer_container_imgBx {
    position: relative;
    width: 100%;
}

.photographer_container_imgBx:before {
    content: '';
    position: absolute;
    top: 0;
    width: 8%;
    height: 200%;
    background: #000000;
    border-right: solid 1px #304C97;
    transform-origin: top right;
    transform: rotate(15deg);
}

.photographer_container_imgBx img {
    width: 100%;
}

.photographer_container_textBx {
    width: 100%;
    display: flex;
    padding-top: 1rem;
}

.photographer_container_textBx h3 {
    width: 25%;
    color: #2188E4;
    font-size: 2rem;
}

.photographer_container_textBx p {
    width: 75%;
    padding-top: 0.5rem;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.5;
}

.photographer_bottomleft {
    position: absolute;
    bottom: 3rem;
    left: 30rem;
    color: #fff;
    font-size: 1.2rem;
    transition: .5s;

    transform: translateX(20rem);
    opacity: 0;
}



/* -----photographer_animation----- */

.photographer.appear01 .photographer_topright {
    transform: translateY(0);
    opacity: 1;
}

.photographer.appear01 .photographer_circle_ball1 {
    transform: translateX(0);
    opacity: 1;
}

.photographer.appear01 .photographer_circle_ball1::before {
    left: calc(-50% - 19rem);
    width: 30rem;
}

.photographer_circle_ball2.appear01 {
    transform: translateX(0);
    opacity: 1;
}

.photographer_container.appear01 {
    transform: translateX(0);
    opacity: 1;
}

.photographer_bottomleft.appear01 {
    transform: translateY(0);
    opacity: 1;
}

/* ----------corporateActivities---------- */

.corporateActivities {
    position: relative;
    width: 100%;
    background: #C5C5C5;
    padding-bottom: 10rem;
    overflow: hidden;
}

.corporateActivities_title {
    width: 100%;
    border-top: solid var(--top-maring) #707070;
}

.corporateActivities_title h2 {
    margin-left: calc(var(--side-margin) * 1);
    color: #2188E4;
    font-size: 3rem;
    padding: 3rem 0;
}

.corporateActivities_title h2 span {
    margin-left: 2rem;
    color: #fff;
    font-size: 1.8rem;
}

.corporateActivities_sheet {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(100% - (var(--side-margin) * 2));
    max-width: 1150px;
    margin: 0 calc(var(--side-margin) * 1);
    background: #eeeeee;
    border-radius: 3rem;
    margin: 0 auto;
}

.corporateActivities_sheet > p {
    width: 90%;
    padding: 3rem 0 2rem;
    border-bottom: solid 2px #2188E4;
    font-size: 1.6rem;
    line-height: 1.7;
}

.corporateActivities_sheet_toptext {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 90%;
    padding: 3rem 0;
    border-bottom: solid 2px #2188E4;
}

.corporateActivities_sheet_toptext_textBx {
    width: 35%;
}

.corporateActivities_sheet_toptext_textBx p {
    font-size: 1.5rem;
    line-height: 1.7;
}

.corporateActivities_sheet_toptext_imgBx {
    width: 65%;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.corporateActivities_sheet_toptext_imgBx img {
    width: calc(50% - 1.5rem);
}

.corporateActivities_sheet_centertext {
    width: 90%;
    margin-top: 3rem;
}

.corporateActivities_sheet_centertext > p {
    font-size: 1.6rem;
    line-height: 1.7;
    margin-bottom: 3rem;
}

.corporateActivities_sheet_centertext_SDGs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.corporateActivities_sheet_centertext_SDGs_imgBx {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    width: 40%;
}

.corporateActivities_sheet_centertext_SDGs_imgBx img {
    width: calc(33% - 1.5rem);
}

.corporateActivities_sheet_centertext_SDGs_imgBx img:first-child {
    width: 95%;
}

.corporateActivities_sheet_centertext_SDGs p {
    width: 60%;
    font-size: 1.5rem;
    line-height: 2rem;
}

.corporateActivities_sheet_centertext_imgBx {
    display: flex;
    gap: 2rem;
    padding-bottom: 2rem;
}

.corporateActivities_sheet_centertext_imgBx img {
    height: 10rem;
}

.corporateActivities_company {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(100% - (var(--side-margin) * 2));
    max-width: 1150px;
    margin: 0 auto;
    margin-top: 10rem;
    background: #eeeeee;
    border-radius: 3rem;
    z-index: 10;
}

/* .corporateActivities_company::before {
    content: '';
    position: absolute;
    top: -5rem;
    left: calc(-1 * (var(--side-margin) * 2));
    width: 100vw;
    height: 10rem;
    background: #707070;
} */

.corporateActivities_company h2 {
    width: 90%;
    padding: 2rem 0 1rem;
    border-bottom: solid 2px #2188E4;
    font-size: 2rem;
    line-height: 2.5rem;
}

.corporateActivities_company_text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    width: 90%;
    padding: 2rem 0;
}

.corporateActivities_company_text > p {
    font-size: 1.5rem;
    line-height: 1.7;
}

.corporateActivities_company_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #fff;
    border-radius: 2rem;
}

.corporateActivities_company_logo p {
    width: 22%;
    font-size: 4.8rem;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
}

@media screen and (max-width: 1300px) {
    .corporateActivities_company_logo p {
        font-size: 4.2rem;
    }
}

@media screen and (max-width: 1150px) {
    .corporateActivities_company_logo p {
        font-size: 3.8rem;
    }
}

@media screen and (max-width: 960px) {
    .corporateActivities_company_logo p {
        font-size: 3rem;
    }
}

.corporateActivities_company_logo img {
    width: 25%;
    padding: 2rem;
}

.corporateActivities_company_text p:last-child {
    width: 100%;
    text-align: end;
}

.corporateActivities_circle_ball1 {
    position: absolute;
    top: 40rem;
    right: calc(-2 * var(--side-margin));
    width: calc(var(--side-margin) * 3);
    height: calc(var(--side-margin) * 3);
    background: #7E8BAF;
    border-radius: 50%;
}

.corporateActivities_circle_ball1::before {
    content: '';
    position: absolute;
    bottom: -10rem;
    left: 0;
    width: 100%;
    height: 10rem;
    background: #70707070;
}

.corporateActivities_circle_ball1::after {
    content: '';
    position: absolute;
    bottom: -15rem;
    left: 0;
    width: 100%;
    height: 5rem;
    background: #fff;
}

.corporateActivities_circle_ball2 {
    position: absolute;
    top: calc((var(--side-margin) * 3) + 40rem);
    left: 0;
    width: calc(var(--side-margin) * 1);
    height: 10rem;
    background: #70707070;
}

.corporateActivities_circle_ball2::before {
    content: '';
    position: absolute;
    bottom: -5rem;
    right: 0;
    width: 200%;
    height: 5rem;
    background: #fff
}

.corporateActivities_circle_ball2::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--side-margin));
    right: 0;
    width: var(--side-margin);
    height: var(--side-margin);
    background: #2188E4;
    border-radius: 50%;
}

.corporateActivities_circle_ball3 {
    position: absolute;
    top: calc(var(--side-margin) * 3 + 55rem);
    left: calc(var(--side-margin) * -2);
    width: calc(var(--side-margin) * 3);
    height: calc(var(--side-margin) * 3);
    background: #70707070;
    border-radius: 50%;
}

@media screen and (min-width: 1441px) {
    .corporateActivities_circle_ball1::before {
        display: none;
    }
    
    .corporateActivities_circle_ball1::after {
        display: none;
    }
    
    .corporateActivities_circle_ball2 {
        background: transparent;
    }
    
    .corporateActivities_circle_ball2::before {
        display: none;
    }
}

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

.about {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    overflow: hidden;
}

.about_title {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: var(--top-maring);
    border-bottom: solid calc(var(--top-maring) / 2) #114472;
}

.about_title div {
    width: var(--top-maring);
    height: var(--top-maring);
    margin-left: var(--side-margin);
    background: #114472;
    border-radius: 50%;
}

.about_title h2 {
    margin-left: 3rem;
    color: #2188E4;
    font-size: 3rem;
    text-transform: uppercase;
}

.about_bg {
    position: absolute;
    top: 0;
    left: var(--side-margin);
    width: var(--top-maring);
    height: 100%;
    background: #2188E450;
}

.about_container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 5rem;
    width: 100%;
    margin: var(--top-maring) 0 30rem;
}

.about_container div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30%;
}

.about_container .cross {
    width: 20rem;
    height: 20rem;
    margin: auto 0;
}
.about_container .cross::before {
    content: '';
    position: absolute;
    width: 100%;
    height: .3rem;
    background: #fff;
    border-radius: .3rem;
    transform: rotate(45deg);
}
.about_container .cross::after {
    content: '';
    position: absolute;
    width: 100%;
    height: .3rem;
    background: #fff;
    border-radius: .3rem;
    transform: rotate(-45deg);
}

.about_container div div {
    width: 30rem;
    height: 30rem;
    background: #114472;
    border-radius: 50%;
}

.about_container div div img {
    height: 12rem;
}
.about_container div div img:first-child {
    width: 12rem;
    height: auto;
    padding-bottom: 2rem;
}

.about_container div div p {
    font-size: 5rem;
    font-weight: 1000;
    text-transform: uppercase;
}

.about_container-text {
    width: 30rem;
    margin-top: 5rem;
    font-size: 1.6rem;
    line-height: 1.7;
}

.about > div:last-of-type {
    position: absolute;
    bottom: 0rem;
    left: -2rem;
    color: #2a567c;
    font-size: var(--title-fontsize);
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    transition: 1s;
    transform: translateX(-80%);
}

/* -----about_animation----- */

.about > div:last-of-type.appear01 {
    transform: none;
}

@media screen and (max-width: 880px)  {    
    .about_container {
        gap: 3rem;
        width: 100%;
        margin: var(--top-maring) 0 15rem;
    }
    
    .about_container div {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 30%;
    }
    
    .about_container .cross {
        width: 8rem;
        height: 15rem;
    }
    
    .about_container div div {
        width: 23rem;
        height: 23rem;
        background: #114472;
        border-radius: 50%;
    }
    
    .about_container div div img {
        height: 10rem;
    }
    .about_container div div img:first-child {
        width: 10rem;
        height: auto;
        padding-bottom: 2rem;
    }
    
    .about_container div div p {
        font-size: 4rem;
        font-weight: 1000;
        text-transform: uppercase;
    }
    
    .about_container-text {
        width: 23rem;
        margin-top: 5rem;
        font-size: 1.4rem;
        line-height: 1.7;
    }

    .about > div:last-of-type {
        bottom: -5rem;
        font-size: 14rem;
    }
}


@media screen and (max-width: 650px)  {
    .about_title h2 {
        margin-left: 3rem;
        color: #2188E4;
        font-size: 2.5rem;
        text-transform: uppercase;
    }

    .about_container {
        position: relative;
        display: block;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        width: 100%;
        margin: calc(var(--top-maring) / 2) 0 15rem;
    }
    
    .about_container div {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }
    
    .about_container div div p {
        font-size: 4rem;
        font-weight: 1000;
        text-transform: uppercase;
    }
    
    .about_container-text {
        width: 30rem;
        margin-top: 5rem;
        font-size: 1.2rem;
        line-height: 1.7;
    }

    .about_container .cross {
        margin: 0 auto;
    }
    
    /* -----about_animation----- */
    
    .about > h1.appear01 {
        transform: none;
    }
}

@media screen and (max-width: 520px)  {
    .about_title {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: calc(var(--top-maring) / 2);
        border-bottom: solid calc(var(--top-maring) / 4) #114472;
    }
    
    .about_title div {
        width: calc(var(--top-maring) / 2);
        height: calc(var(--top-maring) / 2);
        margin-left: calc(var(--side-margin) / 2);
        background: #114472;
        border-radius: 50%;
    }
    
    .about_title h2 {
        margin-left: 1rem;
        color: #2188E4;
        font-size: 1.8rem;
        text-transform: uppercase;
    }

    .about_bg {
        position: absolute;
        top: 0;
        left: calc(var(--side-margin) / 2);
        width: calc(var(--top-maring) / 2);
        height: 100%;
        background: #2188E450;
    }
    
    .about_container {
        position: relative;
        display: block;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        width: 100%;
        margin: calc(var(--top-maring) / 2) 0 15rem;
    }
    
    .about_container div {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }
    
    .about_container div div p {
        font-size: 4rem;
        font-weight: 1000;
        text-transform: uppercase;
    }
    
    .about_container-text {
        width: 24rem;
        margin-top: 2.4rem;
        font-size: 1.2rem;
        line-height: 1.7;
    }
}



/* ----------recruit---------- */

.recruit {
    position: relative;
    width: 100%;
    
    background: #000;
    border-top: solid var(--top-maring) #304C97;
}
.recruit_title {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: var(--top-maring);
    padding-bottom: calc(var(--top-maring) / 2);
}
.recruit_title div {
    margin-left: var(--side-margin);
    width: var(--top-maring);
    height: var(--top-maring);

    background: #B13594;
    border-radius: 50%;
}
.recruit_title h1 {
    margin-left: 3rem;

    color: #2188E4;
    font-size: 3rem;
}
.recruit_title h1 span {
    margin-left: 2rem;

    color: #fff;
    font-size: 1.8rem;
}
.recruit_detail {
    padding-left: calc(var(--side-margin) + var(--top-maring) + 3rem);
    padding-bottom: calc(var(--top-maring) * 2);
}
.recruit_detail p {
    margin-bottom: 6.4rem;

    color: #fff;
    font-size: 1.8rem;
}
.recruit_detail a {
    position: relative;
    padding: 1.6rem 4.8rem;

    background: #2188E4;
    border-radius: 40px;

    color: #fff;
    font-size: 2rem;
    text-decoration: none;
}
.recruit_detail a::before {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    right: 1rem;

    transition: .5s;
    transform: translate(-50%, -50%);
    opacity: 0;
}
.recruit_detail a:hover::before {
    transform: translate(-50%, -50%) translateX(50%);
    opacity: 1;
}
@media screen and (max-width:800px) {
    .recruit_detail {
        padding-left: calc((var(--side-margin) + var(--top-maring) + 3rem) / 2);
        padding-right: calc((var(--side-margin) + var(--top-maring) + 3rem) / 2);
        padding-bottom: calc(var(--top-maring) * 2);
    }
}
@media screen and (max-width:520px) {
    .recruit {
        border-top: solid calc(var(--top-maring)/2) #304C97;
    }
    .recruit_title {
        display: flex;
        align-items: center;
        width: 100%;
        padding-top: var(--top-maring);
        padding-bottom: calc(var(--top-maring) / 2);
    }
    .recruit_title div {
        width: calc(var(--top-maring) / 2);
        height: calc(var(--top-maring) / 2);
        margin-left: calc(var(--side-margin) / 2);
        background: #114472;
        border-radius: 50%;
    }
    .recruit_title h1 {
        margin-left: 1rem;
        color: #2188E4;
        font-size: 1.8rem;
        text-transform: uppercase;
    }
    .recruit_title h1 span {
        margin-left: .5rem;
    
        font-size: 1.2rem;
    }
    .recruit_detail {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding-left: calc((var(--side-margin) + var(--top-maring) + 3rem) / 4);
        padding-right: calc((var(--side-margin) + var(--top-maring) + 3rem) / 4);
        padding-bottom: var(--top-maring);
    }
    .recruit_detail p {
        font-size: 1.4rem;
    }
    .recruit_detail a {
        position: relative;
        padding: 1rem 6rem;
    
        background: #2188E4;
        border-radius: 40px;
    
        color: #fff;
        font-size: 1.6rem;
        text-decoration: none;
    }
}

/* ----------footer---------- */

footer {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
    color: #fff;
    overflow: hidden;
}

.footer_container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding-top: var(--top-maring);
    padding-bottom: calc(var(--top-maring) * 2.5);
    border-top: solid var(--top-maring) #304C97;
}

.footer_left {
    margin-left: var(--side-margin);
}

.footer_left img {
    width: 50%;
    margin-bottom: 3rem;
}

.footer_left table {
    width: 100%;
    text-align: left;
}

.footer_left table tr {
    border-bottom: solid 1px #304C97;
}

.footer_left table tr th {
    height: 5rem;
    padding: 0 1rem 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.footer_left table tr td {
    padding-right: 1rem;
    font-size: 1.2rem;
}

.footer_left > div {
    display: flex;
}

.footer_left_name {
    width: 15rem;
    height: 4rem;
}

.footer_left_detail {
    width: 28rem;
    height: 4rem;
    text-decoration: none;
}

.footer_left_detail p,
.footer_left_name p {
    padding: 1rem 0;
    font-size: 1.2rem;
    border-bottom: solid 1px #304C97;
}

.footer_left_detail p:nth-of-type(5) {
    padding: 0.45rem 0;
    line-height: 1.2;
}

.footer_right {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    margin-top: 44rem;
    margin-right: var(--side-margin);
}

.footer_right_iconBx {
    height: 5rem;
    margin: 0 2rem 1rem 0;
}

.footer_right_iconBx a {
    color: #fff;
    font-size: 5rem;
    margin-left: 2rem;
}

.footer_right_textBx {
    display: flex;
}

.footer_right_textBx a {
    text-align: center;
    border-right: solid 1px #fff;
    text-decoration: none;
    color: #fff;
    padding: 0 2rem;
    font-size: 1.2rem;
}

.footer_right_textBx a:last-child {
    border-right: none;
    text-align: right;
}

.footer_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.footer_bottom div {
    position: relative;
    width: 100%;
    height: var(--top-maring);
    background: #304C97;
}

.footer_bottom div::before {
    content: '';
    position: absolute;
    top: 0;
    right: var(--side-margin);
    width: var(--top-maring);
    height: var(--top-maring);
    background: #B13594;
    border-radius: 50%;
}

.footer_bottom p {
    width: 100%;
    height: var(--top-maring);
    padding-right: var(--side-margin);
    font-size: 1.2rem;
    text-align: end;
    line-height: var(--top-maring);
}

/* ---------------media(min-width: 2500px)---------------- */

@media screen and (min-width: 2500px) {
    /* ----------Concept---------- */
.concept_right {
    color: #fff;
}

.concept_right_ball {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 12vw;
    height: 12vw;
    border: solid 1px #304C97;
    border-radius: 50%;
}

.concept_right_ball h2 {
    width: 70%;
    color: #2188E4;
    font-size: 2.5rem;
    line-height: 3rem;
}

.concept_right_ball p {
    width: 70%;
    margin-top: 1rem;
    font-size: 1rem;
}

.concept_right_ball:first-child {
    position: absolute;
    top: 10%;
    left: calc(50% - 5vw);
}

.concept_right_ball:nth-child(2) {
    position: absolute;
    top: calc(10% + 8vw);
    left: calc(50% - 5vw + 7vw);
    width: 15vw;
    height: 15vw;
}

.concept_right_ball:nth-child(3) {
    position: absolute;
    top: calc(10% + 8vw + 3.5vw);
    left: calc(50% - 5vw + 7vw + 3.5vw + 11vw);
    width: 8vw;
    height: 8vw;
}

.concept_right_ball:nth-child(4) {
    position: absolute;
    top: calc(10% + 8vw + 3.5vw + 4.5vw);
    left: calc(50% - 5vw + 7vw + 3.5vw + 9vw);
    width: 8vw;
    height: 8vw;
}

.concept_right_ball:nth-child(5) {
    position: absolute;
    top: calc(10% + 8vw + 3.5vw + 9vw);
    left: calc(50% - 5vw + 7vw + 3.5vw + 5vw);
    width: 8vw;
    height: 8vw;
}

.concept_right_ball:nth-child(6) {
    position: absolute;
    top: calc(10% + 8vw + 1.5vw + 10vw);
    left: calc(50% - 5vw + 7vw + 1.5vw + 16vw);
}

.concept_right_ball:nth-child(7) {
    position: absolute;
    bottom: 10%;
    left: calc(50% - 10vw);
}

.concept_right_ball:nth-child(3) h2,
.concept_right_ball:nth-child(4) h2,
.concept_right_ball:nth-child(5) h2,
.concept_right_ball:nth-child(7) h2 {
    font-size: 1.5rem;
    text-align: center;
}

.concept_right_yajirushi {
    position: absolute;
    bottom: calc(10% + 10rem);
    left: calc(50% - 10vw + 20rem - 1px);
    width: 1px;
    height: 25rem;
    background: #304C97;
    opacity: 0;
}

.concept_right_yajirushi::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(-45deg);
    transform-origin: right;
    width: 5rem;
    height: 1px;
    background: #304C97;
}

.concept_right_ball:last-child {
    position: absolute;
    bottom: 14%;
    right: var(--side-margin);
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    background: #304C97;
}

/* ----------corporateActivities---------- */

.corporateActivities_sheet_toptext {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    gap: 2rem;
    width: 90%;
    padding: 3rem 0;
    border-bottom: solid 2px #2188E4;
}

.corporateActivities_sheet_toptext_textBx {
    width: 100%;
}

.corporateActivities_sheet_toptext_textBx p {
    font-size: 1.5rem;
    line-height: 2.5rem;
}

.corporateActivities_sheet_toptext_imgBx {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.corporateActivities_sheet_toptext_imgBx img {
    width: calc(25% - 1.5rem);
}

.corporateActivities_sheet_centertext {
    width: 90%;
    margin-top: 3rem;
}

.corporateActivities_sheet_centertext > p {
    font-size: 2rem;
    margin-bottom: 3rem;
}

.corporateActivities_sheet_centertext_SDGs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.corporateActivities_sheet_centertext_SDGs_imgBx {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    width: 80%;
}

.corporateActivities_sheet_centertext_SDGs_imgBx img {
    width: calc(33% - 1.5rem);
}

.corporateActivities_sheet_centertext_SDGs_imgBx img:first-child {
    width: 100%;
}

.corporateActivities_sheet_centertext_SDGs p {
    width: 100%;
    font-size: 1.5rem;
    line-height: 2.5rem;
}

.corporateActivities_sheet_centertext_imgBx {
    display: flex;
    gap: 2rem;
    padding-bottom: 2rem;
}

.corporateActivities_sheet_centertext_imgBx img {
    height: 10rem;
}

.corporateActivities_company {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(100% - (var(--side-margin) * 2));
    margin: 0 auto;
    margin-top: 10rem;
    background: #eeeeee;
    border-radius: 3rem;
    z-index: 10;
}

.corporateActivities_company h2 {
    width: 90%;
    padding: 2rem 0 1rem 2rem;
    border-bottom: solid 2px #2188E4;
    font-size: 2rem;
    line-height: 2.5rem;
}

.corporateActivities_company_text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    width: 90%;
    padding: 2rem 0;
}

.corporateActivities_company_text p {
    font-size: 1.5rem;
    line-height: 2rem;
}

.corporateActivities_company_text p:first-child {
    width: 100%;
}

.corporateActivities_company_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #fff;
    border-radius: 2rem;
}

.corporateActivities_company_logo p {
    font-size: 3.6rem;
}

.corporateActivities_company_logo img {
    width: 25%;
    padding: 3rem;
}

.corporateActivities_company_text p:last-child {
    width: 100%;
    text-align: end;
}

.corporateActivities_circle_ball1 {
    position: absolute;
    top: 40rem;
    right: calc(-2 * var(--side-margin));
    width: calc(var(--side-margin) * 3);
    height: calc(var(--side-margin) * 3);
    background: #7E8BAF;
    border-radius: 50%;
}

.corporateActivities_circle_ball1::before {
    display: none;
}

.corporateActivities_circle_ball1::after {
    display: none;
}

.corporateActivities_circle_ball2 {
    position: absolute;
    top: calc((var(--side-margin) * 3) + 40rem);
    left: 0;
    width: calc(var(--side-margin) * 1);
    height: 10rem;
    background: transparent;
}

.corporateActivities_circle_ball2::before {
    display: none;
}

.corporateActivities_circle_ball2::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--side-margin));
    right: 0;
    width: var(--side-margin);
    height: var(--side-margin);
    background: #2188E4;
    border-radius: 50%;
}

.corporateActivities_circle_ball3 {
    position: absolute;
    top: calc(var(--side-margin) * 3 + 55rem);
    left: calc(var(--side-margin) * -2);
    width: calc(var(--side-margin) * 3);
    height: calc(var(--side-margin) * 3);
    background: #70707070;
    border-radius: 50%;
}
}

/* ---------------media(max-width: 1500px)---------------- */

@media screen and (max-width: 1500px) {
    /* ----------SERVICE OVERVIEW---------- */

    .serviceOverview_circle_circle h3 {
        color: #fff;
        font-size: 1.8rem;
        text-align: center;
    }

    .serviceOverview_circle_circle p {
        font-size: 1.2rem;
        line-height: 1.5;
    }

    /* ----------Concept---------- */

    .concept_left h3 {
        margin: 2.5rem;
        font-size: 1.8rem;
        line-height: 3rem;
    }

    .concept_left p {
        font-size: 1.4rem;
        margin: 0 2.5rem 0 5rem;
        line-height: 2.5rem;
    }

    .concept_right {
        color: #fff;
    }

    .concept_right_ball {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 20rem;
        height: 20rem;
        border: solid 1px #304C97;
        border-radius: 50%;
    }

    .concept_right_ball h4 {
        width: 70%;
        color: #2188E4;
        font-size: 2.5rem;
        line-height: 3rem;
    }

    .concept_right_ball p {
        width: 70%;
        margin-top: 1rem;
        font-size: 1rem;
    }

    .concept_right_ball:first-child {
        position: absolute;
        top: 10%;
        left: calc(50% - 5vw);
    }

    .concept_right_ball:nth-child(2) {
        position: absolute;
        top: calc(10% + 13rem);
        left: calc(50% - 5vw + 13rem);
        width: 25rem;
        height: 25rem;
    }

    .concept_right_ball:nth-child(3) {
        position: absolute;
        top: calc(10% + 19.5rem);
        left: calc(50% - 5vw + 19.5rem + 17rem);
        width: 12rem;
        height: 12rem;
    }

    .concept_right_ball:nth-child(4) {
        position: absolute;
        top: calc(10% + 19.5rem + 7.5rem);
        left: calc(50% - 5vw + 19.5rem + 14rem);
        width: 12rem;
        height: 12rem;
    }

    .concept_right_ball:nth-child(5) {
        position: absolute;
        top: calc(10% + 19.5rem + 14.5rem);
        left: calc(50% - 5vw + 19.5rem + 8.5rem);
        width: 12rem;
        height: 12rem;
    }

    .concept_right_ball:nth-child(6) {
        position: absolute;
        top: calc(10% + 15.5rem + 15rem);
        left: calc(50% - 5vw + 15.5rem + 26rem);
    }

    .concept_right_ball:nth-child(7) {
        position: absolute;
        bottom: 10%;
        left: calc(50% - 10vw);
    }

    .concept_right_ball:nth-child(3) h2,
    .concept_right_ball:nth-child(4) h2,
    .concept_right_ball:nth-child(5) h2,
    .concept_right_ball:nth-child(7) h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .concept_right_yajirushi {
        position: absolute;
        bottom: calc(10% + 10rem);
        left: calc(50% - 10vw + 20rem - 1px);
        width: 1px;
        height: 25rem;
        background: #304C97;
        opacity: 0;
    }

    .concept_right_yajirushi::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        transform: rotate(-45deg);
        transform-origin: right;
        width: 5rem;
        height: 1px;
        background: #304C97;
    }

    .concept_right_ball:last-child {
        position: absolute;
        bottom: 14%;
        right: var(--side-margin);
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        background: #304C97;
    }
}

/* ---------------media(max-width: 1024px)---------------- */

@media screen and (max-width: 1024px) {

    /*---------- Impression ----------*/
    .impression h2 {
        font-size: 14rem;
    }

    .impression_text_right {
        padding-top: 4rem;
    }

    .impression_text_right p:first-child::after {
        width: 180%;
    }

    /*---------- Service Overview ----------*/
    .serviceOverview {
        flex-wrap: wrap;
    }

    .serviceOverview_circle {
        flex-wrap: wrap;
        position: relative;
    }

    .serviceOverview_circle .none {
        display: none;
    }

    .serviceOverview_circle_circle {
        width: 50vw;
        height: 50vw;
    }

    .serviceOverview_circle_circle h3 {
        font-size: 2.0rem;
    }

    #serviceOverview_title {
        font-size: 4.0rem;
    }

    .serviceOverview_circle_circle p {
        font-size: 1.6rem;
    }

    .serviceOverview_circle:nth-child(2) .none:last-child {
        display: block;
    }

    .serviceOverview_circle:last-child .serviceOverview_circle_circle:nth-child(4) p {
        position: absolute;
        width: 35rem;
        bottom: 21%;
        right: 55%;
    }

    .serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child::before {
        position: absolute;
        bottom: 45%;
        right: 100%;
    }

    .serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child::after {
        width: 40vw;
        position: absolute;
        bottom: 45%;
        right: 40%;
    }

    /*---------- Concept ----------*/
    .concept {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .concept_left {
        position: relative;
        width: 70vw;
        height: 450px;
        margin-top: 8rem;
    }

    .concept_left h2 {
        width: 80vw;
    }

    .concept_left h2::before {
        bottom: -2.5vw;
        right: 7.5vw;
        transform: translate(0, 0);
    }

    .concept_left h3 {
        font-size: 1.6rem;
    }

    .concept_left p {
        font-size: 1.4rem;
        margin: 0 2.5rem;
    }

    .concept_right {
        position: relative;
        width: 100%;
        height: 600px;
    }

    .concept_right_ball:first-child {
        position: absolute;
        top: 5%;
        left: 25%;
    }
    
    .concept_right_ball:nth-child(2) {
        position: absolute;
        top: calc(5% + 12rem);
        left: calc(25% + 12rem);
    }
    
    .concept_right_ball:nth-child(3) {
        position: absolute;
        top: calc(5% + 18rem);
        left: calc(25% + 35.5rem);
    }
    
    .concept_right_ball:nth-child(4) {
        position: absolute;
        top: calc(5% + 28rem);
        left: calc(25% + 32rem);
        width: 12rem;
        height: 12rem;
    }
    
    .concept_right_ball:nth-child(5) {
        position: absolute;
        top: calc(5% + 33.5rem);
        left: calc(25% + 22.5rem);
        width: 12rem;
        height: 12rem;
    }
    
    .concept_right_ball:nth-child(6) {
        position: absolute;
        top: calc(5% + 30rem);
        left: calc(25% + 38rem);
    }
    
    .concept_right_ball:nth-child(7) {
        position: absolute;
        bottom: 14%;
        left: 8rem;
    }

    .concept_right_ball:last-child {
        bottom: 14%;
        right: 5rem;
        width: 8vw;
        height: 8vw;
    }

    .concept_right_yajirushi {
        left: calc(8rem + 15rem);
    }

    /*---------- Visual Solution ----------*/
    .visualSolution {
        height: auto;
    }

    .visualSolution > div:last-of-type {
        font-size: 14rem;
    }

    .visualSolution_content {
        gap: 5vw;
        margin-bottom: 15rem;
    }

    .visualSolution_content_container {
        width: 27vw;
    }

    .visualSolution_content_container h3 {
        font-size: 1.8rem;
    }

    .visualSolution_content_container p {
        font-size: 1.4rem;
    }

    /*---------- SNS Promotion ----------*/
    .promotion {
        height: auto;
    }

    .promotion_content {
        margin-bottom: 15rem;
    }

    .promotion_content_container {
        width: 27vw;
    }

    .promotion_content_container h3 {
        font-size: 1.8rem;
    }

    .promotion_content_container p {
        font-size: 1.4rem;
    }
    
    .promotion > div:last-of-type {
        font-size: 14rem;
    }

    /*---------- Creative Product ----------*/
    .creativeProduct {
        height: auto;
    }

    .creativeProduct_content {
        gap: 5vw;
        margin-bottom: 15rem;
    }

    .creativeProduct_content_container {
        width: 27vw;
    }

    .creativeProduct_content_container h3 {
        font: 1.8rem;
    }

    .creativeProduct_content_container p {
        font: 1.4rem;
    }    

    .creativeProduct > div:last-of-type {
        font-size: 14rem;
    }

    /*---------- Design Mentenance ----------*/
    .designMaintenance {
        height: auto;
    }

    .designMaintenance_content {
        gap: 5vw;
        margin-bottom: 15rem;
    }

    .designMaintenance_content_container {
        width: 27vw;
    }

    .designMaintenance_content_container h3 {
        font-size: 1.8rem;
    }

    .designMaintenance_content_container p {
        font-size: 1.4rem;
    }

    .designMaintenance > div:last-of-type {
        font-size: 14rem;
    }

    /*---------- photographer ----------*/
    .photographer_container_textBx h3 {
        width: 25%;
        color: #2188E4;
        font-size: 1.5rem;
    }
    
    .photographer_container_textBx p {
        width: 75%;
        color: #fff;
        font-size: 1.2rem;
        line-height: 1.5rem;
    }

    /*---------- Corporate Active ----------*/
    .corporateActivities_title h1 {
        margin-left: var(--side-margin);
    }

    .corporateActivities_sheet {
        width: calc(100% - (var(--side-margin) * 2));
        margin: 0 var(--side-margin) 10rem;
    }

    .corporateActivities_sheet > p {
        padding: 2rem 1rem 1rem;
    }

    .corporateActivities_sheet_toptext_textBx {
        width: 35%;
    }

    .corporateActivities_sheet_toptext_textBx p {
        line-height: 1.7;
        font-size: 1.4rem;
    }

    .corporateActivities_sheet_toptext_imgBx {
        width: 65%;
    }

    .corporateActivities_sheet_centertext_SDGs p {
        width: 60%;
        line-height: 1.7;
        font-size: 1.4rem;
    }

    .corporateActivities_sheet_centertext_SDGs_imgBx {
        gap: 2rem;
        width: 40%;
    }

    .corporateActivities_company {
        width: calc(100% - (var(--side-margin) * 2));
        margin: 0 var(--side-margin);
    }

    .corporateActivities_company > p {
        font-size: 1.2rem;
    }

    .corporateActivities_company h2 {
        font-size: 2rem;
    }

    .corporateActivities_circle_ball1 {
        right: calc(-0.5 * var(--side-margin));
        width: calc(var(--side-margin) * 1.5);
        height: calc(var(--side-margin) * 1.5);
    }

    .corporateActivities_circle_ball1::before {
        bottom: -6rem;
        height: 6rem;
    }

    .corporateActivities_circle_ball1::after {
        bottom: -9rem;
        height: 3rem;
    }

    .corporateActivities_circle_ball2 {
        top: calc((var(--side-margin) * 1.5) + 40rem);
        width: var(--side-margin);
        height: 6rem;
    }

    .corporateActivities_circle_ball2::before {
        height: 3rem;
        bottom: -3rem;
    }

    .corporateActivities_circle_ball2::after {
        bottom: calc(-1 * (var(--side-margin) / 1.5));
        width: calc(var(--side-margin) / 1.5);
        height: calc(var(--side-margin) / 1.5);
    }

    .corporateActivities_circle_ball3 {
        bottom: calc(var(--side-margin) * 4.5);
        left: calc(var(--side-margin) * -0.5);
        width: calc(var(--side-margin) * 1.5);
        height: calc(var(--side-margin) * 1.5);
    }


    /*-------------- footer ---------------*/
    .footer_left {
        margin-left: 6rem;
    }

    .footer_right {
        margin-right: 6rem;
    }
}

/* ---------------media(max-width: 960px)---------------- */

@media screen and (max-width: 960px) {
    /*------------- header -------------*/
    /* .header_imgBx video.header_video {
        display: none;
    }

    .header_imgBx video.header_video_sp {
        display: block;
    } */

    /*------------ impression ------------*/
    .impression_text_left p {
        color: #fff;
        font-size: 1.8rem;
        line-height: 3.6rem;
    }

    /*------------ solution ------------*/
    .visualSolution_content_container a {
        display: block;
        width: fit-content;
        margin: 0 0 .8rem 0;
    }


    /* ---------- footer ---------- */
    .footer_container {
        align-items: center;
        flex-direction: column;
        padding-bottom: calc(var(--top-maring) * 3);
    }

    .footer_left {
        margin-left: 0;
    }

    .footer_right {
        margin: 2rem auto 0;
        align-items: center;
    }

    .footer_right_iconBx {
        margin-right: 0;
    }

    .footer_right_iconBx a:last-child {
        margin-left: 1.5rem;
    }
}


@media screen and (max-width: 1024px) {
    .corporateActivities_sheet_toptext {
        gap: 2rem;
        width: 90%;
        padding: 3rem 0;
        flex-direction: column;
    }
    .corporateActivities_sheet_toptext_textBx {
        width: 100%;
    }
    .corporateActivities_sheet_toptext_imgBx {
        width: 100%;
    }
    .corporateActivities_sheet_centertext_SDGs {
        display: block;
    }
    .corporateActivities_sheet_centertext_SDGs_imgBx {
        width: 100%;
    }
    .corporateActivities_sheet_centertext_SDGs p {
        width: 100%;
        padding-top: 2rem;
    }
}

/* ---------------media(max-width: 768px)---------------- */

@media screen and (max-width: 768px) {

    /*---------- Impression ----------*/
    .impression h2 {
        right: -15rem;
    }

    .serviceOverview_circle:last-child .serviceOverview_circle_circle:nth-child(4) p {
        width: 20rem;
        bottom: 16%;
    }

    .impression_text_right p:first-child::after {
        width: 150%;
    }

    /*---------- Service Overview ----------*/
    .serviceOverview_circle_circle h3 {
        font-size: 1.8rem;
    }

    .serviceOverview_circle_circle p {
        font-size: 1.4rem;
    }

    /*---------- Concept ----------*/
    .concept_right {
        height: 750px;
    }

    .concept_right_ball:first-child {
        top: 6%;
        left: 50%;
    }

    .concept_right_ball:nth-child(2) {
        top: calc(5% + 13rem);
        left: calc(42% - 5rem);
    }

    .concept_right_ball:nth-child(3) {
        top: calc(5% + 33rem);
    left: calc(42% + 12rem);
    }

    .concept_right_ball:nth-child(4) {
        top: calc(5% + 36.5rem);
        left: calc(42% + 2rem);
    }

    .concept_right_ball:nth-child(5) {
        top: calc(5% + 33.5rem);
        left: calc(42% - 8rem);
    }

    .concept_right_ball:nth-child(6) {
        position: absolute;
        top: calc(5% + 46.5rem);
        left: calc(42% + 5rem);
    }

    .concept_right_ball:nth-child(7) {
        bottom: 6%;
        left: 5rem;
    }

    .concept_right_yajirushi {
        left: calc(5rem + 0rem);
        bottom: calc(6% + 10rem);
    }

    /*---------- Corporate Active ----------*/

    .corporateActivities_sheet_toptext_imgBx {
        width: 100%;
        gap: 1rem;
        justify-content: space-around;
    }

    .corporateActivities_sheet_toptext_imgBx img {
        width: 45%;
    }

    .corporateActivities_sheet_toptext_textBx {
        width: 95%;
    }
    
    .corporateActivities_sheet_centertext_SDGs {
        flex-direction: column;
        gap: 3rem;
    }

    .corporateActivities_sheet_centertext > p {
        font-size: 1.5rem;
        line-height: 1.7;
        padding: 0 1rem;
    }

    .corporateActivities_sheet_centertext_SDGs p {
        width: 100%;
        padding: 2rem 1rem 0;
    }

    .corporateActivities_sheet_centertext_SDGs_imgBx {
        gap: 2rem;
        width: 100%;
    }

    .corporateActivities_sheet_centertext_imgBx {
        gap: 1rem;
        padding: 0 1.5rem 3rem;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .corporateActivities_sheet_centertext_imgBx img {
        height: 8rem;
    }

    .corporateActivities_circle_ball1 {
        top: 60rem;
    }

    .corporateActivities_circle_ball2 {
        top: calc((var(--side-margin) * 1.5) + 60rem);
    }

    .corporateActivities_company h2 {
        font-size: 1.8rem;
    }

    .corporateActivities_company_logo p {
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 600px) {
    .corporateActivities_company div h3 {
        font-size: 1.2rem;
    }
}

/* ---------------media(max-width: 520px)---------------- */

@media screen and (max-width: 520px) {
    /* ----------HEADER---------- */

    header {
        position: relative;
        width: 100%;
        height: 100vh;
    }
    
    .header_imgBx {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: -100;
    }
    
    .header_imgBx video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .header_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: var(--top-maring);
        z-index: 10000;
    }
    
    .header_top_imgBx {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50vw;
        height: 8vh;
        margin-left: 1rem;
    }
    
    .header_top_imgBx img {
        width: 100%;
        height: 100%;
    }
    
    .header_top ul {
        display: none;
        flex-direction: column;
        gap: .5rem;
        margin-right: 2rem;
    }
    
    .header_top ul li {
        list-style: none;
    }
    
    .header_top ul li a {
        text-decoration: none;
        color: #fff;
        font-size: 1.1rem;
    }
    
    .header_text {
        position: relative;
        top: 35%;
        left: calc(var(--side-margin) / 2);
        transform: translateY(-50%);
        z-index: -1;
    }
    
    .header_text p {
        color: #fff;
        font-size: 1.5rem;
        line-height: 3rem;
    }
    
    .header_text p:nth-child(2) {
        margin-top: 2rem;
        color: #fff;
        font-size: 1rem;
        line-height: 2rem;
    }

    .header_contact {
        width: 20rem;
        height: 7rem;
        border-radius: 1.8rem;
        background: #304C97;
        transform: none;
        transition: 1s;
        z-index: 100000;
    }

    .header_contact.stricky {
        right: -100%;
        width: 7rem;
        border-radius: 50%;
    }

    .header_contact.stricky.stricky2 {
        right: calc(var(--side-margin) / 2);
    }
    
    .header_magazine {
        bottom: 10rem;
        width: 20rem;
        height: 7rem;
        border-radius: 1.8rem;
        background: #B13594;
        transform: none;
    }
    
    .header_contact_imgBx, .header_magazine_imgBx {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 5rem;
        height: 5rem;
        background: #fff;
        border-radius: 50%;
    }
    
    .header_contact_imgBx img, .header_magazine_imgBx img {
        width: 2.8rem;
    }

    .header_contact_text {
        transition: .5s;
    }
    
    .header_contact_text p, .header_magazine_text p {
        width: 11rem;
        margin-left: 1rem;
        color: #fff;
        font-size: 1.2rem;
        line-height: 1.2rem;
    }
    
    .header_magazine_text p {
        font-size: 1rem;
    }

    .header_magazine_text a {
        margin-left: 10px;
        font-size: 1rem;
        line-height: 1.1;
    }

    .header_magazine_text p span,
    .header_magazine_text p br {
        display: none;
    }
    
    .header_contact_text p:nth-child(2) {
        font-size: 1rem;
        margin-top: .5rem;
    }

    .header_contact.stricky .header_contact_text {
        display: none;
    }

/* ----------MAIN---------- */

main {
    width: 100%;
}

/* ----------IMPRESSION---------- */

.impression {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    overflow: hidden;
}

.impression h2 {
    position: relative;
    top: auto;
    right: auto;
    margin-top: calc(var(--top-maring) / 4);
    margin-left: calc((var(--side-margin)) / 2);
    color: #304C97;
    font-size: calc(var(--title-fontsize) / 3);
}

.impression_text_left {
    position: relative;
    top: auto;
    left: auto;
    margin-left: calc((var(--side-margin)) / 2);
    margin-bottom: calc(var(--top-maring) / 2);
}

.impression_text_left h3 {
    margin-bottom: 1rem;
    color: #fff;
    font-size: 1.8rem;
}

.impression_text_left p {
    color: #fff;
    font-size: 1rem;
    line-height: 2rem;
}

.impression_text_right {
    position: relative;
    bottom: auto;
    left: calc(var(--side-margin) / 2);
    display: flex;
    flex-direction: column;
    gap: calc(var(--top-maring) / 2);
    margin-bottom: calc(var(--top-maring) / 4);
}

.impression_text_right p {
    width: calc(100% - var(--side-margin));
    color: #fff;
    font-size: 1rem;
    line-height: 2rem;
}

.impression_text_right p:first-child::after {
    width: 80%;
    bottom: -2.5rem;
    right: 0;
}

.impression_text_right p:first-child {
    position: relative;
}

.impression_text_right p:first-child::before {
    content: '';
    position: absolute;
    bottom: calc(-1 * (var(--top-maring) / 2));
    right: calc(-1 * (var(--top-maring) / 2));
    width: calc(var(--top-maring) / 2);
    height: calc(var(--top-maring) / 2);
    background: #304C97;
    border-radius: 50%;
} 

.impressionBg {
    background: #000;
    backdrop-filter: none;
    transition: 1s;
}

/* ----------SERVICE OVERVIEW---------- */

.serviceOverview {
    display: block;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #C5C5C5;
    overflow: hidden;
}

.serviceOverview_circle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /*opacity: 0;*/
}

.serviceOverview_circle_circle {
    width: 100vw;
    height: 100vw;
    background: #808080;
}

.serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child {
    background: transparent;
}

.serviceOverview_circle:last-child .serviceOverview_circle_circle:nth-child(4) p {
    text-align: left;
    width: 50%;
    position: absolute;
    bottom: 15%;
    left: 12%;
}

.serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child::before {
    content: '';
    width: 5vw;
    height: 5vw;
    border: 2px solid #304C97;
    border-radius: 50%;
    position: absolute;
    bottom: 49.5vw;
    right: -12%;
    /*transform: translateX(-40vw);*/
}

.serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child::after {
    content: '';
    width: 28vw;
    height: 2px;
    background: #304C97;
    position: absolute;
    bottom: 50vw;
    right: -24%;
    /*transform: translateX(calc(-1 * (50% + 10vw))) translateY(calc(-1 * (2vw + 1px)));*/
}

.serviceOverview_circle_circle h3 {
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
}

#serviceOverview_title {
    font-size: 3.6rem;
}

.serviceOverview_circle_circle p {
    width: 70%;
    margin: 0 auto;
    padding-top: 2rem;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.7;
}

.slideIn {
    animation-name: slideInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes slideInAnime {
    from {
        transform: translateX(-100%);
        opacity: 1;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.rotateIn {
    animation-name: rotateInAnime;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    transform: rotateY(0deg);
}

@keyframes rotateInAnime {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(0deg);
    }
}

/* ----------Concept---------- */

.concept {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
}

.concept_left {
    position: relative;
    top: 0;
    left: 0;
    margin-left: calc(var(--side-margin) / 2);
    width: 80vw;
    height: 100%;
    border-right: 2px solid #304C97;
    color: #fff;
}

.concept_left h2 {
    position: relative;
    width: 90vw;
    height: 9rem;
    color: #2188E4;
    font-size: 1.8rem;
    border-bottom: 2px solid #304C97;
}

.concept_left h2::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10vw;
    height: 10vw;
    background: #B13594;
    border-radius: 50%;
    transform: translate(-50%, 50%);
}

.concept_left h2 span {
    margin-left: 1rem;
    color: #fff;
    font-size: 1rem;
}

.concept_left h3 {
    margin: 2rem;
    font-size: 1.6rem;
    line-height: 1.5;
}

.concept_left p {
    font-size: 1.4rem;
    margin: 0 2rem 0 4rem;
    line-height: 1.7;
}

.concept_right {
    position: relative;
    width: 100%;
    height: 270vw;
    color: #fff;
}

.concept_right_ball {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 45vw;
    height: 45vw;
    border: solid 1px #304C97;
    border-radius: 50%;
}

.concept_right_ball h4 {
    width: 70%;
    color: #2188E4;
    font-size: 1.5rem;
    line-height: 3rem;
}

.concept_right_ball p {
    width: 70%;
    margin-top: 1rem;
    font-size: 1rem;
}

.concept_right_ball:first-child {
    position: relative;
    top: 0;
    left: calc(47.5vw + (var(--side-margin) / 2));
}

.concept_right_ball:nth-child(2) {
    position: relative;
    top: -5vw;
    left: 30vw;
    width: 60vw;
    height: 60vw;
}

.concept_right_ball:nth-child(3) {
    position: relative;
    top: -15vw;
    left: 70vw;
    width: 30vw;
    height: 30vw;
}

.concept_right_ball:nth-child(4) {
    position: relative;
    top: -36vw;
    left: 45vw;
    width: 30vw;
    height: 30vw;
}

.concept_right_ball:nth-child(5) {
    position: relative;
    top: -75vw;
    left: 20vw;
    width: 30vw;
    height: 30vw;
}

.concept_right_ball:nth-child(6) {
    position: relative;
    top: -70vw;
    left: 37.5vw;
}

.concept_right_ball:nth-child(7) {
    position: relative;
    top: -40vw;
    left: 5vw;
}

.concept_right_ball:nth-child(4) h2,
.concept_right_ball:nth-child(5) h2,
.concept_right_ball:nth-child(7) h2 {
    font-size: 1.5rem;
    text-align: center;
}

.concept_right_ball:nth-child(3) h2 {
    font-size: 1.2rem;
}

.concept_right_yajirushi {
    position: relative;
    top: -160vw;
    left: 5vw;
    width: 1px;
    height: 100vw;
    background: #304C97;
    opacity: 0;
}

.concept_right_yajirushi::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(225deg);
    transform-origin: right;
    width: 5rem;
    height: 1px;
    background: #304C97;
}

.concept_right_ball:last-child {
    position: absolute;
    bottom: calc(var(--top-maring) / 2);
    right: calc(var(--side-margin) / 2);
    width: calc(var(--top-maring) / 2);
    height: calc(var(--top-maring) / 2);
    border-radius: 50%;
    background: #304C97;
}

.zoomIn {
    animation-name: zoomInAnime;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.zoomIn:nth-child(2) {
    animation-delay: .2s;
}

.zoomIn:nth-child(3) {
    animation-delay: .4s;
}

.zoomIn:nth-child(4) {
    animation-delay: .6s;
}

.zoomIn:nth-child(5) {
    animation-delay: .8s;
}

.zoomIn:nth-child(6) {
    animation-delay: 1s;
}

.zoomIn:nth-child(7) {
    animation-delay: 1s;
}

@keyframes zoomInAnime {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.slideUp {
    animation-name: slideUpAnime;
    animation-duration: .8s;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
    opacity: 0;
}

@keyframes slideUpAnime {
    from {
        transform: translateY(25rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ----------visualSolution---------- */

.visualSolution {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: var(--top-maring);
    background: #000000;
    overflow: hidden;
}

.visualSolution_bg_bar {
    width: 18%;
    height: 100%;
    background-color: #11447270;
    margin-left: calc(var(--side-margin) / 2);
    position: absolute;
}

.visualSolution_title {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    border-top: solid calc(var(--top-maring) / 2) #114472;
    border-bottom: solid calc(var(--top-maring) / 4) #114472;
}

.visualSolution_title div {
    margin-left: calc(var(--side-margin) / 2);
    width: calc(var(--top-maring) / 2);
    height: calc(var(--top-maring) / 2);
    background: #304C97;
    border-radius: 50%;
}

.visualSolution_title h2 {
    margin-left: 1rem;
    color: #2188E4;
    font-size: 1.8rem;
}

.visualSolution_title h2 span {
    margin-left: .5rem;
    color: #fff;
    font-size: 1rem;
}

.visualSolution_content {
    display: block;
    margin-top: calc(var(--top-maring) / 2);
    margin-bottom: 8rem;
}

.visualSolution_content_container {
    position: relative;
    width: 70vw;
    margin: 0 auto;
    margin-bottom: var(--top-maring);
    z-index: 1;
    transition: .5s ease-in-out;
}

.visualSolution_content_container:nth-child(1),
.visualSolution_content_container:nth-child(2),
.visualSolution_content_container:nth-child(3) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.visualSolution_content_container__imgBx {
    width: 100%;
}

.visualSolution_content_container__imgBx img {
    width: 100%;
}

.visualSolution_content_container h3 {
    color: #2188E4;
    font-size: 1.5rem;
    padding: 2rem 0 1rem;
}

.visualSolution_content_container p {
    margin-bottom: 2rem;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.7;
}

.visualSolution_content_container a {
    display: inline-block;
    padding: 1.2rem 1rem 1.2rem 2rem;
    margin: 0 .8rem 0 0;
    font-size: 1.4rem;
}

.visualSolution_content_container a span {
    font-size: 0;
    transition: .5s;
    opacity: 0;
}

.visualSolution_content_container a:hover span {
    margin-left: 1rem;
    font-size: 1rem;
    opacity: 1;
}

.visualSolution > div:last-of-type {
    position: absolute;
    bottom: 0;
    right: calc(-1 * (var(--side-margin) / 2));
    color: #304C97;
    font-size: calc(var(--title-fontsize) / 3);
    transition: .5s;

    transform: translateX(20vw);
}

.visualSolution_content.appear01 .visualSolution_content_container:nth-child(2) {
    transform: translateX(-20vw);
}

.visualSolution_content.appear01 .visualSolution_content_container:nth-child(3) {
    transform: translateX(-20vw);
}

.visualSolution_content.appear01 .visualSolution_content_container.appear_sp01:nth-child(2) {
    transform:  translateX(0vw);
}
.visualSolution_content.appear01 .visualSolution_content_container.appear_sp01:nth-child(3) {
    transform:  translateX(0vw);
}

/* ----------promotion---------- */

.promotion {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: var(--top-maring);
    background: #304C97;
    overflow: hidden;
}

.promotion_bg_bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 100%;
    background-color: #70707070;
    margin-right: calc((var(--side-margin) / 2) + (var(--top-maring) / 2));
}

.promotion_title {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    width: 100%;
    margin-top: calc(var(--top-maring) / 4);
    border-top: solid calc(var(--top-maring) / 4) #707070;
}

.promotion_title div {
    margin-right: calc(var(--side-margin) / 2);
    width: calc(var(--top-maring) / 2);
    height: calc(var(--top-maring) / 2);
    background: #C5C5C5;
    border-radius: 50%;
}

.promotion_title h2 {
    margin-right: 1rem;
    color: #2188E4;
    font-size: 1.8rem;
}

.promotion_title h2 span {
    margin-left: .5rem;
    color: #fff;
    font-size: 1rem;
}

.promotion_content {
    display: block;
    margin-top: calc(var(--top-maring) / 2);
    margin-bottom: 8rem;
}

.promotion_content_container {
    position: relative;
    width: 70vw;
    margin: 0 auto;
    z-index: 1;
    transition: .5s ease-in-out;
}

.promotion_content_container:nth-child(1) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.promotion_content_container:nth-child(2) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.promotion_content_container:nth-child(3) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.promotion_content_container__imgBx {
    width: 100%;
}

.promotion_content_container__imgBx img {
    width: 100%;
}

.promotion_content_container h3 {
    color: #2188E4;
    font-size: 1.5rem;
    padding: 2rem 0 1rem;
}

.promotion_content_container p {
    margin-bottom: var(--top-maring);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.7;
}

.promotion > div:last-of-type {
    position: absolute;
    bottom: 0;
    left: calc(-1 * (var(--side-margin) / 2));
    color: #2188E4;
    font-size: calc(var(--title-fontsize) / 3);
    transition: .5s;

    transform: translateX(-20vw);
}



/* -----promotion_animation----- */

.promotion_content.appear01 .promotion_content_container:nth-child(2) {
    transform: translateX(-20vw);
}

.promotion_content.appear01 .promotion_content_container:nth-child(3) {
    transform: translateX(-20vw);
}

.promotion_content.appear01 .promotion_content_container.appear_sp01:nth-child(2) {
    transform:  translateX(0vw);
}
.promotion_content.appear01 .promotion_content_container.appear_sp01:nth-child(3) {
    transform:  translateX(0vw);
}

/* ----------creativeProduct---------- */

.creativeProduct {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
    overflow: hidden;
    padding-bottom: var(--top-maring);
}

.creativeProduct_bg_bar {
    position: absolute;
    width: calc(var(--top-maring) / 2);
    height: 100%;
    background-color: #11447270;
    margin-left: calc(var(--side-margin) / 2);
}

.creativeProduct_title {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    border-top: solid calc(var(--top-maring) / 2) #114472;
    border-bottom: solid calc(var(--top-maring) / 4) #114472;
}

.creativeProduct_title div {
    margin-left: calc(var(--side-margin) / 2);
    width: calc(var(--top-maring) / 2);
    height: calc(var(--top-maring) / 2);
    background: #304C97;
    border-radius: 50%;
}

.creativeProduct_title h2 {
    margin-left: 1rem;
    color: #2188E4;
    font-size: 1.8rem;
}

.creativeProduct_title h2 span {
    margin-left: .5rem;
    color: #fff;
    font-size: 1rem;
}

.creativeProduct_content {
    display: block;
    margin-top: calc(var(--top-maring) / 2);
    margin-bottom: 8rem;
}

.creativeProduct_content_container {
    position: relative;
    width: 70vw;
    margin: 0 auto;
    z-index: 1;
    transition: .5s ease-in-out;
}

.creativeProduct_content_container:nth-child(1) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.creativeProduct_content_container:nth-child(2) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.creativeProduct_content_container:nth-child(3) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.creativeProduct_content_container__imgBx {
    width: 100%;
}

.creativeProduct_content_container__imgBx img {
    width: 100%;
}

.creativeProduct_content_container h3 {
    color: #2188E4;
    font-size: 1.5rem;
    padding: 2rem 0 1rem;
}

.creativeProduct_content_container p {
    margin-bottom: var(--top-maring);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.7;
}

.creativeProduct > div:last-of-type {
    position: absolute;
    bottom: 0;
    right: calc(-1 * (var(--side-margin) / 2));
    color: #304C97;
    font-size: calc(var(--title-fontsize) / 3);
    transition: .5s;
    transform: translateX(20vw);
}



/* -----creativeProduct_animation----- */

.creativeProduct_content.appear01 .creativeProduct_content_container:nth-child(2) {
    transform: translateX(-20vw);
}

.creativeProduct_content.appear01 .creativeProduct_content_container:nth-child(3) {
    transform: translateX(-20vw);
}

.creativeProduct_content.appear01 .creativeProduct_content_container.appear_sp01:nth-child(2) {
    transform:  translateX(0vw);
}
.creativeProduct_content.appear01 .creativeProduct_content_container.appear_sp01:nth-child(3) {
    transform:  translateX(0vw);
}

/* ----------designMaintenance---------- */

.designMaintenance {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: var(--top-maring);
    background: #304C97;
    overflow: hidden;
}

.designMaintenance_bg_bar {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(var(--top-maring) / 2);
    height: 100%;
    background-color: #70707070;
    margin-right: calc(var(--side-margin) / 2);
}

.designMaintenance_title {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    width: 100%;
    margin-top: calc(var(--top-maring) / 2);
    border-bottom: solid calc(var(--top-maring) / 4) #707070;
}

.designMaintenance_title div {
    margin-right: calc(var(--side-margin) / 2);
    width: calc(var(--top-maring) / 2);
    height: calc(var(--top-maring) / 2);
    background: #C5C5C5;
    border-radius: 50%;
}

.designMaintenance_title h2 {
    margin-right: 1rem;
    color: #2188E4;
    font-size: 1.8rem;
}

.designMaintenance_title h2 br {
    display: block;
}

.designMaintenance_title h2 span {
    margin-left: .5rem;
    color: #fff;
    font-size: 1rem;
}

.designMaintenance_content {
    display: block;
    width: 100%;
    margin-top: calc(var(--top-maring) / 2);
    margin-bottom: 8rem;
}

.designMaintenance_content_container {
    position: relative;
    width: 70vw;
    margin: 0 auto;
    z-index: 1;
    transition: .5s ease-in-out;

    /* transform: translateX(-20vw); */
}

.designMaintenance_content_container:nth-child(1) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.designMaintenance_content_container:nth-child(2) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.designMaintenance_content_container:nth-child(3) {
    transform: translateX(-20vw);
    transition: .5s ease-in-out;
}

.designMaintenance_content_container__imgBx {
    width: 100%;
}

.designMaintenance_content_container__imgBx img {
    width: 100%;
}

.designMaintenance_content_container h3 {
    color: #2188E4;
    font-size: 1.5rem;
    padding: 2rem 0 1rem;
}

.designMaintenance_content_container p {
    margin-bottom: var(--top-maring);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.7;
}

.designMaintenance > div:last-of-type {
    position: absolute;
    bottom: 0;
    left: calc(-1 * (var(--side-margin) / 2));
    color: #2188E4;
    font-size: calc(var(--title-fontsize) / 3);
    transition: .5s;

    transform: translateX(-20vw);
}



/* -----designMaintenance_animation----- */

.designMaintenance_content.appear01 .designMaintenance_content_container:nth-child(2) {
    transform: translateX(-20vw);
}

.designMaintenance_content.appear01 .designMaintenance_content_container:nth-child(3) {
    transform: translateX(-20vw);
}

.designMaintenance_content.appear01 .designMaintenance_content_container.appear_sp01:nth-child(2) {
    transform:  translateX(0vw);
}
.designMaintenance_content.appear01 .designMaintenance_content_container.appear_sp01:nth-child(3) {
    transform:  translateX(0vw);
}

/* ----------photographer---------- */

.photographer {
    position: relative;
    width: 100%;
    background: #000000;
    overflow: hidden;
}

.photographer_topright {
    position: absolute;
    top: 10vw;
    right: calc(var(--side-margin) / 2);
    color: #fff;
    font-size: 1rem;
    z-index: 1;
    transition: .5s ease-in-out;
    transition-delay: .5s;

    transform: translateY(10rem);
    opacity: 0;
}

.photographer_circle_ball1 {
    position: absolute;
    top: -10vw;
    right: -5vw;
    width: 40vw;
    height: 40vw;
    background: #304C9755;
    outline: none;
    border: solid 5vw #304C97;
    border-radius: 50%;
    transition: .5s ease-in-out;

    transform: translateX(10vw);
    opacity: 0;
}

.photographer_circle_ball1::before {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 0%;
    height: 2px;
    background: #304C97;
    transition: .5s ease-in-out;
    transition-delay: .5s;
}

.photographer_circle_ball2 {
    position: absolute;
    bottom: -10vw;
    left: -5vw;
    width: 40vw;
    height: 40vw;
    background: #304C9755;
    outline: none;
    border: solid 5vw #304C97;
    border-radius: 50%;
    transition: .5s ease-in-out;

    transform: translateX(-10vw);
    opacity: 0;
}

.photographer_circle_ball2::before {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right: -100vw;
    width: 100vw;
    height: 2px;
    background: #304C97;
}

.photographer_circle_ball3 {
    position: absolute;
    bottom: calc(var(--top-maring) / 2);
    right: calc(var(--side-margin) / 2);
    width: calc(var(--top-maring) / 2);
    height: calc(var(--top-maring) / 2);
    background: #B13594;
    border-radius: 50%;
}

.photographer_title {
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    margin-top: calc(var(--side-margin) * 3.5);
    margin-bottom: calc(var(--top-maring) / 2);
}

.photographer_title div {
    margin-left: calc(var(--side-margin) / 2);
    width: var(--side-margin);
    height: var(--side-margin);
    background: #304C97;
    border-radius: 50%;
}

.photographer_title h2 {
    margin-left: 1rem;
    color: #2188E4;
    font-size: 1.8rem;
}

.photographer_title h2 span {
    margin-left: .5rem;
    color: #fff;
    font-size: 1rem;
}

.photographer_contents {
    width: 100%;
    margin-bottom: calc(var(--side-margin) * 3.5);
}

.photographer_container {
    width: calc(100vw - var(--side-margin));
    margin-left: calc(var(--side-margin) / 2);
    margin-bottom: 5rem;
    transition: .5s ease-in-out;

    transform: translateX(-20rem);
    opacity: 0;
}

.photographer_container_imgBx {
    position: relative;
    width: 100%;
}

.photographer_container_imgBx:before {
    content: '';
    position: absolute;
    top: 0;
    width: 8%;
    height: 200%;
    background: #000000;
    border-right: solid 1px #304C97;
    transform-origin: top right;
    transform: rotate(15deg);
}

.photographer_container_imgBx img {
    width: 100%;
}

.photographer_container_textBx {
    display: block;
    width: 80%;
    margin: 0 auto;
}

.photographer_container_textBx h3 {
    width: 100%;
    height: 3rem;
    color: #2188E4;
    font-size: 1.5rem;
    line-height: 3rem;
}

.photographer_container_textBx p {
    width: 100%;
    color: #fff;
    font-size: 1rem;
}

.photographer_bottomleft {
    position: absolute;
    bottom: 10vw;
    left: calc(var(--side-margin) / 2);
    color: #fff;
    font-size: 1rem;
    z-index: 1;
    transition: .5s;

    transform: translateX(10vw);
    opacity: 0;
}



/* -----photographer_animation----- */

.photographer.appear_sp01 .photographer_topright {
    transform: translateY(0);
    opacity: 1;
}

.photographer.appear_sp01 .photographer_circle_ball1 {
    transform: translateX(0);
    opacity: 1;
}

.photographer.appear_sp01 .photographer_circle_ball1::before {
    left: -100vw;
    width: 100vw;
}

.photographer_circle_ball2.appear_sp01 {
    transform: translateX(0);
    opacity: 1;
}

.photographer_container.appear_sp01 {
    transform: translateX(0);
    opacity: 1;
}

.photographer_bottomleft.appear_sp01 {
    transform: translateY(0);
    opacity: 1;
}

/* ----------corporateActivities---------- */

.corporateActivities {
    position: relative;
    width: 100%;
    background: #C5C5C5;
    padding-bottom: 10rem;
    overflow: hidden;
}

.corporateActivities_title {
    width: 100%;
    border-top: solid calc(var(--top-maring) / 2) #707070;
}

.corporateActivities_title h2 {
    margin-left: calc(var(--side-margin) / 2);
    color: #2188E4;
    font-size: 1.8rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.corporateActivities_title h2 span {
    margin-left: .5rem;
    color: #fff;
    font-size: 1.2rem;
}

.corporateActivities_sheet {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(100% - (var(--side-margin) * 1));
    margin: 0 calc(var(--side-margin) / 2);
    background: #eeeeee;
    border-radius: 3rem;
}

.corporateActivities_sheet > p {
    width: 90%;
    padding-top: 2rem;
    border-bottom: solid 1px #2188E4;
    font-size: 1.2rem;
    line-height: 1.7;
}

.corporateActivities_sheet_toptext {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 90%;
    padding: 1rem 0;
    border-bottom: solid 1px #2188E4;
}

.corporateActivities_sheet_toptext_textBx {
    width: 95%;
}

.corporateActivities_sheet_toptext_textBx p {
    font-size: 1.2rem;
    line-height: 1.7;
}

.corporateActivities_sheet_toptext_imgBx {
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.corporateActivities_sheet_centertext {
    width: 90%;
    margin-top: 2rem;
}

.corporateActivities_sheet_centertext > p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.corporateActivities_sheet_centertext_SDGs {
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.corporateActivities_sheet_centertext_SDGs_imgBx {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.corporateActivities_sheet_centertext_SDGs_imgBx img {
    width: calc(33% - 1rem);
}

.corporateActivities_sheet_centertext_SDGs_imgBx img:first-child {
    width: 95%;
}

.corporateActivities_sheet_centertext_SDGs p {
    width: 100%;
    font-size: 1.2rem;
    line-height: 1.7;
}

.corporateActivities_sheet_centertext_imgBx {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    width: 100%;
}

.corporateActivities_sheet_centertext_imgBx img {
    width: 15vw;
    height: 100%;
}

.corporateActivities_company {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(100% - (var(--side-margin) * 1));
    margin: 0 calc(var(--side-margin) / 2);
    margin-top: 5rem;
    background: #eeeeee;
    border-radius: 3rem;
    z-index: 10;
}

.corporateActivities_company::before {
    content: '';
    position: absolute;
    top: -5rem;
    left: 0;
    width: 100vw;
    height: 10rem;
    background: #70707000;
}

.corporateActivities_company h2 {
    width: 90%;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: solid 1px #2188E4;
    font-size: 1.2rem;
    line-height: 2rem;
}

.corporateActivities_company_text {
    display: block;
    justify-content: center;
    gap: 1rem;
    width: 90%;
    padding: 0;
}

.corporateActivities_company_text > p {
    font-size: 1.2rem;
    line-height: 1.7;
    padding: 1rem 0;
}

.corporateActivities_company_text p:last-child {
    width: 100%;
    margin: 0;
    text-align: end;
    font-size: 1.6rem;
}

.corporateActivities_company_logo {
    border-radius: 1rem;
    flex-wrap: wrap;
}

.corporateActivities_company_logo p {
    font-size: 3rem;
    width: 50%;
}

.corporateActivities_company_logo img {
    width: 50%;
    padding: 1rem 3rem;
}

.corporateActivities_company_logo img:nth-child(3),
.corporateActivities_company_logo img:nth-child(4) {
    padding: 0 3rem 1rem;
}

.corporateActivities_circle_ball1 {
    position: absolute;
    top: 40rem;
    right: calc(-1 * var(--side-margin));
    width: calc(var(--side-margin) * 3 / 2);
    height: calc(var(--side-margin) * 3 / 2);
    background: #7E8BAF;
    border-radius: 50%;
}

.corporateActivities_circle_ball1::before {
    content: '';
    position: absolute;
    bottom: calc(var(--side-margin) * -1);
    left: 0;
    width: 100%;
    height: var(--side-margin);
    background: #70707070;
}

.corporateActivities_circle_ball1::after {
    content: '';
    position: absolute;
    bottom: calc(var(--side-margin) * -2);
    left: 0;
    width: 100%;
    height: var(--side-margin);
    background: #fff;
}

.corporateActivities_circle_ball2 {
    position: absolute;
    top: calc((var(--side-margin) * 3 / 2) + 40rem);
    left: 0;
    width: calc(var(--side-margin) / 2);
    height: var(--side-margin);
    background: #70707070;
}

.corporateActivities_circle_ball2::before {
    content: '';
    position: absolute;
    bottom: calc(var(--side-margin) * -1);
    right: 0;
    width: 100%;
    height: var(--side-margin);
    background: #fff
}

.corporateActivities_circle_ball2::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--side-margin));
    right: 0;
    width: var(--side-margin);
    height: var(--side-margin);
    background: #2188E4;
    border-radius: 50%;
}

.corporateActivities_circle_ball3 {
    position: absolute;
    bottom: calc(var(--side-margin) * 2);
    left: calc(var(--side-margin) * -2.5);
    width: calc(var(--side-margin) * 3);
    height: calc(var(--side-margin) * 3);
    background: #70707070;
    border-radius: 50%;
}

/* ----------footer---------- */

footer {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000000;
    color: #fff;
}

.footer_container {
    display: block;
    width: 100%;
    padding-top: calc(var(--top-maring) / 2);
    padding-bottom: calc(var(--top-maring) / 4);
    border-top: solid calc(var(--top-maring) / 2) #304C97;
}

.footer_left {
    margin: 0 calc(var(--side-margin) / 2);
}

.footer_left img {
    width: 150px;
    margin-bottom: 1rem;
}

.footer_left table {
    width: 100%;
    margin: 1rem auto 0;
}

.footer_left table tr th {
    height: 4rem;
    font-size: 1rem;
}

.footer_left table tr td {
    font-size: 1rem;
}

.footer_right {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 3.2rem;
    padding-bottom: calc(var(--top-maring) * 1);
    border-bottom: solid var(--top-maring) #000000;
    width: 100%;
}

.footer_right_iconBx {
    height: 5rem;
    margin: 0 0 2rem 0;
}

.footer_right_iconBx a {
    color: #fff;
    font-size: 5rem;
    margin-left: 1rem;
}

.footer_right_textBx {
    display: flex;
}

.footer_right_textBx a {
    text-align: center;
    border-right: solid 1px #fff;
    text-decoration: none;
    color: #fff;
    padding: 0 2rem;
    font-size: 1.2rem;
}

.footer_right_textBx a:last-child {
    border-right: none;
    text-align: right;
}

.footer_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.footer_bottom div {
    position: relative;
    width: 100%;
    height: calc(var(--top-maring) / 2);
    background: #304C97;
}

.footer_bottom div::before {
    content: '';
    position: absolute;
    top: 0;
    right: calc(var(--side-margin) / 2);
    width: calc(var(--top-maring) / 2);
    height: calc(var(--top-maring) / 2);
    background: #B13594;
    border-radius: 50%;
}

.footer_bottom p {
    width: 100%;
    height: calc(var(--top-maring) / 2);
    padding-right: calc(var(--side-margin) / 2);
    font-size: 1rem;
    text-align: end;
    line-height: calc(var(--top-maring) / 2);
}
}

/* ---------------media(max-height: 400px)---------------- */

@media screen and (max-height: 400px) {
/* ----------HEADER---------- */

    .header_top {
        position: fixed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 10rem;
        z-index: -1;
    }

    .header_top_imgBx {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25rem;
        height: 6rem;
        margin-left: 2rem;
    }

    .header_top_imgBx img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .header_top ul {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        margin-right: 2rem;
    }

    .header_top ul li {
        list-style: none;
    }

    .header_top ul li a {
        text-decoration: none;
        color: #fff;
        font-size: 1.1rem;
    }

    .header_text {
        position: fixed;
        top: 50%;
        left: calc(var(--side-margin) / 2);
        transform: translateY(-50%);
        z-index: -1;
    }

    .header_text p {
        color: #fff;
        font-size: 1.5rem;
        line-height: 2.5rem;
    }

    .header_text p:nth-child(2) {
        margin-top: 3rem;
        color: #fff;
        font-size: 1rem;
        line-height: 1.8rem;
    }

    .header_contact {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25rem;
        height: 8rem;
        border-radius: 1.2rem;
        background: #304C97;
        transform: translate(calc(100vw - 27rem), calc(100vh - 18rem));
    }

    .header_magazine {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25rem;
        height: 8rem;
        border-radius: 1.2rem;
        background: #B13594;
        transform: translate(calc(100vw - 27rem), calc(100vh - 19rem));
    }

    .header_contact a,
    .header_magazine a {
        text-decoration: none;
    }

    .header_contact_imgBx, .header_magazine_imgBx {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 5rem;
        height: 5rem;
        background: #fff;
        border-radius: 50%;
    }

    .header_contact_imgBx img, .header_magazine_imgBx img {
        width: 3rem;
    }

    .header_contact_text p, .header_magazine_text p {
        width: 16rem;
        margin-left: 1rem;
        color: #fff;
        font-size: 1.2rem;
        line-height: 1.7;
    }

    .header_contact_text p:nth-child(2) {
        font-size: 1rem;
    }

    /* ----------SERVICE OVERVIEW---------- */

    .serviceOverview {
        flex-wrap: wrap;
    }

    .serviceOverview_circle {
        flex-wrap: wrap;
        position: relative;
    }

    .serviceOverview_circle .none {
        display: none;
    }

    .serviceOverview_circle_circle {
        width: 50vw;
        height: 50vw;
    }

    .serviceOverview_circle_circle h3 {
        font-size: 2.0rem;
    }

    #serviceOverview_title {
        font-size: 4.0rem;
    }

    .serviceOverview_circle_circle p {
        font-size: 1.6rem;
    }

    .serviceOverview_circle:nth-child(2) .none:last-child {
        display: block;
    }

    .serviceOverview_circle:last-child .serviceOverview_circle_circle:nth-child(4) p {
        position: absolute;
        width: 35rem;
        bottom: 21%;
        right: 55%;
    }

    .serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child::before {
        position: absolute;
        bottom: 45%;
        right: 100%;
    }

    .serviceOverview_circle:last-child .serviceOverview_circle_circle:last-child::after {
        width: 40vw;
        position: absolute;
        bottom: 45%;
        right: 40%;
    }

    .serviceOverview_circle:last-child p {
        width: 70%;
        margin-top: 1.2rem;
        color: #fff;
        font-size: 1.2rem;
        line-height: 1.7;
    }

    .slideIn {
        animation-name: slideInAnime;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    @keyframes slideInAnime {
        from {
            transform: translateX(-100%);
            opacity: 1;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .rotateIn {
        animation-name: rotateInAnime;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
        transform: rotateY(0deg);
    }

    @keyframes rotateInAnime {
        from {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(0deg);
        }
    }

    /* ----------Concept---------- */

    .concept {
        position: relative;
        width: 100%;
        height: 100%;
        background: #000000;
    }

    .concept_left {
        position: relative;
        bottom: auto;
        left: calc(var(--side-margin) / 2);
        width: 70vw;
        height: 100%;
        border-right: 2px solid #304C97;
        color: #fff;
        margin-top: 5rem;
    }

    .concept_left h2 {
        position: relative;
        width: 75vw;
        height: 12rem;
        color: #2188E4;
        font-size: 3rem;
        border-bottom: 2px solid #304C97;
        line-height: 12rem;
    }

    .concept_left h2::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 5vw;
        height: 5vw;
        background: #B13594;
        border-radius: 50%;
        transform: translate(-50%, 50%);
    }

    .concept_left h2 span {
        margin-left: 2rem;
        color: #fff;
        font-size: 1.5rem;
    }

    .concept_left h3 {
        margin: 2.5rem;
        font-size: 1.5rem;
        line-height: 1.7;
    }

    .concept_left p {
        font-size: 1rem;
        margin: 0 2.5rem 0 2.5rem;
        line-height: 1.7;
    }

    .concept_right {
        position: relative;
        color: #fff;
    }

    .concept_right_ball {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 15rem;
        height: 15rem;
        border: solid 1px #304C97;
        border-radius: 50%;
    }

    .concept_right_ball p {
        width: 80%;
        margin-top: .5rem;
        font-size: 1rem;
    }

    .concept_right_ball:first-child {
        position: absolute;
        top: 10%;
        left: calc((50% - 5vw) - 15vw);
    }

    .concept_right_ball:nth-child(2) {
        position: absolute;
        top: calc(10% + 7.5rem);
        left: calc((50% - 5vw + 9rem) - 15vw);
        width: 25rem;
        height: 25rem;
    }

    .concept_right_ball:nth-child(3) {
        position: absolute;
        top: calc(10% + 13rem);
        left: calc((50% + 28rem) - 15vw);
        width: 12rem;
        height: 12rem;
    }

    .concept_right_ball:nth-child(4) {
        position: absolute;
        top: calc(10% + 23.5rem);
        left: calc((50% + 23rem) - 15vw);
        width: 12rem;
        height: 12rem;
    }

    .concept_right_ball:nth-child(5) {
        position: absolute;
        top: calc(10% + 30.3rem);
        left: calc((50% + 14.7rem) - 15vw);
        width: 12rem;
        height: 12rem;
    }

    .concept_right_ball:nth-child(6) {
        position: absolute;
        top: calc(10% + 28rem);
        left: calc((50% + 32.5rem) - 15vw);
    }

    .concept_right_ball:nth-child(7) {
        position: absolute;
        bottom: 14%;
        left: calc((50% - 5vw - 7.5rem) - 20vw);
    }

    .concept_right_ball:nth-child(3) h2,
    .concept_right_ball:nth-child(4) h2,
    .concept_right_ball:nth-child(5) h2,
    .concept_right_ball:nth-child(7) h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .concept_right_yajirushi {
        position: absolute;
        bottom: calc(14% + 7.5rem);
        left: calc((50% - 5vw + 7.5rem - 1px) - 20vw);
        width: 1px;
        height: 20rem;
        background: #304C97;
        opacity: 0;
    }

    .concept_right_yajirushi::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        transform: rotate(-45deg);
        transform-origin: right;
        width: 5rem;
        height: 1px;
        background: #304C97;
    }

    .concept_right_ball:last-child {
        position: absolute;
        bottom: 14%;
        right: var(--side-margin);
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        background: #304C97;
    }

    .zoomIn {
        animation-name: zoomInAnime;
        animation-duration: .8s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .zoomIn:nth-child(2) {
        animation-delay: .2s;
    }

    .zoomIn:nth-child(3) {
        animation-delay: .4s;
    }

    .zoomIn:nth-child(4) {
        animation-delay: .6s;
    }

    .zoomIn:nth-child(5) {
        animation-delay: .8s;
    }

    .zoomIn:nth-child(6) {
        animation-delay: 1s;
    }

    .zoomIn:nth-child(7) {
        animation-delay: 1.2s;
    }

    @keyframes zoomInAnime {
        from {
            transform: scale(0);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .slideUp {
        animation-name: slideUpAnime;
        animation-duration: .8s;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
        opacity: 0;
    }

    @keyframes slideUpAnime {
        from {
            transform: translateY(25rem);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* ----------visualSolution---------- */

    .visualSolution {
        position: relative;
        width: 100%;
        height: 100%;
        background: #000000;
        overflow: hidden;
    }

    .visualSolution_bg_bar {
        width: 18%;
        height: 100%;
        background-color: #11447270;
        margin-left: calc(var(--side-margin) / 2);
        position: absolute;
    }

    .visualSolution_title {
        display: flex;
        align-items: center;
        flex-direction: row;
        width: 100%;
        border-top: solid var(--top-maring) #114472;
        border-bottom: solid calc(var(--top-maring) / 2) #114472;
    }

    .visualSolution_title div {
        margin-left: calc(var(--side-margin) / 2);
        width: var(--top-maring);
        height: var(--top-maring);
        background: #304C97;
        border-radius: 50%;
    }

    .visualSolution_title h2 {
        margin-left: 3rem;
        color: #2188E4;
        font-size: 3rem;
    }

    .visualSolution_title h2 span {
        margin-left: 2rem;
        color: #fff;
        font-size: 1.5rem;
    }

    .visualSolution_content {
        display: flex;
        justify-content: center;
        gap: 5vw;
        margin-top: var(--top-maring);
    }

    .visualSolution_content_container {
        width: 25vw;
        z-index: 1;
    }

    .visualSolution_content_container:nth-child(1) {
        transform: translateY(10vh);
        transition: 1s ease-in-out;
    }

    .visualSolution_content_container:nth-child(2) {
        transform: translateY(20vh);
        transition: 1s ease-in-out;
    }

    .visualSolution_content_container:nth-child(3) {
        transform: translateY(30vh);
        transition: 1s ease-in-out;
    }

    .visualSolution_content_container__imgBx {
        width: 100%;
    }

    .visualSolution_content_container__imgBx img {
        width: 100%;
    }

    .visualSolution_content_container h3 {
        color: #2188E4;
        font-size: 1.5rem;
        line-height: 1.2;
        padding: 1.6rem 0 1.6rem 0;
    }

    .visualSolution_content_container p {
        margin-bottom: 3rem;
        color: #fff;
        font-size: 1rem;
        line-height: 1.7;
    }

    .visualSolution_content_container a {
        padding: 1rem 2rem 1rem 3rem;
        background: #B13594;
        border-radius: .5rem;
        color: #fff;
        font-size: 1.2rem;
        text-transform: uppercase;
        text-decoration: none;
        transition: .5s;
    }

    .visualSolution_content_container a span {
        box-sizing: border-box;
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        border-top: solid 1px #fff;
        border-right: solid 1px #fff;
        transform: rotate(45deg);
        transition: .5s;
        opacity: 0;
    }

    .visualSolution_content_container a:hover span {
        margin-left: 1rem;
        font-size: 1.5rem;
        opacity: 1;
    }

    .visualSolution > div:last-of-type {
        position: absolute;
        bottom: 0;
        right: -2rem;
        color: #304C97;
        font-size: calc(var(--title-fontsize) / 1.5);
        transition: 1s;
        transform: translateX(80%);
    }



    /* -----visualSolution_animation----- */

    .visualSolution > div:last-of-type.appear01 {
        transform: none;
    }

    .visualSolution_content.appear01 .visualSolution_content_container:nth-child(1) {
        transform: translateY(0vh);
    }

    .visualSolution_content.appear01 .visualSolution_content_container:nth-child(2) {
        transform: translateY(0vh);
    }

    .visualSolution_content.appear01 .visualSolution_content_container:nth-child(3) {
        transform: translateY(0vh);
    }

    /* ----------promotion---------- */

    .promotion {
        position: relative;
        width: 100%;
        height: 100%;
        background: #304C97;
        overflow: hidden;
    }

    .promotion_bg_bar {
        position: absolute;
        top: 0;
        right: 0;
        width: 10%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        margin-right: calc((var(--side-margin) / 2) + var(--top-maring));
    }

    .promotion_title {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        width: 100%;
        margin-top: calc(var(--top-maring) / 2);
        border-top: solid calc(var(--top-maring) / 2) rgba(0, 0, 0, 0.1);
    }

    .promotion_title div {
        margin-right: calc(var(--side-margin) / 2);
        width: var(--top-maring);
        height: var(--top-maring);
        background: rgba(197, 197, 197, 0.4);
        border-radius: 50%;
    }

    .promotion_title h2 {
        margin-right: 3rem;
        color: #2188E4;
        font-size: 3rem;
    }

    .promotion_title h2 span {
        margin-left: 2rem;
        color: #fff;
        font-size: 1.5rem;
    }

    .promotion_content {
        display: flex;
        justify-content: center;
        gap: 5vw;
        margin-top: var(--top-maring);
    }

    .promotion_content_container {
        width: 25vw;
        z-index: 1;
    }

    .promotion_content_container:nth-child(1) {
        transform: translateY(30vh);
        transition: 1s ease-in-out;
    }

    .promotion_content_container:nth-child(2) {
        transform: translateY(20vh);
        transition: 1s ease-in-out;
    }

    .promotion_content_container:nth-child(3) {
        transform: translateY(10vh);
        transition: 1s ease-in-out;
    }

    .promotion_content_container__imgBx {
        width: 100%;
    }

    .promotion_content_container__imgBx img {
        width: 100%;
    }

    .promotion_content_container h3 {
        color: #2188E4;
        font-size: 1.5rem;
        line-height: 1.2;
        padding: 1.6rem 0 1.6rem 0;
        white-space: nowrap;
    }

    .promotion_content_container p {
        margin-bottom: 3rem;
        color: #fff;
        font-size: 1rem;
        line-height: 1.7;
    }

    .promotion > div:last-of-type {
        position: absolute;
        bottom: 0;
        left: -5rem;
        color: #2188E4;
        font-size: calc(var(--title-fontsize) / 1.5);
        transition: 1s;
        transform: translateX(-80%);
    }



    /* -----promotion_animation----- */

    .promotion > div:last-of-type.appear01 {
        transform: none;
    }

    .promotion_content.appear01 .promotion_content_container:nth-child(1) {
        transform: translateY(0vh);
    }

    .promotion_content.appear01 .promotion_content_container:nth-child(2) {
        transform: translateY(0vh);
    }

    .promotion_content.appear01 .promotion_content_container:nth-child(3) {
        transform: translateY(0vh);
    }

    /* ----------creativeProduct---------- */

    .creativeProduct {
        position: relative;
        width: 100%;
        height: 100%;
        background: #000000;
        overflow: hidden;
    }

    .creativeProduct_bg_bar {
        position: absolute;
        width: var(--top-maring);
        height: 100%;
        background-color: #11447270;
        margin-left: calc(var(--side-margin) / 2);
    }

    .creativeProduct_title {
        display: flex;
        align-items: center;
        flex-direction: row;
        width: 100%;
        border-top: solid var(--top-maring) #114472;
        border-bottom: solid calc(var(--top-maring) / 2) #114472;
    }

    .creativeProduct_title div {
        margin-left: calc(var(--side-margin) / 2);
        width: var(--top-maring);
        height: var(--top-maring);
        background: #304C97;
        border-radius: 50%;
    }

    .creativeProduct_title h2 {
        margin-left: 3rem;
        color: #2188E4;
        font-size: 3rem;
    }

    .creativeProduct_title h2 span {
        margin-left: 2rem;
        color: #fff;
        font-size: 1.5rem;
    }

    .creativeProduct_content {
        display: flex;
        justify-content: center;
        gap: 5vw;
        margin-top: var(--top-maring);
    }

    .creativeProduct_content_container {
        width: 25vw;
        z-index: 1;
    }

    .creativeProduct_content_container:nth-child(1) {
        transform: translateY(10vh);
        transition: 1s ease-in-out;
    }

    .creativeProduct_content_container:nth-child(2) {
        transform: translateY(20vh);
        transition: 1s ease-in-out;
    }

    .creativeProduct_content_container:nth-child(3) {
        transform: translateY(30vh);
        transition: 1s ease-in-out;
    }

    .creativeProduct_content_container__imgBx {
        width: 100%;
    }

    .creativeProduct_content_container__imgBx img {
        width: 100%;
    }

    .creativeProduct_content_container h3 {
        color: #2188E4;
        font-size: 1.5rem;
        line-height: 1.2;
        padding: 1.6rem 0 1.6rem 0;
    }

    .creativeProduct_content_container p {
        margin-bottom: 3rem;
        color: #fff;
        font-size: 1rem;
        line-height: 1.7;
    }

    .creativeProduct > div:last-of-type {
        position: absolute;
        bottom: 0;
        right: -5rem;
        color: #304C97;
        font-size: calc(var(--title-fontsize) / 1.5);
        transition: 1s;
        transform: translateX(80%);
    }



    /* -----creativeProduct_animation----- */

    .creativeProduct > div:last-of-type.appear01 {
        transform: none;
    }

    .creativeProduct_content.appear01 .creativeProduct_content_container:nth-child(1) {
        transform: translateY(0vh);
    }

    .creativeProduct_content.appear01 .creativeProduct_content_container:nth-child(2) {
        transform: translateY(0vh);
    }

    .creativeProduct_content.appear01 .creativeProduct_content_container:nth-child(3) {
        transform: translateY(0vh);
    }

    /* ----------designMaintenance---------- */

    .designMaintenance {
        position: relative;
        width: 100%;
        height: 100%;
        background: #304C97;
        overflow: hidden;
    }

    .designMaintenance_bg_bar {
        position: absolute;
        top: 0;
        right: 0;
        width: var(--top-maring);
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        margin-right: calc(var(--side-margin) / 2);
    }

    .designMaintenance_title {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        width: 100%;
        margin-top: var(--top-maring);
        border-bottom: solid calc(var(--top-maring) / 2) rgba(0, 0, 0, 0.1);
    }

    .designMaintenance_title div {
        margin-right: calc(var(--side-margin) / 2);
        width: var(--top-maring);
        height: var(--top-maring);
        background: rgba(197, 197, 197, 0.4);
        border-radius: 50%;
    }

    .designMaintenance_title div::before {
        content: '';
        width: 50rem;
        height: 50rem;
        background: #707070;
        transform: translateY(-10rem);
    }

    .designMaintenance_title h2 {
        margin-right: 3rem;
        color: #2188E4;
        font-size: 3rem;
    }

    .designMaintenance_title h2 br {
        display: none;
    }

    .designMaintenance_title h2 span {
        margin-left: 2rem;
        color: #fff;
        font-size: 1.5rem;
    }

    .designMaintenance_content {
        display: flex;
        justify-content: center;
        gap: 5vw;
        margin-top: var(--top-maring);
    }

    .designMaintenance_content_container {
        width: 25vw;
        z-index: 1;
    }

    .designMaintenance_content_container:nth-child(1) {
        transform: translateY(30vh);
        transition: 1s ease-in-out;
    }

    .designMaintenance_content_container:nth-child(2) {
        transform: translateY(20vh);
        transition: 1s ease-in-out;
    }

    .designMaintenance_content_container:nth-child(3) {
        transform: translateY(10vh);
        transition: 1s ease-in-out;
    }

    .designMaintenance_content_container__imgBx {
        width: 100%;
    }

    .designMaintenance_content_container__imgBx img {
        width: 100%;
    }

    .designMaintenance_content_container h3 {
        color: #2188E4;
        font-size: 1.5rem;
        line-height: 1.2;
        padding: 1.6rem 0 1.6rem 0;
    }

    .designMaintenance_content_container p {
        margin-bottom: 3rem;
        color: #fff;
        font-size: 1rem;
        line-height: 1.7;
    }

    .designMaintenance > div:last-of-type {
        position: absolute;
        bottom: 0;
        left: -5rem;
        color: #2188E4;
        font-size: calc(var(--title-fontsize) / 1.5);
        transition: 1s;
        transform: translateX(-80%);
    }



    /* -----designMaintenance_animation----- */

    .designMaintenance > div:last-of-type.appear01 {
        transform: none;
    }

    .designMaintenance_content.appear01 .designMaintenance_content_container:nth-child(1) {
        transform: translateY(0vh);
    }

    .designMaintenance_content.appear01 .designMaintenance_content_container:nth-child(2) {
        transform: translateY(0vh);
    }

    .designMaintenance_content.appear01 .designMaintenance_content_container:nth-child(3) {
        transform: translateY(0vh);
    }

    /* ----------photographer---------- */

    .photographer {
        position: relative;
        width: 100%;
        background: #000000;
        overflow: hidden;
    }

    .photographer_topright {
        position: absolute;
        top: 5rem;
        right: calc(var(--side-margin) / 2);
        font-size: 1rem;
        color: #fff;
        z-index: 1;
        transition: .5s ease-in-out;
        transition-delay: .5s;

        transform: translateY(20rem);
        opacity: 0;
    }

    .photographer_circle_ball1 {
        position: absolute;
        top: calc(-1 * (5rem - 2.5vw));
        right: -6rem;
        width: 30rem;
        height: 30rem;
        background: #304C9755;
        outline: none;
        border: solid 2rem #304C97;
        border-radius: 50%;
        transition: .5s ease-in-out;

        transform: translateX(20rem);
        opacity: 0;
    }

    .photographer_circle_ball1::before {
        content: '';
        position: absolute;
        top: calc(50% - 2px);
        left: 0;
        width: 0%;
        height: 4px;
        background: #304C97;
        transition: .5s ease-in-out;
        transition-delay: .5s;
    }

    .photographer_circle_ball2 {
        position: absolute;
        bottom: calc(-5rem);
        left: -6rem;
        width: 30rem;
        height: 30rem;
        background: #304C9755;
        outline: none;
        border: solid 2rem #304C97;
        border-radius: 50%;
        transition: .5s ease-in-out;

        transform: translateX(-20rem);
        opacity: 0;
    }

    .photographer_circle_ball2::before {
        content: '';
        position: absolute;
        top: calc(50% - 2px);
        right: calc(-50% - 19rem);
        width: 30rem;
        height: 4px;
        background: #304C97;
    }

    .photographer_circle_ball3 {
        position: absolute;
        bottom: var(--top-maring);
        right: var(--side-margin);
        width: var(--top-maring);
        height: var(--top-maring);
        background: #B13594;
        border-radius: 50%;
    }

    .photographer_title {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: row;
        width: 100%;
        margin-top: var(--top-maring);
        margin-bottom: calc(var(--top-maring) / 2);
    }

    .photographer_title div {
        margin-left: calc(var(--side-margin) / 2);
        width: var(--top-maring);
        height: var(--top-maring);
        background: #304C97;
        border-radius: 50%;
    }

    .photographer_title h2 {
        margin-left: 3rem;
        color: #2188E4;
        font-size: 3rem;
    }

    .photographer_title h2 span {
        margin-left: 2rem;
        color: #fff;
        font-size: 1.5rem;
    }

    .photographer_contents {
        width: 100%;
        margin-bottom: 30rem;
    }

    .photographer_container {
        width: 60vw;
        margin-left: calc(var(--side-margin) + ((((40vw - (var(--side-margin) * 2)) / 4) * var(--photographer_container))));
        margin-bottom: 5rem;
        transition: .8s ease-in-out;

        transform: translateX(-20rem);
        opacity: 0;
    }

    .photographer_container_imgBx {
        position: relative;
        width: 100%;
    }

    .photographer_container_imgBx:before {
        content: '';
        position: absolute;
        top: 0;
        width: 8%;
        height: 200%;
        background: #000000;
        border-right: solid 1px #304C97;
        transform-origin: top right;
        transform: rotate(15deg);
    }

    .photographer_container_imgBx img {
        width: 100%;
    }

    .photographer_container_textBx {
        width: 100%;
        display: flex;
    }

    .photographer_container_textBx h3 {
        width: 25%;
        color: #2188E4;
        font-size: 1.8rem;
    }

    .photographer_container_textBx p {
        width: 75%;
        color: #fff;
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .photographer_bottomleft {
        position: absolute;
        bottom: 3rem;
        left: 30rem;
        color: #fff;
        font-size: 1.2rem;
        transition: .5s;

        transform: translateX(20rem);
        opacity: 0;
    }



    /* -----photographer_animation----- */

    .photographer.appear01 .photographer_topright {
        transform: translateY(0);
        opacity: 1;
    }

    .photographer.appear01 .photographer_circle_ball1 {
        transform: translateX(0);
        opacity: 1;
    }

    .photographer.appear01 .photographer_circle_ball1::before {
        left: calc(-50% - 19rem);
        width: 30rem;
    }

    .photographer_circle_ball2.appear01 {
        transform: translateX(0);
        opacity: 1;
    }

    .photographer_container.appear01 {
        transform: translateX(0);
        opacity: 1;
    }

    .photographer_bottomleft.appear01 {
        transform: translateY(0);
        opacity: 1;
    }

    /* ----------corporateActivities---------- */

    .corporateActivities {
        position: relative;
        width: 100%;
        background: #C5C5C5;
        padding-bottom: 10rem;
        overflow: hidden;
    }

    .corporateActivities_title {
        width: 100%;
        border-top: solid calc(var(--top-maring) / 2) #707070;
    }

    .corporateActivities_title h2 {
        margin-left: calc(var(--side-margin) / 2);
        color: #2188E4;
        font-size: 1.8rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .corporateActivities_title h2 span {
        margin-left: .5rem;
        color: #fff;
        font-size: 1.2rem;
    }

    .corporateActivities_sheet {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: calc(100% - (var(--side-margin) * 1));
        margin: 0 calc(var(--side-margin) / 2);
        background: #eeeeee;
        border-radius: 3rem;
    }

    .corporateActivities_sheet > p {
        width: 90%;
        padding-top: 2rem;
        border-bottom: solid 1px #2188E4;
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .corporateActivities_sheet_toptext {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        width: 90%;
        padding: 1rem 0;
        border-bottom: solid 1px #2188E4;
    }

    .corporateActivities_sheet_toptext_textBx {
        width: 95%;
    }

    .corporateActivities_sheet_toptext_textBx p {
        line-height: 1.7;
    }

    .corporateActivities_sheet_toptext_imgBx {
        width: 95%;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .corporateActivities_sheet_centertext {
        width: 90%;
        margin-top: 2rem;
    }

    .corporateActivities_sheet_centertext > p {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .corporateActivities_sheet_centertext_SDGs {
        justify-content: center;
        align-items: center;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .corporateActivities_sheet_centertext_SDGs_imgBx {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        width: 100%;
    }

    .corporateActivities_sheet_centertext_SDGs_imgBx img {
        width: calc(33% - 1rem);
    }

    .corporateActivities_sheet_centertext_SDGs_imgBx img:first-child {
        width: 100%;
    }

    .corporateActivities_sheet_centertext_SDGs p {
        width: 100%;
        line-height: 1.8rem;
    }

    .corporateActivities_sheet_centertext_imgBx {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding-bottom: 1rem;
        width: 100%;
    }

    .corporateActivities_sheet_centertext_imgBx img {
        width: 15vw;
        height: 100%;
    }

    .corporateActivities_company {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: calc(100% - (var(--side-margin) * 1));
        margin: 0 calc(var(--side-margin) / 2);
        margin-top: 5rem;
        background: #eeeeee;
        border-radius: 3rem;
        z-index: 10;
    }

    .corporateActivities_company::before {
        content: '';
        position: absolute;
        top: -5rem;
        left: 0;
        width: 100vw;
        height: 10rem;
        background: #70707000;
    }

    .corporateActivities_company h2 {
        width: 90%;
        padding-top: 1rem;
        padding-left: 1rem;
        padding-bottom: 1rem;
        border-bottom: solid 1px #2188E4;
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .corporateActivities_company_text {
        display: block;
        justify-content: center;
        gap: 1rem;
        width: 90%;
        padding: 1rem 0;
    }

    .corporateActivities_company_text p:first-child {
        width: 100%;
    }

    .corporateActivities_company_text p:last-child {
        width: 100%;
        margin: 0;
        text-align: end;
    }

    .corporateActivities_company_text div h3 {
        font-size: 1.5rem 
    }

    .corporateActivities_company_text img {
        width: 25%;
    }

    .corporateActivities_circle_ball1 {
        position: absolute;
        top: 40rem;
        right: calc(-1 * var(--side-margin));
        width: calc(var(--side-margin) * 3 / 2);
        height: calc(var(--side-margin) * 3 / 2);
        background: #7E8BAF;
        border-radius: 50%;
    }

    .corporateActivities_circle_ball1::before {
        content: '';
        position: absolute;
        bottom: calc(var(--side-margin) * -1);
        left: 0;
        width: 100%;
        height: var(--side-margin);
        background: #70707070;
    }

    .corporateActivities_circle_ball1::after {
        content: '';
        position: absolute;
        bottom: calc(var(--side-margin) * -2);
        left: 0;
        width: 100%;
        height: var(--side-margin);
        background: #fff;
    }

    .corporateActivities_circle_ball2 {
        position: absolute;
        top: calc((var(--side-margin) * 3 / 2) + 40rem);
        left: 0;
        width: calc(var(--side-margin) / 2);
        height: var(--side-margin);
        background: #70707070;
    }

    .corporateActivities_circle_ball2::before {
        content: '';
        position: absolute;
        bottom: calc(var(--side-margin) * -1);
        right: 0;
        width: 100%;
        height: var(--side-margin);
        background: #fff
    }

    .corporateActivities_circle_ball2::after {
        content: '';
        position: absolute;
        bottom: calc(-1 * var(--side-margin));
        right: 0;
        width: var(--side-margin);
        height: var(--side-margin);
        background: #2188E4;
        border-radius: 50%;
    }

    .corporateActivities_circle_ball3 {
        position: absolute;
        bottom: calc(var(--side-margin) * 2);
        left: calc(var(--side-margin) * -2.5);
        width: calc(var(--side-margin) * 3);
        height: calc(var(--side-margin) * 3);
        background: #70707070;
        border-radius: 50%;
    }

    /* ----------footer---------- */

    footer {
        position: relative;
        width: 100%;
        height: 100%;
        background: #000000;
        color: #fff;
    }

    .footer_container {
        display: block;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding-top: var(--top-maring);
        padding-bottom: calc(var(--top-maring) * 2.5);
        border-top: solid var(--top-maring) #304C97;
    }

    .footer_left {
        margin-left: calc(var(--side-margin) / 2);
    }

    .footer_left img {
        margin-bottom: 2rem;
    }

    .footer_left > div {
        display: flex;
    }

    .footer_left_name {
        width: 15rem;
        height: 4rem;
    }

    .footer_left_detail {
        width: 28rem;
        height: 4rem;
        text-decoration: none;
    }

    .footer_left_detail p,
    .footer_left_name p {
        line-height: 4rem;
        font-size: 1.2rem;
        border-bottom: solid 1px #304C97;
    }

    .footer_right {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
        margin-top: 28rem;
        margin-right: calc(var(--side-margin) / 2);
    }

    .footer_right_iconBx {
        height: 5rem;
        margin: 0 2rem 1rem 0;
    }

    .footer_right_iconBx a {
        color: #fff;
        font-size: 5rem;
        margin-left: 2rem;
    }

    .footer_right_textBx {
        display: flex;
    }

    .footer_right_textBx a {
        text-align: center;
        border-right: solid 1px #fff;
        text-decoration: none;
        color: #fff;
        padding: 0 2rem;
        font-size: 1.2rem;
    }

    .footer_right_textBx a:last-child {
        border-right: none;
        text-align: right;
    }

    .footer_bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .footer_bottom div {
        position: relative;
        width: 100%;
        height: var(--top-maring);
        background: #304C97;
    }

    .footer_bottom div::before {
        content: '';
        position: absolute;
        top: 0;
        right: calc(var(--side-margin) / 2);
        width: var(--top-maring);
        height: var(--top-maring);
        background: #B13594;
        border-radius: 50%;
    }

    .footer_bottom p {
        width: 100%;
        height: var(--top-maring);
        padding-right: calc(var(--side-margin) / 2);
        font-size: 1.2rem;
        text-align: end;
        line-height: var(--top-maring);
    }
}