@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
    visibility: hidden;
}

html.wf-active, html.wfno-load {
    visibility: visible;
}

body {
    font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.4rem;
    letter-spacing: 2px;
    color: #333333;
    background-color: #FAF9F7;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    body {
        font-family: noto-sans-cjk-jp, sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 1.2rem;
        letter-spacing: 2px;
        color: #333333;
        background-color: #FAF9F7;
        margin: 0;
        padding: 0;
    }
}

img {
    margin: 0;
    padding: 0;
	height: auto;
    vertical-align:top;
    font-size: 0;
    line-height: 0;
}

input[type="submit"] {
    -webkit-appearance: none;
}

.letterSp {
    letter-spacing: 0px;
}

.letterNon {
    letter-spacing: -0.5em;
}

.dis-no {
    display: none;
}

.pt-events {
    pointer-events: none;
    text-decoration: none;
    color: #333333;
}

/*
font-family: noto-sans-cjk-jp, sans-serif;
font-weight: 900;
font-weight: 700;
font-weight: 500;
font-weight: 400;
font-weight: 300;
*/

/*-----
    Button
-----*/
/*----- Button-lg -----*/
.button__Wrapper.Lg button{
    background-color: transparent;
    border: none;
}

.button__Wrapper.Lg button a {
    display: flex;
    align-items: center;
    gap: 50px;
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: #333333;
    text-decoration: none;
}

.button__Wrapper.Lg button a .Icon {
    width: 100px;
    height: 100px;
    position: relative;
}

.button__Wrapper.Lg button a .Icon img {
    width: 30px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) translateY(-50%);
}

.button__Wrapper.Lg button a .Icon span.Bg {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #63b0c4;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.button__Wrapper.Lg button a:hover .Icon {
    transform: translateX(25px);
    transition: 0.3s all;
}

.button__Wrapper.Lg button a:hover .Icon span.Bg {
    display: inline-block;
    width: 125px;
    height: 125px;
    background-color: #63b0c4;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.3s all;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .button__Wrapper.Lg button{
        background-color: transparent;
        border: none;
    }
    
    .button__Wrapper.Lg button a {
        display: flex;
        align-items: center;
        gap: 40px;
        font-weight: 500;
        font-size: 1.4rem;
        letter-spacing: 2px;
        color: #333333;
        text-decoration: none;
    }
    
    .button__Wrapper.Lg button a .Icon {
        width: 80px;
        height: 80px;
        position: relative;
    }
    
    .button__Wrapper.Lg button a .Icon img {
        width: 25px;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .button__Wrapper.Lg button a .Icon span.Bg {
        display: inline-block;
        width: 80px;
        height: 80px;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .button__Wrapper.Lg button a:hover .Icon {
        transform: translateX(0px);
        transition: 0s all;
    }
    
    .button__Wrapper.Lg button a:hover .Icon span.Bg {
        display: inline-block;
        width: 80px;
        height: 80px;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 0%;
        left: 0%;
        transform: translateX(0%) translateY(0%);
        transition: 0s all;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .button__Wrapper.Lg button{
        background-color: transparent;
        border: none;
    }
    
    .button__Wrapper.Lg button a {
        display: flex;
        align-items: center;
        gap: 35px;
        font-weight: 500;
        font-size: 1.2rem;
        letter-spacing: 2px;
        color: #333333;
        text-decoration: none;
    }
    
    .button__Wrapper.Lg button a .Icon {
        width: 70px;
        height: 70px;
        position: relative;
    }
    
    .button__Wrapper.Lg button a .Icon img {
        width: 25px;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .button__Wrapper.Lg button a .Icon span.Bg {
        display: inline-block;
        width: 70px;
        height: 70px;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .button__Wrapper.Lg button a:hover .Icon {
        transform: translateX(0px);
        transition: 0s all;
    }
    
    .button__Wrapper.Lg button a:hover .Icon span.Bg {
        display: inline-block;
        width: 70px;
        height: 70px;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 0%;
        left: 0%;
        transform: translateX(0%) translateY(0%);
        transition: 0s all;
    }
}/*----- /Button-lg -----*/

/*----- Button-md -----*/
/*--- Right ---*/
.button__Wrapper.Md button{
    background-color: transparent;
    border: none;
}

.button__Wrapper.Md button a {
    text-decoration: none;
}

.button__Wrapper.Md button a .Icon {
    width: 50px;
    height: 50px;
    position: relative;
}

.button__Wrapper.Md button a .Icon img {
    width: 25px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) translateY(-50%);
}

.button__Wrapper.Md button a .Icon span.Bg {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #63b0c4;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.button__Wrapper.Md button a:hover .Icon.R {
    transform: translateX(25px);
    transition: 0.3s all;
}

.button__Wrapper.Md button a:hover .Icon.R span.Bg {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #63b0c4;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.3s all;
}

/*--- Left ---*/
.button__Wrapper.Md button a .Icon.L img {
    width: 25px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) translateY(-50%) rotate(180deg);
}

.button__Wrapper.Md button a:hover .Icon.L {
    transform: translateX(-25px);
    transition: 0.3s all;
}

.button__Wrapper.Md button a:hover .Icon.L span.Bg {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #63b0c4;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.3s all;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    /*--- Right ---*/
    .button__Wrapper.Md button a:hover .Icon.R {
        transform: translateX(0px);
        transition: 0s all;
    }
    
    .button__Wrapper.Md button a:hover .Icon.R span.Bg {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 0s all;
    }

    /*--- Left ---*/
    .button__Wrapper.Md button a:hover .Icon.L {
        transform: translateX(0px);
        transition: 0s all;
    }
    
    .button__Wrapper.Md button a:hover .Icon.L span.Bg {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 0s all;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    /*--- Right ---*/
    .button__Wrapper.Md button a:hover .Icon.R {
        transform: translateX(0px);
        transition: 0s all;
    }
    
    .button__Wrapper.Md button a:hover .Icon.R span.Bg {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 0s all;
    }

    /*--- Left ---*/
    .button__Wrapper.Md button a:hover .Icon.L {
        transform: translateX(0px);
        transition: 0s all;
    }
    
    .button__Wrapper.Md button a:hover .Icon.L span.Bg {
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 0s all;
    }
}

/*----- Button-Hexagon -----*/
.button__Wrapper.Hexagon button{
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.button__Wrapper.Hexagon button a {
    display: inline-block;
    text-decoration: none;
}

.button__Wrapper.Hexagon button a .Icon {
    width: 100px;
    height: 100px;
    position: relative;
}

.button__Wrapper.Hexagon button a .Icon img:nth-of-type(1) {
    width: auto;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%) translateY(-50%);
}

.button__Wrapper.Hexagon button a .Icon img:nth-of-type(2) {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%) translateY(-50%);
}

.button__Wrapper.Hexagon button a:hover .Icon {
    width: 125px;
    height: 125px;
    position: relative;
    transform: translateX(-12.5px) translateY(-50%);
    transition: 0.3s all;
}

.button__Wrapper.Hexagon button a:hover .Icon img:nth-of-type(2) {
    display: inline-block;
    width: 125px;
    height: 125px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.3s all;
}

.button__Wrapper.Hexagon button a .Icon p {
    width: 100%;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 5px;
    color: #63b0c4;
    position: absolute;
    bottom: calc(-15px - 15px);
    left: calc(50% + 5px);
    transform: translateX(-50%);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .button__Wrapper.Hexagon button{
        background-color: transparent;
        border: none;
    }
    
    .button__Wrapper.Hexagon button a {
        display: inline-block;
        text-decoration: none;
    }
    
    .button__Wrapper.Hexagon button a .Icon {
        width: 80px;
        height: 80px;
        position: relative;
    }
    
    .button__Wrapper.Hexagon button a .Icon img:nth-of-type(1) {
        width: auto;
        height: 25px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .button__Wrapper.Hexagon button a .Icon img:nth-of-type(2) {
        display: inline-block;
        width: 80px;
        height: 80px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 5;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .button__Wrapper.Hexagon button a:hover .Icon {
        width: 80px;
        height: 80px;
        position: relative;
        transform: translateX(0) translateY(0%);
        transition: 0s all;
    }
    
    .button__Wrapper.Hexagon button a:hover .Icon img:nth-of-type(2) {
        display: inline-block;
        width: 80px;
        height: 80px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 5;
        transform: translateX(-50%) translateY(-50%);
        transition: 0s all;
    }

    .button__Wrapper.Hexagon button a .Icon p {
        width: 100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 4px;
        color: #63b0c4;
        position: absolute;
        bottom: calc(-15px - 15px);
        left: calc(50% + 4px);
        transform: translateX(-50%);
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .button__Wrapper.Hexagon button{
        background-color: transparent;
        border: none;
    }
    
    .button__Wrapper.Hexagon button a {
        display: inline-block;
        text-decoration: none;
    }
    
    .button__Wrapper.Hexagon button a .Icon {
        width: 70px;
        height: 70px;
        position: relative;
    }
    
    .button__Wrapper.Hexagon button a .Icon img:nth-of-type(1) {
        width: auto;
        height: 25px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .button__Wrapper.Hexagon button a .Icon img:nth-of-type(2) {
        display: inline-block;
        width: 70px;
        height: 70px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 5;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .button__Wrapper.Hexagon button a:hover .Icon {
        width: 70px;
        height: 70px;
        position: relative;
        transform: translateX(0) translateY(0%);
        transition: 0s all;
    }
    
    .button__Wrapper.Hexagon button a:hover .Icon img:nth-of-type(2) {
        display: inline-block;
        width: 70px;
        height: 70px;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 5;
        transform: translateX(-50%) translateY(-50%);
        transition: 0s all;
    }

    .button__Wrapper.Hexagon button a .Icon p {
        width: 100%;
        height: auto;
        font-weight: 700;
        font-size: 1.2rem;
        letter-spacing: 3px;
        color: #63b0c4;
        position: absolute;
        bottom: calc(-15px - 10px);
        left: calc(50% + 3px);
        transform: translateX(-50%);
    }
}

/*----- Button-Menu Circle  -----*/
.button__Wrapper.Menu.Circle button {
    display: inline-block;
    width: 100%;
    border: none;
    background-color: transparent;
}

.button__Wrapper.Menu.Circle button a {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 2px;
    padding: 0 0 20px 0;
    border-bottom: solid 1px #a3cacc;
    color: #333333;
    text-decoration: none;
    text-align: left;
    position: relative;
}

.button__Wrapper.Menu.Circle button a::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #a3cacc;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 10px);
    right: 0;
    transform: translateY(-50%);
}

.button__Wrapper.Menu.Circle button a:hover {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 2px;
    padding: 0 0 40px 0;
    border-bottom: solid 1px #a3cacc;
    color: #333333;
    text-decoration: none;
    text-align: left;
    position: relative;
    transition: 0.3s all;
}

.button__Wrapper.Menu.Circle button a:hover::before {
    content: '';
    width: 15px;
    height: 15px;
    background-color: #a3cacc;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 20px);
    right: 0;
    transform: translateY(-50%) translateX(5px);
    transition: 0.3s all;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .button__Wrapper.Menu.Circle button {
        display: inline-block;
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Menu.Circle button a {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
    }
    
    .button__Wrapper.Menu.Circle button a::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 10px);
        right: 0;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Menu.Circle button a:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        transition: 0s all;
    }
    
    .button__Wrapper.Menu.Circle button a:hover::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 10px);
        right: 0;
        transform: translateY(-50%) translateX(0px);
        transition: 0s all;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .button__Wrapper.Menu.Circle button {
        display: inline-block;
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Menu.Circle button a {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
    }
    
    .button__Wrapper.Menu.Circle button a::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 10px);
        right: 0;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Menu.Circle button a:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        transition: 0s all;
    }
    
    .button__Wrapper.Menu.Circle button a:hover::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 10px);
        right: 0;
        transform: translateY(-50%) translateX(0px);
        transition: 0s all;
    }
}

/*----- Button-Menu Plus  -----*/
.button__Wrapper.Menu.Plus button {
    display: inline-block;
    width: 100%;
    border: none;
    background-color: transparent;
}

.button__Wrapper.Menu.Plus button p {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 2px;
    padding: 0 0 20px 0;
    border-bottom: solid 1px #a3cacc;
    color: #333333;
    text-decoration: none;
    text-align: left;
    position: relative;
    cursor: pointer;
}

.button__Wrapper.Menu.Plus button p::before {
    content: '';
    width: 15px;
    height: 2px;
    background-color: #a3cacc;
    position: absolute;
    top: calc(50% - 7.5px);
    right: 0px;
    transform: translateY(-50%);
}

.button__Wrapper.Menu.Plus button p::after {
    content: '';
    width: 2px;
    height: 15px;
    background-color: #a3cacc;
    position: absolute;
    top: calc(50% - 7.5px);
    right: 6px;
    transform: translateY(-50%);
}

.button__Wrapper.Menu.Plus button p:hover {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 2px;
    padding: 0 0 40px 0;
    border-bottom: solid 1px #a3cacc;
    color: #333333;
    text-decoration: none;
    text-align: left;
    position: relative;
    cursor: pointer;
    transition: 0.3s all;
}

.button__Wrapper.Menu.Plus button p:hover::before {
    content: '';
    width: 20px;
    height: 2px;
    background-color: #a3cacc;
    position: absolute;
    top: calc(50% - 17.5px);
    right: -3px;
    transform: translateY(-50%);
}

.button__Wrapper.Menu.Plus button p:hover::after {
    content: '';
    width: 2px;
    height: 20px;
    background-color: #a3cacc;
    position: absolute;
    top: calc(50% - 17.5px);
    right: 6px;
    transform: translateY(-50%);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .button__Wrapper.Menu.Plus button {
        display: inline-block;
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Menu.Plus button p {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        cursor: pointer;
    }
    
    .button__Wrapper.Menu.Plus button p::before {
        content: '';
        width: 15px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: calc(50% - 7.5px);
        right: 0px;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Menu.Plus button p::after {
        content: '';
        width: 2px;
        height: 15px;
        background-color: #a3cacc;
        position: absolute;
        top: calc(50% - 7.5px);
        right: 6px;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Menu.Plus button p:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        cursor: pointer;
        transition: 0.3s all;
    }
    
    .button__Wrapper.Menu.Plus button p:hover::before {
        content: '';
        width: 15px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: calc(50% - 7.5px);
        right: 0px;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Menu.Plus button p:hover::after {
        content: '';
        width: 2px;
        height: 15px;
        background-color: #a3cacc;
        position: absolute;
        top: calc(50% - 7.5px);
        right: 6px;
        transform: translateY(-50%);
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .button__Wrapper.Menu.Plus button {
        display: inline-block;
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Menu.Plus button p {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        cursor: pointer;
    }
    
    .button__Wrapper.Menu.Plus button p::before {
        content: '';
        width: 15px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: calc(50% - 7.5px);
        right: 0px;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Menu.Plus button p::after {
        content: '';
        width: 2px;
        height: 15px;
        background-color: #a3cacc;
        position: absolute;
        top: calc(50% - 7.5px);
        right: 6px;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Menu.Plus button p:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        cursor: pointer;
        transition: 0.3s all;
    }
    
    .button__Wrapper.Menu.Plus button p:hover::before {
        content: '';
        width: 15px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: calc(50% - 7.5px);
        right: 0px;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Menu.Plus button p:hover::after {
        content: '';
        width: 2px;
        height: 15px;
        background-color: #a3cacc;
        position: absolute;
        top: calc(50% - 7.5px);
        right: 6px;
        transform: translateY(-50%);
    }
}

/*----- Button Header-Menu Plus  -----*/
.button__Wrapper.Header-Menu.Plus button {
    display: inline-block;
    width: 100%;
    border: none;
    background-color: transparent;
}

.button__Wrapper.Header-Menu.Plus button p {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 2px;
    padding: 0 0 30px 0;
    border-bottom: solid 1px #a3cacc;
    color: #333333;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.button__Wrapper.Header-Menu.Plus button p::after {
    content: attr(data-en);
    width: 100%;
    height: auto;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #333333;
    position: absolute;
    top: 25px;
    left: 1px;
}

.button__Wrapper.Header-Menu.Plus button p:hover {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 2px;
    padding: 0 0 40px 0;
    border-bottom: solid 1px #a3cacc;
    color: #333333;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: 0.3s all;
}

.button__Wrapper.Header-Menu.Plus button p span {
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 5.5px;
    right: 0;
}

.button__Wrapper.Header-Menu.Plus button p span::before {
    content: '';
    width: 15px;
    height: 2px;
    background-color: #a3cacc;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.button__Wrapper.Header-Menu.Plus button p span::after {
    content: '';
    width: 2px;
    height: 15px;
    background-color: #a3cacc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.button__Wrapper.Header-Menu.Plus button p:hover span {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5.5px;
    right: -3px;
    transition: 0.3s all;
}

.button__Wrapper.Header-Menu.Plus button p:hover span::before {
    content: '';
    width: 20px;
    height: 2px;
    background-color: #a3cacc;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.button__Wrapper.Header-Menu.Plus button p:hover span::after {
    content: '';
    width: 2px;
    height: 20px;
    background-color: #a3cacc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .button__Wrapper.Header-Menu.Plus button {
        display: inline-block;
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Header-Menu.Plus button p {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.8rem;
        letter-spacing: 2px;
        padding: 0 0 30px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
        position: relative;
    }
    
    .button__Wrapper.Header-Menu.Plus button p::after {
        content: attr(data-en);
        width: 100%;
        height: auto;
        font-weight: 700;
        font-size: 1.2rem;
        letter-spacing: 0px;
        color: #333333;
        position: absolute;
        top: 25px;
        left: 1px;
    }
    
    .button__Wrapper.Header-Menu.Plus button p:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.8rem;
        letter-spacing: 2px;
        padding: 0 0 30px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
        position: relative;
        transition: 0s all;
    }
    
    .button__Wrapper.Header-Menu.Plus button p span {
        display: inline-block;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 5.5px;
        right: 0;
    }
    
    .button__Wrapper.Header-Menu.Plus button p span::before {
        content: '';
        width: 15px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Header-Menu.Plus button p span::after {
        content: '';
        width: 2px;
        height: 15px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .button__Wrapper.Header-Menu.Plus button p:hover span {
        display: inline-block;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 5.5px;
        right: 0px;
        transition: 0 all;
    }
    
    .button__Wrapper.Header-Menu.Plus button p:hover span::before {
        content: '';
        width: 15px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Header-Menu.Plus button p:hover span::after {
        content: '';
        width: 2px;
        height: 15px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .button__Wrapper.Header-Menu.Plus button {
        display: inline-block;
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Header-Menu.Plus button p {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 2px;
        padding: 0 0 30px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
        position: relative;
    }
    
    .button__Wrapper.Header-Menu.Plus button p::after {
        content: attr(data-en);
        width: 100%;
        height: auto;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0px;
        color: #333333;
        position: absolute;
        top: 25px;
        left: 1px;
    }
    
    .button__Wrapper.Header-Menu.Plus button p:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 2px;
        padding: 0 0 30px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
        position: relative;
        transition: 0s all;
    }
    
    .button__Wrapper.Header-Menu.Plus button p span {
        display: inline-block;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 5.5px;
        right: 0;
    }
    
    .button__Wrapper.Header-Menu.Plus button p span::before {
        content: '';
        width: 15px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Header-Menu.Plus button p span::after {
        content: '';
        width: 2px;
        height: 15px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .button__Wrapper.Header-Menu.Plus button p:hover span {
        display: inline-block;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 5.5px;
        right: 0px;
        transition: 0 all;
    }
    
    .button__Wrapper.Header-Menu.Plus button p:hover span::before {
        content: '';
        width: 15px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Header-Menu.Plus button p:hover span::after {
        content: '';
        width: 2px;
        height: 15px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}

/*----- Button-Menu Plus  -----*/
.button__Wrapper.Menu.Plus.Content button p {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 2px;
    padding: 0 0 20px 0;
    border-bottom: none;
    color: #333333;
    text-decoration: none;
    text-align: left;
    position: relative;
    cursor: pointer;
}

.button__Wrapper.Menu.Plus.Content button p:hover {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 2px;
    padding: 0 0 40px 0;
    border-bottom: none;
    color: #333333;
    text-decoration: none;
    text-align: left;
    position: relative;
    cursor: pointer;
    transition: 0.3s all;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .button__Wrapper.Menu.Plus.Content button p {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: none;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        cursor: pointer;
    }
    
    .button__Wrapper.Menu.Plus.Content button p:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: none;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        cursor: pointer;
        transition: 0s all;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .button__Wrapper.Menu.Plus.Content button p {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: none;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        cursor: pointer;
    }
    
    .button__Wrapper.Menu.Plus.Content button p:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 2px;
        padding: 0 0 20px 0;
        border-bottom: none;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        cursor: pointer;
        transition: 0s all;
    }
}

/*----- Button Header-Menu Circle  -----*/
.button__Wrapper.Header-Menu.Circle button {
    display: inline-block;
    width: 100%;
    border: none;
    background-color: transparent;
}

.button__Wrapper.Header-Menu.Circle button a {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 2px;
    padding: 0 0 30px 0;
    border-bottom: solid 1px #a3cacc;
    color: #333333;
    text-decoration: none;
    text-align: left;
    position: relative;
}

.button__Wrapper.Header-Menu.Circle button a::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #a3cacc;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 10px);
    right: 0;
    transform: translateY(-50%);
}

.button__Wrapper.Header-Menu.Circle button a::after {
    content: attr(data-en);
    width: 100%;
    height: auto;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #333333;
    position: absolute;
    top: 25px;
    left: 1px;
}

.button__Wrapper.Header-Menu.Circle button a:hover {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 2px;
    padding: 0 0 40px 0;
    border-bottom: solid 1px #a3cacc;
    color: #333333;
    text-decoration: none;
    text-align: left;
    position: relative;
    transition: 0.3s all;
}

.button__Wrapper.Header-Menu.Circle button a:hover::before {
    content: '';
    width: 15px;
    height: 15px;
    background-color: #a3cacc;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 20px);
    right: 0;
    transform: translateY(-50%) translateX(5px);
    transition: 0.3s all;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .button__Wrapper.Header-Menu.Circle button {
        display: inline-block;
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Header-Menu.Circle button a {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.8rem;
        letter-spacing: 2px;
        padding: 0 0 30px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
    }
    
    .button__Wrapper.Header-Menu.Circle button a::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 10px);
        right: 0;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Header-Menu.Circle button a::after {
        content: attr(data-en);
        width: 100%;
        height: auto;
        font-weight: 700;
        font-size: 1.2rem;
        letter-spacing: 0px;
        color: #333333;
        position: absolute;
        top: 25px;
        left: 1px;
    }
    
    .button__Wrapper.Header-Menu.Circle button a:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.8rem;
        letter-spacing: 2px;
        padding: 0 0 30px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        transition: 0s all;
    }
    
    .button__Wrapper.Header-Menu.Circle button a:hover::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 10px);
        right: 0;
        transform: translateY(-50%);
        transition: 0s all;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .button__Wrapper.Header-Menu.Circle button {
        display: inline-block;
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Header-Menu.Circle button a {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 2px;
        padding: 0 0 30px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
    }
    
    .button__Wrapper.Header-Menu.Circle button a::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 10px);
        right: 0;
        transform: translateY(-50%);
    }
    
    .button__Wrapper.Header-Menu.Circle button a::after {
        content: attr(data-en);
        width: 100%;
        height: auto;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0px;
        color: #333333;
        position: absolute;
        top: 25px;
        left: 1px;
    }
    
    .button__Wrapper.Header-Menu.Circle button a:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 2px;
        padding: 0 0 30px 0;
        border-bottom: solid 1px #a3cacc;
        color: #333333;
        text-decoration: none;
        text-align: left;
        position: relative;
        transition: 0s all;
    }
    
    .button__Wrapper.Header-Menu.Circle button a:hover::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 10px);
        right: 0;
        transform: translateY(-50%);
        transition: 0s all;
    }
}

/*----- Button tel  -----*/
.button__Wrapper.Tel button {
    width: 100%;
    border: none;
    background-color: transparent;
}

.button__Wrapper.Tel button a {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: 5px;
    color: #333333;
    padding: 35px 0 35px 0;
    border: solid 2px #333333;
    background-color: transparent;
    text-decoration: none;
}

.button__Wrapper.Tel button a:hover {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 2.1rem;
    letter-spacing: 5px;
    color: #ffffff;
    padding: 35px 0 35px 0;
    border: solid 2px #333333;
    background-color: #333333;
    text-decoration: none;
    transition: 0.3s all;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .button__Wrapper.Tel button {
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Tel button a {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 2.1rem;
        letter-spacing: 5px;
        color: #333333;
        padding: 35px 0 35px 0;
        border: solid 2px #333333;
        background-color: transparent;
        text-decoration: none;
    }
    
    .button__Wrapper.Tel button a:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 2.1rem;
        letter-spacing: 5px;
        color: #333333;
        padding: 35px 0 35px 0;
        border: solid 2px #333333;
        background-color: transparent;
        text-decoration: none;
        transition: 0s all;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .button__Wrapper.Tel button {
        width: 100%;
        border: none;
        background-color: transparent;
    }
    
    .button__Wrapper.Tel button a {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.8rem;
        letter-spacing: 5px;
        color: #333333;
        padding: 25px 0 25px 0;
        border: solid 2px #333333;
        background-color: transparent;
        text-decoration: none;
    }
    
    .button__Wrapper.Tel button a:hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.8rem;
        letter-spacing: 5px;
        color: #333333;
        padding: 25px 0 25px 0;
        border: solid 2px #333333;
        background-color: transparent;
        text-decoration: none;
        transition: 0s all;
    }
}

/*----- Scroll Icon -----*/
.icon__Wrapper.Scroll .container {
    display: inline-block;
    width: 110px;
    height: 110px;
    position: relative;
}

.icon__Wrapper.Scroll .container .box:nth-of-type(1) {
    width: 110px;
    height: 110px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.icon__Wrapper.Scroll .container .box:nth-of-type(1) img {
    animation: scrollRotate 7s linear infinite;
}

@keyframes scrollRotate {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
}

.icon__Wrapper.Scroll .container .box:nth-of-type(2) {
    width: 25px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .icon__Wrapper.Scroll .container {
        display: inline-block;
        width: 100px;
        height: 100px;
        position: relative;
    }
    
    .icon__Wrapper.Scroll .container .box:nth-of-type(1) {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .icon__Wrapper.Scroll .container .box:nth-of-type(1) img {
        animation: scrollRotate 7s linear infinite;
    }
    
    @keyframes scrollRotate {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(360deg);
        }
    }
    
    .icon__Wrapper.Scroll .container .box:nth-of-type(2) {
        width: 20px;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .icon__Wrapper.Scroll .container {
        display: inline-block;
        width: 90px;
        height: 90px;
        position: relative;
    }
    
    .icon__Wrapper.Scroll .container .box:nth-of-type(1) {
        width: 90px;
        height: 90px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .icon__Wrapper.Scroll .container .box:nth-of-type(1) img {
        animation: scrollRotate 7s linear infinite;
    }
    
    @keyframes scrollRotate {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(360deg);
        }
    }
    
    .icon__Wrapper.Scroll .container .box:nth-of-type(2) {
        width: 18px;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}

/*----- Lower-Page Title -----*/
.lower-page__Wrapper.Title h1 {
    display: inline-block;
    width: 100%;
    font-weight: 400;
    font-size: 2.1rem;
    letter-spacing: 5px;
    color: #333333;
    text-shadow: 
        1px 1px 0px #ffffff, -1px -1px 0px #ffffff,
        -1px 1px 0px #ffffff,  1px -1px 0px #ffffff,
        1px 0px 0px #ffffff, -1px  0px 0px #ffffff,
        0px 1px 0px #ffffff,  0px -1px 0px #ffffff;
    ;
    position: relative;
}

.lower-page__Wrapper.Title h1::before {
    content: attr(data-en);
    width: 100%;
    font-weight: 700;
    font-size: 10rem;
    letter-spacing: -10px;
    color: #333333;
    text-shadow: none;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: -1;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .lower-page__Wrapper.Title h1 {
        display: inline-block;
        width: 100%;
        font-weight: 400;
        font-size: 2.1rem;
        letter-spacing: 5px;
        color: #333333;
        text-shadow: 
            1px 1px 0px #ffffff, -1px -1px 0px #ffffff,
            -1px 1px 0px #ffffff,  1px -1px 0px #ffffff,
            1px 0px 0px #ffffff, -1px  0px 0px #ffffff,
            0px 1px 0px #ffffff,  0px -1px 0px #ffffff;
        ;
        position: relative;
    }
    
    .lower-page__Wrapper.Title h1::before {
        content: attr(data-en);
        width: 100%;
        font-weight: 700;
        font-size: 10rem;
        letter-spacing: -10px;
        color: #333333;
        text-shadow: none;
        position: absolute;
        bottom: -15px;
        left: 0;
        z-index: -1;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .lower-page__Wrapper.Title h1 {
        display: inline-block;
        width: 100%;
        font-weight: 400;
        font-size: 1.8rem;
        letter-spacing: 5px;
        color: #333333;
        text-shadow: 
            1px 1px 0px #ffffff, -1px -1px 0px #ffffff,
            -1px 1px 0px #ffffff,  1px -1px 0px #ffffff,
            1px 0px 0px #ffffff, -1px  0px 0px #ffffff,
            0px 1px 0px #ffffff,  0px -1px 0px #ffffff;
        ;
        position: relative;
    }
    
    .lower-page__Wrapper.Title h1::before {
        content: attr(data-en);
        width: 100%;
        font-weight: 700;
        font-size: 5rem;
        letter-spacing: -5px;
        color: #333333;
        text-shadow: none;
        position: absolute;
        bottom: -3px;
        left: 0;
        z-index: -1;
    }
}

/*-----   lower-page   -----*/
.lower-page__Container {
    padding: 0 8% 0 8%;
    position: relative;
}

.lower-page__Wrapper {
    height: 50vh;
    height: 50dvh;
    transform: translateY(100%);
}

/*--Breadcrumb--*/
.lower-page__Container .breadCrumb__Container {
    padding: 0 0 50px 0;
    border-bottom: solid 1px #E6E6E6;
    margin: 100px 0 0 0;
}
/*--/Breadcrumb--*/
/*--Scroll Icon--*/
.lower-page__Container .icon__Wrapper.Scroll {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: -50px;
    left: -8%;
    width: 100%;
    z-index: 5;
}
/*--/Scroll Icon--*/

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .lower-page__Container {
        padding: 0 8% 0 8%;
    }

    .lower-page__Wrapper {
        height: 40vh;
        height: 40dvh;
        position: relative;
        transform: translateY(100%);
    }

    /*--Breadcrumb--*/
    .lower-page__Container .breadCrumb__Container {
        padding: 0 0 50px 0;
        border-bottom: solid 1px #E6E6E6;
        margin: 100px 0 0 0;
    }
    /*--/Breadcrumb--*/
    /*--Scroll Icon--*/
    .lower-page__Container .icon__Wrapper.Scroll {
        display: flex;
        justify-content: flex-end;
        position: absolute;
        bottom: -45px;
        left: -8%;
        width: 100%;
        z-index: 5;
    }
    /*--/Scroll Icon--*/
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .lower-page__Container {
        padding: 0 8% 0 8%;
    }

    .lower-page__Wrapper {
        height: 45vh;
        height: 45dvh;
        position: relative;
        transform: translateY(100%);
    }

    /*--Breadcrumb--*/
    .lower-page__Container .breadCrumb__Container {
        padding: 0 0 60px 0;
        border-bottom: solid 1px #E6E6E6;
        margin: 100px 0 0 0;
    }
    /*--/Breadcrumb--*/
    /*--Scroll Icon--*/
    .lower-page__Container .icon__Wrapper.Scroll {
        display: flex;
        justify-content: flex-end;
        position: absolute;
        bottom: -40px;
        left: -8%;
        width: 100%;
    }
    /*--/Scroll Icon--*/
}
/*-----   /lower-page   -----*/

/*-----   Company Table   -----*/
.Company__Wrapper.Table dl {
    display: grid;
    grid-template-columns: 30% 67%;
    gap: 0 3%;
}

.Company__Wrapper.Table dl dt {
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: 5px;
    padding: 40px 0 40px 0;
    border-top: solid 1px #333333;
}

.Company__Wrapper.Table dl dd {
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: 3px;
    padding: 40px 0 40px 0;
    border-top: solid 1px #E6E6E6;
}

.Company__Wrapper.Table dl dt:nth-last-of-type(1) {
    border-bottom: solid 1px #333333;
}

.Company__Wrapper.Table dl dd:nth-last-of-type(1) {
    border-bottom: solid 1px #E6E6E6;
}

.Company__Wrapper.Table dl dd a.link__Img {
    display: inline-flex;
    gap: 0 5px;
    color: #333333;
}

.Company__Wrapper.Table dl dd a.link__Img span.img {
    display: flex;
    align-items: center;
}

.Company__Wrapper.Table dl dd a.link__Img span.img img {
    width: 15px;
    height: auto;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .Company__Wrapper.Table dl {
        display: grid;
        grid-template-columns: 30% 67%;
        gap: 0 3%;
    }
    
    .Company__Wrapper.Table dl dt {
        font-weight: 500;
        font-size: 1.4rem;
        letter-spacing: 5px;
        padding: 40px 0 40px 0;
        border-top: solid 1px #333333;
    }
    
    .Company__Wrapper.Table dl dd {
        font-weight: 400;
        font-size: 1.4rem;
        letter-spacing: 3px;
        padding: 40px 0 40px 0;
        border-top: solid 1px #E6E6E6;
    }

    .Company__Wrapper.Table dl dt:nth-last-of-type(1) {
        border-bottom: solid 1px #333333;
    }
    
    .Company__Wrapper.Table dl dd:nth-last-of-type(1) {
        border-bottom: solid 1px #E6E6E6;
    }
    
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .Company__Wrapper.Table dl {
        display: grid;
        grid-template-columns: 100%;
        gap: 0 0;
    }
    
    .Company__Wrapper.Table dl dt {
        font-weight: 500;
        font-size: 1.2rem;
        letter-spacing: 3px;
        padding: 30px 0 30px 0;
        border-top: solid 1px #333333;
    }
    
    .Company__Wrapper.Table dl dd {
        font-weight: 400;
        font-size: 1.2rem;
        letter-spacing: 3px;
        padding: 30px 0 30px 0;
        border-top: solid 1px #E6E6E6;
    }

    .Company__Wrapper.Table dl dt:nth-last-of-type(1) {
        border-bottom: solid 0px #333333;
    }
    
    .Company__Wrapper.Table dl dd:nth-last-of-type(1) {
        border-bottom: solid 1px #333333;
    }
    
}

/*-----   Philosophy heading   -----*/
/*-----Belief-----*/
.Philosophy__Wrapper.heading.Belief h1 {
    font-weight: 700;
    font-size: 2.4rem;
    letter-spacing: 3px;
    position: relative;
}

.Philosophy__Wrapper.heading.Belief h1::before {
    content: attr(data-en);
    font-weight: 900;
    font-size: 7.2rem;
    letter-spacing: -6px;
    color: #A3CACC;
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: -1;
}

/*-----Mvv-----*/
.Philosophy__Wrapper.heading.Mvv h1 {
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 3px;
    position: relative;
}

.Philosophy__Wrapper.heading.Mvv h1::before {
    content: attr(data-en);
    font-weight: 900;
    font-size: 4.8rem;
    letter-spacing: -5px;
    color: #63B0C4;
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: -1;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    /*-----Belief-----*/
    .Philosophy__Wrapper.heading.Belief h1 {
        font-weight: 700;
        font-size: 2.4rem;
        letter-spacing: 3px;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.Belief h1::before {
        content: attr(data-en);
        font-weight: 900;
        font-size: 7.2rem;
        letter-spacing: -6px;
        color: #A3CACC;
        position: absolute;
        bottom: -5px;
        left: 0;
        z-index: -1;
    }
    
    /*-----Mvv-----*/
    .Philosophy__Wrapper.heading.Mvv h1 {
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 3px;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.Mvv h1::before {
        content: attr(data-en);
        font-weight: 900;
        font-size: 4.8rem;
        letter-spacing: -5px;
        color: #63B0C4;
        position: absolute;
        bottom: -5px;
        left: 0;
        z-index: -1;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    /*-----Belief-----*/
    .Philosophy__Wrapper.heading.Belief h1 {
        width:100%;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 2px;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.Belief h1::before {
        content: attr(data-en);
        width:100%;
        font-weight: 900;
        font-size: 4.8rem;
        letter-spacing: -5px;
        color: #A3CACC;
        position: absolute;
        bottom: -4px;
        left: 0;
        z-index: -1;
    }
    
    /*-----Mvv-----*/
    .Philosophy__Wrapper.heading.Mvv h1 {
        width:100%;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 2px;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.Mvv h1::before {
        content: attr(data-en);
        width:100%;
        font-weight: 900;
        font-size: 3.2rem;
        letter-spacing: -3px;
        color: #63B0C4;
        position: absolute;
        bottom: -0px;
        left: 0;
        z-index: -1;
    }
}

/*-----Value-----*/
.Philosophy__Wrapper.heading.Value .box h1 {
    display: flex;
    align-items:flex-start;
    gap: 0 10px;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #63b0c4;
    position: relative;
}

.Philosophy__Wrapper.heading.Value .box h1::before {
    content: attr(data-en-upper);
    font-weight: 900;
    font-size: 7.2rem;
    line-height: 0.75;
    letter-spacing: 0px;
    color: #333333;
    position: relative;
}

.Philosophy__Wrapper.heading.Value .box h1::after {
    content: attr(data-en-lower);
    font-weight: 700;
    font-size: 1.6rem;
    color: #333333;
    letter-spacing: 3px;
    position: absolute;
    top: 50%;
    left: 68px;
    transform: translateY(-50%);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .Philosophy__Wrapper.heading.Value .box h1 {
        display: flex;
        align-items:flex-start;
        gap: 0 10px;
        font-weight: 700;
        font-size: 1.2rem;
        letter-spacing: 1px;
        color: #63b0c4;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.Value .box h1::before {
        content: attr(data-en-upper);
        font-weight: 900;
        font-size: 7.2rem;
        line-height: 0.75;
        letter-spacing: 0px;
        color: #333333;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.Value .box h1::after {
        content: attr(data-en-lower);
        font-weight: 700;
        font-size: 1.6rem;
        color: #333333;
        letter-spacing: 3px;
        position: absolute;
        top: 50%;
        left: 68px;
        transform: translateY(-50%);
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .Philosophy__Wrapper.heading.Value .box h1 {
        display: flex;
        align-items:flex-start;
        gap: 0 10px;
        font-weight: 700;
        font-size: 1.2rem;
        letter-spacing: 1px;
        color: #63b0c4;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.Value .box h1::before {
        content: attr(data-en-upper);
        font-weight: 900;
        font-size: 7.2rem;
        line-height: 0.75;
        letter-spacing: 0px;
        color: #333333;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.Value .box h1::after {
        content: attr(data-en-lower);
        font-weight: 700;
        font-size: 1.6rem;
        color: #333333;
        letter-spacing: 3px;
        position: absolute;
        top: 50%;
        left: 68px;
        transform: translateY(-50%);
    }
}

/*-----ValueEl-----*/
.Philosophy__Wrapper.heading.ValueEl .box h1 {
    display: flex;
    align-items:flex-start;
    gap: 0 7px;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: #a3cacc;
    position: relative;
}

.Philosophy__Wrapper.heading.ValueEl .box h1::before {
    content: attr(data-en-upper);
    font-weight: 900;
    font-size: 3.6rem;
    line-height: 1;
    letter-spacing: 0px;
    color: #333333;
    position: relative;
}

.Philosophy__Wrapper.heading.ValueEl .box h1::after {
    content: attr(data-en-lower);
    font-weight: 700;
    font-size: 1.6rem;
    color: #333333;
    letter-spacing: 3px;
    position: absolute;
    bottom: 0;
    left: calc(25px + 10px);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .Philosophy__Wrapper.heading.ValueEl .box h1 {
        display: flex;
        align-items:flex-start;
        gap: 0 7px;
        font-weight: 700;
        font-size: 1.2rem;
        letter-spacing: 1px;
        color: #a3cacc;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.ValueEl .box h1::before {
        content: attr(data-en-upper);
        font-weight: 900;
        font-size: 3.6rem;
        line-height: 1;
        letter-spacing: 0px;
        color: #333333;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.ValueEl .box h1::after {
        content: attr(data-en-lower);
        font-weight: 700;
        font-size: 1.6rem;
        color: #333333;
        letter-spacing: 3px;
        position: absolute;
        bottom: 0;
        left: calc(25px + 10px);
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .Philosophy__Wrapper.heading.ValueEl .box h1 {
        display: flex;
        align-items:flex-start;
        gap: 0 7px;
        font-weight: 700;
        font-size: 1.2rem;
        letter-spacing: 1px;
        color: #a3cacc;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.ValueEl .box h1::before {
        content: attr(data-en-upper);
        font-weight: 900;
        font-size: 3.6rem;
        line-height: 1;
        letter-spacing: 0px;
        color: #333333;
        position: relative;
    }
    
    .Philosophy__Wrapper.heading.ValueEl .box h1::after {
        content: attr(data-en-lower);
        font-weight: 700;
        font-size: 1.4rem;
        color: #333333;
        letter-spacing: 2px;
        position: absolute;
        bottom: 0;
        left: calc(25px + 10px);
    }
}

/*-----lower-page heading SDGs-----*/
.page__Container.heading-Sdgs .box {
    display: inline-block;
}

.page__Container.heading-Sdgs .box h2 {
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1.3;
    letter-spacing: 2px;
    padding: 1em;
    border-bottom: solid 2px #a3cacc;
    position: relative;
}

.page__Container.heading-Sdgs .box h2::before {
    content: attr(data-number);
    font-weight: 900;
    font-size: 6.0rem;
    line-height: 1;
    letter-spacing: 2px;
    color: #F7CF7E;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.page__Container.heading-Sdgs .box h2 span {
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .page__Container.heading-Sdgs .box {
        display: inline-block;
    }
    
    .page__Container.heading-Sdgs .box h2 {
        font-weight: 500;
        font-size: 2.4rem;
        line-height: 1.3;
        letter-spacing: 2px;
        padding: 1em;
        border-bottom: solid 2px #a3cacc;
        position: relative;
    }
    
    .page__Container.heading-Sdgs .box h2::before {
        content: attr(data-number);
        font-weight: 900;
        font-size: 6.0rem;
        line-height: 1;
        letter-spacing: 2px;
        color: #F7CF7E;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    
    .page__Container.heading-Sdgs .box h2 span {
        position: relative;
        z-index: 2;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .page__Container.heading-Sdgs .box {
        display: inline-block;
    }
    
    .page__Container.heading-Sdgs .box h2 {
        font-weight: 500;
        font-size: 1.6rem;
        line-height: 1.3;
        letter-spacing: 2px;
        padding: 1em;
        border-bottom: solid 2px #a3cacc;
        position: relative;
    }
    
    .page__Container.heading-Sdgs .box h2::before {
        content: attr(data-number);
        font-weight: 900;
        font-size: 3.8rem;
        line-height: 1;
        letter-spacing: 2px;
        color: #F7CF7E;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    
    .page__Container.heading-Sdgs .box h2 span {
        position: relative;
        z-index: 2;
    }
}

/*-----   .select__Container  -----*/
.select__Container > .wrapper:nth-of-type(1) {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 0px 0px; 
}

.select__Container > .wrapper > .box {
    overflow: hidden;
}

.select__Container > .wrapper > .box a {
    display: grid;
    align-items: center;
    width: 100%;
    font-weight: 700;
    font-size: 2.4rem;
    color: #ffffff;
    text-decoration: none;
    padding: 0 0 0 8%;
    position: relative;
}

.select__Container > .wrapper > .box a::after {
    content: attr(data-en);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 2px;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(8% - 3px);
    z-index: 1;
    transform: translateY(-50%);
}

.select__Container > .wrapper:nth-of-type(2) > .box a {
    display: grid;
    align-items: center;
    width: 100%;
    font-weight: 700;
    font-size: 2.4rem;
    color: #ffffff;
    text-decoration: none;
    padding: 0 0 0 4%;
    position: relative;
}

.select__Container > .wrapper:nth-of-type(2) > .box a::after {
    content: attr(data-en);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 2px;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(4% - 3px);
    z-index: 1;
    transform: translateY(-50%);
}


.select__Container > .wrapper > .box a::before {
    content: '';
    width: 100%;
    height: 100%;
    filter: brightness(75%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5;
}

.select__Container > .wrapper:nth-of-type(1) > .box.sc a::before,
.select__Container > .wrapper:nth-of-type(2) > .box.sc a::before {
    background: url(../images/security-guard-8.webp) no-repeat;
    background-size: cover;
    background-position: center center;
}

.select__Container > .wrapper:nth-of-type(1) > .box.ce a::before,
.select__Container > .wrapper:nth-of-type(2) > .box.ce a::before {
    background: url(../images/sky-scenery.webp) no-repeat;
    background-size: cover;
    background-position: center center;
}

.select__Container > .wrapper:nth-of-type(1) > .box.ct a::before,
.select__Container > .wrapper:nth-of-type(2) > .box.ct a::before {
    background: url(../images/street-forest.webp) no-repeat;
    background-size: cover;
    background-position: center center;
}

.select__Container > .wrapper:nth-of-type(1) > .box.cp a::before,
.select__Container > .wrapper:nth-of-type(2) > .box.cp a::before {
    background: url(../images/stabilizer-3.webp) no-repeat;
    background-size: cover;
    background-position: center center;
}

.select__Container > .wrapper:nth-of-type(1) > .box.sv a::before,
.select__Container > .wrapper:nth-of-type(2) > .box.sv a::before {
    background: url(../images/security-guard-3.webp) no-repeat;
    background-size: cover;
    background-position: center center;
}

.select__Container > .wrapper.wrapper:nth-of-type(1) > .box a:hover::before {
    transform: scale(1.1);
    transition: 0.3s all;
}

.select__Container > .wrapper.wrapper:nth-of-type(2) > .box a:hover::before {
    transform: scale(1.1);
    transition: 0.3s all;
}

.select__Container > .wrapper.wrapper:nth-of-type(1) > .box a {
    aspect-ratio: 16 / 11;
}

.select__Container > .wrapper.wrapper:nth-of-type(2) > .box a {
    aspect-ratio: 16 / 5.5;
}

.select__Container > .wrapper > .box a span {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 25px;
    right: calc(8% + 25px);
}

.select__Container > .wrapper > .box a span::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 18px;
    background: url(../images/arrow-right.svg) no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
}

.select__Container > .wrapper > .box a span::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #63b0c4;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.select__Container > .wrapper > .box a:hover span::before {
    transition: 0.3s all;
}

.select__Container > .wrapper > .box a:hover span::after {
    display: inline-block;
    width: 125px;
    height: 125px;
    background-color: #63b0c4;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.3s all;
}

.select__Container > .wrapper:nth-of-type(2) > .box a span {
    position: absolute;
    bottom: 25px;
    right: calc(4% + 25px);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .select__Container > .wrapper:nth-of-type(1) {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 0px 0px; 
    }
    
    .select__Container > .wrapper > .box a {
        display: grid;
        align-items: center;
        width: 100%;
        font-weight: 700;
        font-size: 2.4rem;
        color: #ffffff;
        text-decoration: none;
        padding: 0 0 0 8%;
        position: relative;
    }
    
    .select__Container > .wrapper > .box a::after {
        content: attr(data-en);
        font-weight: 400;
        font-size: 1.4rem;
        letter-spacing: 2px;
        position: absolute;
        top: calc(50% - 30px);
        left: calc(8% - 3px);
        z-index: 1;
        transform: translateY(-50%);
    }
    
    .select__Container > .wrapper:nth-of-type(2) > .box a {
        display: grid;
        align-items: center;
        width: 100%;
        font-weight: 700;
        font-size: 2.4rem;
        color: #ffffff;
        text-decoration: none;
        padding: 0 0 0 4%;
        position: relative;
    }
    
    .select__Container > .wrapper:nth-of-type(2) > .box a::after {
        content: attr(data-en);
        font-weight: 400;
        font-size: 1.4rem;
        letter-spacing: 2px;
        position: absolute;
        top: calc(50% - 30px);
        left: calc(4% - 3px);
        z-index: 1;
        transform: translateY(-50%);
    }
    
    
    .select__Container > .wrapper > .box a::before {
        content: '';
        width: 100%;
        height: 100%;
        filter: brightness(75%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -5;
    }

    .select__Container > .wrapper:nth-of-type(1) > .box.sc a::before,
    .select__Container > .wrapper:nth-of-type(1) > .box.sc a::before {
        background: url(../images/security-guard-8-md.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }
    
    .select__Container > .wrapper:nth-of-type(1) > .box.ce a::before,
    .select__Container > .wrapper:nth-of-type(2) > .box.ce a::before {
        background: url(../images/sky-scenery-md.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }
    
    .select__Container > .wrapper:nth-of-type(1) > .box.ct a::before
    .select__Container > .wrapper:nth-of-type(2) > .box.ct a::before {
        background: url(../images/street-forest-md.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .select__Container > .wrapper:nth-of-type(1) > .box.cp a::before,
    .select__Container > .wrapper:nth-of-type(2) > .box.cp a::before {
        background: url(../images/stabilizer-3-md.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .select__Container > .wrapper:nth-of-type(1) > .box.sv a::before,
    .select__Container > .wrapper:nth-of-type(2) > .box.sv a::before {
        background: url(../images/security-guard-3-md.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }
    
    .select__Container > .wrapper.wrapper:nth-of-type(1) > .box a {
        aspect-ratio: 16 / 13;
    }
    
    .select__Container > .wrapper.wrapper:nth-of-type(2) > .box a {
        aspect-ratio: 16 / 6.5;
    }
    
    .select__Container > .wrapper > .box a span {
        display: inline-block;
        width: 80px;
        height: 80px;
        position: absolute;
        bottom: 25px;
        right: calc(8% + 25px);
    }
    
    .select__Container > .wrapper > .box a span::before {
        content: '';
        display: inline-block;
        width: 30px;
        height: 18px;
        background: url(../images/arrow-right.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .select__Container > .wrapper > .box a span::after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    
    .select__Container > .wrapper:nth-of-type(2) > .box a span {
        position: absolute;
        bottom: 25px;
        right: calc(4% + 25px);
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .select__Container > .wrapper:nth-of-type(1) {
        display: grid;
        grid-template-columns: 1fr; 
        gap: 0px 0px; 
    }
    
    .select__Container > .wrapper > .box a {
        display: grid;
        align-items: center;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        color: #ffffff;
        text-decoration: none;
        padding: 0 0 0 8%;
        position: relative;
    }
    
    .select__Container > .wrapper > .box a::after {
        content: attr(data-en);
        font-weight: 400;
        font-size: 1.2rem;
        letter-spacing: 2px;
        position: absolute;
        top: calc(50% - 20px);
        left: calc(8% - 3px);
        z-index: 1;
        transform: translateY(-50%);
    }
    
    .select__Container > .wrapper:nth-of-type(2) > .box a {
        display: grid;
        align-items: center;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        color: #ffffff;
        text-decoration: none;
        padding: 0 0 0 8%;
        position: relative;
    }
    
    .select__Container > .wrapper:nth-of-type(2) > .box a::after {
        content: attr(data-en);
        font-weight: 400;
        font-size: 1.2rem;
        letter-spacing: 2px;
        position: absolute;
        top: calc(50% - 20px);
        left: calc(8% - 2px);
        z-index: 1;
        transform: translateY(-50%);
    }
    
    
    .select__Container > .wrapper > .box a::before {
        content: '';
        width: 100%;
        height: 100%;
        filter: brightness(75%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: -5;
    }

    .select__Container > .wrapper:nth-of-type(1) > .box.sc a::before,
    .select__Container > .wrapper:nth-of-type(2) > .box.sc a::before {
        background: url(../images/security-guard-8-sm.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }
    
    .select__Container > .wrapper:nth-of-type(1) > .box.ce a::before,
    .select__Container > .wrapper:nth-of-type(2) > .box.ce a::before {
        background: url(../images/sky-scenery-sm.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }
    
    .select__Container > .wrapper:nth-of-type(1) > .box.ct a::before,
    .select__Container > .wrapper:nth-of-type(2) > .box.ct a::before {
        background: url(../images/street-forest-sm.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .select__Container > .wrapper:nth-of-type(1) > .box.cp a::before,
    .select__Container > .wrapper:nth-of-type(2) > .box.cp a::before {
        background: url(../images/stabilizer-3-sm.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .select__Container > .wrapper:nth-of-type(1) > .box.sv a::before,
    .select__Container > .wrapper:nth-of-type(2) > .box.sv a::before {
        background: url(../images/security-guard-3-sm.webp) no-repeat;
        background-size: cover;
        background-position: center center;
    }
    
    .select__Container > .wrapper.wrapper:nth-of-type(1) > .box a {
        aspect-ratio: 16 / 11;
    }
    
    .select__Container > .wrapper.wrapper:nth-of-type(2) > .box a {
        aspect-ratio: 16 / 11;
    }
    
    .select__Container > .wrapper > .box a span {
        display: inline-block;
        width: 60px;
        height: 60px;
        position: absolute;
        bottom: 15px;
        right: calc(8% + 15px);
    }
    
    .select__Container > .wrapper > .box a span::before {
        content: '';
        display: inline-block;
        width: 22px;
        height: 15px;
        background: url(../images/arrow-right.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%) translateY(-50%);
    }
    
    .select__Container > .wrapper > .box a span::after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    
    .select__Container > .wrapper:nth-of-type(2) > .box a span {
        position: absolute;
        bottom: 15px;
        right: calc(8% + 15px);
    }
}

@media only screen and (max-width: 1024px) and (min-width: 0px) {
    .select__Container > .wrapper.wrapper:nth-of-type(1) > .box a:hover::before {
        transform: scale(1);
        transition: 0.3s all;
    }
    
    .select__Container > .wrapper.wrapper:nth-of-type(2) > .box a:hover::before {
        transform: scale(1);
        transition: 0s all;
    }

    .select__Container > .wrapper > .box a:hover span::before {
        transition: 0s all;
    }
    
    .select__Container > .wrapper > .box a:hover span::after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        background-color: #63b0c4;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        transition: 0s all;
    }
}
/*-----   /.select__Container  -----*/

/*--Breadcrumb--*/
.lower-page__Container .breadCrumb__Container {
    padding: 0 0 50px 0;
    border-bottom: solid 1px #E6E6E6;
    margin: 100px 0 0 0;
}
/*--/Breadcrumb--*/
/*--Scroll Icon--*/
.lower-page__Container .icon__Wrapper.Scroll {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: -50px;
    left: -8%;
    width: 100%;
    z-index: 5;
}
/*--/Scroll Icon--*/

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .lower-page__Container {
        padding: 0 8% 0 8%;
    }

    .lower-page__Wrapper {
        height: 40vh;
        height: 40dvh;
        position: relative;
        transform: translateY(100%);
    }

    /*--Breadcrumb--*/
    .lower-page__Container .breadCrumb__Container {
        padding: 0 0 50px 0;
        border-bottom: solid 1px #E6E6E6;
        margin: 100px 0 0 0;
    }
    /*--/Breadcrumb--*/
    /*--Scroll Icon--*/
    .lower-page__Container .icon__Wrapper.Scroll {
        display: flex;
        justify-content: flex-end;
        position: absolute;
        bottom: -45px;
        left: -8%;
        width: 100%;
        z-index: 5;
    }
    /*--/Scroll Icon--*/
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .lower-page__Container {
        padding: 0 8% 0 8%;
    }

    .lower-page__Wrapper {
        height: 45vh;
        height: 45dvh;
        position: relative;
        transform: translateY(100%);
    }

    /*--Breadcrumb--*/
    .lower-page__Container .breadCrumb__Container {
        padding: 0 0 60px 0;
        border-bottom: solid 1px #E6E6E6;
        margin: 100px 0 0 0;
    }
    /*--/Breadcrumb--*/
    /*--Scroll Icon--*/
    .lower-page__Container .icon__Wrapper.Scroll {
        display: flex;
        justify-content: flex-end;
        position: absolute;
        bottom: -40px;
        left: -8%;
        width: 100%;
    }
    /*--/Scroll Icon--*/
}
/*-----   /lower-page   -----*/

/*-----   Header   -----*/
/*--Menu Btn --*/
.btn__Wrapper.Menu {
    position: fixed;
    top: 6.5%;
    right: 4%;
    z-index: 1000;
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .btn__Wrapper.Menu {
        position: fixed;
        top: 2.5%;
        right: 4%;
        z-index: 1000;
    }
}

.btn__Wrapper.Menu button {
    border: none;
    background-color: transparent;
}

.btn__Wrapper.Menu button {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color:#63b0c4;
    cursor: pointer;
    position: relative;
}

.btn__Wrapper.Menu button span:nth-of-type(1) {
    content: '';
    width: 28px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.btn__Wrapper.Menu button span:nth-of-type(2) {
    content: '';
    width: 28px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    top: calc(50% - 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.btn__Wrapper.Menu button span:nth-of-type(3) {
    content: '';
    width: 28px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    top: calc(50% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.btn__Wrapper.Menu.open button span:nth-of-type(1) {
    content: '';
    width: 0px;
    height: 0px;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: none;
    transition: 0.3s all;
}

.btn__Wrapper.Menu.open button span:nth-of-type(2) {
    content: '';
    width: 28px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    top: calc(50% - 0px);
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(35deg);
    transition: 0.3s all;
}

.btn__Wrapper.Menu.open button span:nth-of-type(3) {
    content: '';
    width: 28px;
    height: 2px;
    background-color: #ffffff;
    position: absolute;
    top: calc(50% + 0px);
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-35deg);
    transition: 0.3s all;
}

.header_Container.open .content .container {
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: #FAF9F7;
    position: fixed;
    z-index: 999;
    transition: 0.3s all;
    opacity: 1;
    overflow-x: hidden;
    overflow-y: scroll;
}

body.open {
    overflow: hidden;
}

.header_Container .content .container {
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: #FAF9F7;
    position: fixed;
    z-index: -999;
    transition: 0.3s all;
    opacity: 0;
}

.header_Container .content .container .wrapper {
    display: grid;
    grid-template-columns: 30% 46%;
    align-items: center;
    gap: 0 8%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 0 8% 10% 8%;
}

.headerBg::after {
    content: '';
    width: 50%;
    height: 100%;
    background: url(../images/menuBg.svg) no-repeat;
    position: fixed;
    top: 43%;
    left: -10%;
    z-index: -9999;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) {
    position: relative;
    z-index: 1000;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(1) {
    width: 100%;
    display: inline-block;
    font-weight: 700;
    font-size: 2.6vw;
    font-size: 2.6dvw;
    line-height: 1;
    letter-spacing: 0.2vw;
    letter-spacing: 0.2dvw;
    white-space: nowrap;
    color: #333333;
    text-decoration: none;
    margin: 40% 0 0 -0.8%;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(1) span:nth-of-type(1) {
    display: inline-block;
    font-weight: 500;
    font-size: 1.6vw;
    font-size: 1.6dvw;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(2) {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 2.1rem;
    color: #333333;
    text-decoration: none;
    text-align: center;
    padding: 1.5em 0 1.5em 0;
    border: solid 2px #333333;
    margin: 60px 0 0 0;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(2):hover {
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 2.1rem;
    color: #ffffff;
    background-color: #333333;
    text-decoration: none;
    text-align: center;
    padding: 1.5em 0 1.5em 0;
    border: solid 2px #333333;
    margin: 60px 0 0 0;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) {
    position: relative;
    top: 60px;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) .button__Wrapper.Instagram {
    position: relative;
    top: 40px;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) .box {
    position: relative;
    z-index: 1000;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) .box a {
    font-size: 1.4rem;
    color: #333333;
    text-decoration: none;
}

.header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) .box a:hover {
    text-decoration: underline;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 50px 5%;
    grid-auto-flow: none;
    grid-template-areas:
        "menu1 menu2 menu6"
        ". menu3 menu7"
        ". menu4 menu8"
        ". menu5 menu9";
    margin: calc(0% - 0px) 0 0 0;
}

    .menu1 { grid-area: menu1; }
      
    .menu2 { grid-area: menu2; }
      
    .menu3 { grid-area: menu3; }
      
    .menu4 { grid-area: menu4; }
      
    .menu5 { grid-area: menu5; }
      
    .menu6 { grid-area: menu6; }
      
    .menu7 { grid-area: menu7; }

    .menu8 { grid-area: menu8; }

    .menu9 { grid-area: menu9; }

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li {
    list-style: none;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(1) {
    position: relative;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(1) ul {
    display: grid;
    gap: 35px 0px;
    width: 100%;
    margin: 50px 0 0 0;
    position: absolute;
    top: 100%;
    left: 0;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(1) ul:nth-last-child(1) {
    padding: 0 0 10% 0;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(1) ul > li > ul {
    display: grid;
    gap: 35px 0px;
    width: 100%;
    margin: 30px 0 0 0;
    position: fixed;
    top: -10%;
    left: 0;
    z-index: -999;
    opacity: 0;
    pointer-events: none;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(1) ul > li.open > ul {
    display: grid;
    gap: 35px 0px;
    margin: 30px 0 0 0;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 1;
    transition: 0.3s;
    pointer-events: auto;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(1) ul > li:nth-of-type(n).open .button__Wrapper.Menu.Plus button p::after {
    content: '';
    width: 0px;
    height: 15px;
    background-color: #a3cacc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(4) {
    display: inline-block;
    width :100%;
    position: relative;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(4) ul {
    display: grid;
    gap: 35px 0px;
    width: 100%;
    margin: 0px 0 0 0;
    position: fixed;
    top: 100%;
    left: 0;
    z-index: -999;
    opacity: 0;
    pointer-events: none;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li.open:nth-of-type(4) ul {
    display: grid;
    gap: 35px 0px;
    width: 100%;
    margin: 30px 0 0 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    opacity: 1;
    transition: 0.3s;
    pointer-events: auto;
}

.header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li.open:nth-of-type(4) .button__Wrapper.Header-Menu.Plus button p span::after {
    content: '';
    width: 0px;
    height: 15px;
    background-color: #a3cacc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .header_Container .content .container {
        width: 100%;
        height: auto;
        height: auto;
        background-color: #FAF9F7;
        position: fixed;
        z-index: -999;
        transition: 0.3s all;
        opacity: 0;
    }

    .header_Container.open .content .container {
        width: 100%;
        height: auto;
        height: auto;
        background-color: #FAF9F7;
        position: fixed;
        z-index: 999;
        transition: 0.3s all;
        opacity: 1;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .headerBg::after {
        content: '';
        width: 58%;
        height: 100%;
        background: url(../images/menuBg.svg) no-repeat;
        position: fixed;
        top: 43%;
        left: -10%;
        z-index: -9999;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(2) {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.8rem;
        color: #333333;
        text-decoration: none;
        text-align: center;
        padding: 1.5em 0 1.5em 0;
        border: solid 2px #333333;
        margin: 60px 0 0 0;
    }
    
    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(2):hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.8rem;
        color: #333333;
        text-decoration: none;
        text-align: center;
        padding: 1.5em 0 1.5em 0;
        border: solid 2px #333333;
        margin: 60px 0 0 0;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) .box {
        position: relative;
        z-index: 1000;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) .box a:hover {
        text-decoration: none;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 50px 5%;
        grid-auto-flow: none;
        grid-template-areas:
            "menu1 menu6"
            "menu2 menu7"
            "menu3 menu8"
            "menu4 menu9"
            "menu5 .";
        margin: calc(25% - 50px) 0 0 0;
    }
    
    .menu1 { grid-area: menu1; }
      
    .menu2 { grid-area: menu2; }
      
    .menu3 { grid-area: menu3; }
      
    .menu4 { grid-area: menu4; }
      
    .menu5 { grid-area: menu5; }
      
    .menu6 { grid-area: menu6; }
      
    .menu7 { grid-area: menu7; }

    .menu8 { grid-area: menu8; }

    .menu9 { grid-area: menu9; }
    .header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li.open:nth-of-type(4) ul {
        display: grid;
        gap: 35px 0px;
        width: 100%;
        margin: 30px 0 0 0;
        position: relative;
        top: 0%;
        left: 0;
        z-index: 1000;
        opacity: 1;
        transition: 0.3s;
        pointer-events: auto;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .header_Container .content .container {
        width: 100%;
        height: auto;
        height: auto;
        background-color: #FAF9F7;
        position: fixed;
        z-index: -999;
        transition: 0.3s all;
        opacity: 0;
    }

    .header_Container.open .content .container {
        width: 100%;
        height: auto;
        height: auto;
        background-color: #FAF9F7;
        position: fixed;
        z-index: 999;
        transition: 0.3s all;
        opacity: 1;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .headerBg::after {
        content: '';
        width: 80%;
        height: 100%;
        background: url(../images/menuBg.svg) no-repeat;
        position: fixed;
        top: 10%;
        left: -10%;
        z-index: -9999;
    }

    .header_Container .content .container .wrapper {
        display: grid;
        grid-template-columns: 84%;
        align-items: center;
        gap: 0 0%;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: 0 8% 0 calc(8% - 2px);
    }

    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(1) {
        width: 100%;
        display: inline-block;
        font-weight: 700;
        font-size: 7.6vw;
        font-size: 7.6dvw;
        line-height: 1;
        letter-spacing: 0.2vw;
        letter-spacing: 0.2dvw;
        white-space: nowrap;
        color: #333333;
        text-decoration: none;
        margin: 60% 0 0 -0.8%;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(1) span:nth-of-type(1) {
        display: inline-block;
        font-weight: 500;
        font-size: 3.6vw;
        font-size: 3.6dvw;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(2) {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        color: #333333;
        text-decoration: none;
        text-align: center;
        padding: 1.5em 0 1.5em 0;
        border: solid 2px #333333;
        margin: 60px 0 0 0;
    }
    
    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(1) a:nth-of-type(2):hover {
        display: inline-block;
        width: 100%;
        font-weight: 700;
        font-size: 1.6rem;
        color: #333333;
        background-color: transparent;
        text-decoration: none;
        text-align: center;
        padding: 1.5em 0 1.5em 0;
        border: solid 2px #333333;
        margin: 60px 0 0 0;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) .box {
        position: relative;
        z-index: 1000;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) .box a:hover {
        text-decoration: none;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) {
        margin: 30px 0 0 0;
        position: relative;
        top: 0px;
    }
    
    .header_Container .content .container .wrapper .box:nth-of-type(1) .area:nth-of-type(2) .button__Wrapper.Instagram {
        margin: 30px 0 0 0 ;
        text-align: center;
        position: relative;
        top: 0px;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        gap: 50px 5%;
        grid-auto-flow: none;
        grid-template-areas:
            "menu1"
            "menu2"
            "menu3"
            "menu4"
            "menu5"
            "menu6"
            "menu7"
            "menu8"
            "menu9";
        margin: calc(25% - 50px) 0 0 0;
        padding: 50px 0 80px 0;
    }

        .menu1 { grid-area: menu1; }
      
        .menu2 { grid-area: menu2; }
      
        .menu3 { grid-area: menu3; }
      
        .menu4 { grid-area: menu4; }
      
        .menu5 { grid-area: menu5; }
      
        .menu6 { grid-area: menu6; }
      
        .menu7 { grid-area: menu7; }

        .menu8 { grid-area: menu8; }

        .menu9 { grid-area: menu9; }
    
    .header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(1) ul {
        display: grid;
        gap: 35px 0px;
        width: 100%;
        margin: 50px 0 0 0;
        position: relative;
        top: 0%;
        left: 0;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li:nth-of-type(4) ul {
        display: grid;
        gap: 35px 0px;
        width: 100%;
        margin: 0px 0 0 0;
        position: fixed;
        top: -2%;
        left: 0;
        z-index: -999;
        opacity: 0;
        pointer-events: none;
    }

    .header_Container .content .container .wrapper .box:nth-of-type(2) .area nav > ul li.open:nth-of-type(4) ul {
        display: grid;
        gap: 35px 0px;
        width: 100%;
        margin: 30px 0 0 0;
        position: relative;
        top: 0%;
        left: 0;
        z-index: 1000;
        opacity: 1;
        transition: 0.3s;
        pointer-events: auto;
    }
}
/*-----   /Header   -----*/

/*-----   Footer   -----*/
.footer {
    width: 100%;
    background-color: #F1EEE7;
    border-top: solid 1px #E6E6E6;
    margin: 100px 0 0 0;
    position: relative;
}

.footer__Container {
    padding: 150px 16% 150px 8%;
}

.footer__Container .footer__Box {
    width: 100%;
    height: auto;
    position: relative;
}

.footer__Container .footer__Wrapper {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 18% 62%;
    gap: 0 20%;
}

.footer__Container .footer__Wrapper .box:nth-of-type(1) .content .button__Wrapper.Instagram {
    text-align: center;
    margin: 30px 0 0 0;
}

.footer__Container .footer__Wrapper .box:nth-of-type(1) .content a {
    display: block;
    text-decoration: none;
    text-align: center;
}

.footer__Container .footer__Wrapper .box:nth-of-type(1) .content a::after {
    content: attr(data-jp);
    color: #333333;
    letter-spacing: 4px;
}

.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav > ul {
    display: grid;
    grid-template-columns: 47% 47%;
    gap: 50px 6%;
    grid-template-areas: 
    "wrapper1 wrapper5"
    "wrapper2 wrapper6"
    "wrapper3 wrapper7"
    "wrapper4 wrapper8"; 
}

.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav ul li:nth-of-type(1) { grid-area: wrapper1; }
.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav ul li:nth-of-type(2) { grid-area: wrapper2; }
.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav ul li:nth-of-type(3) { grid-area: wrapper3; }
.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav ul li:nth-of-type(4) { grid-area: wrapper4; }
.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav ul li:nth-of-type(5) { grid-area: wrapper5; }
.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav ul li:nth-of-type(6) { grid-area: wrapper6; }

.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav ul li {
    list-style: none;
}

.footer__Container .bottom {
    margin: 100px 0 0 0;
}

.footer__Container .bottom .container {
    display: flex;
    justify-content: space-between;
}

.footer__Container .bottom .container .box:nth-of-type(1) a {
    color: #333333;
    text-decoration: none;
}

.footer__Container .bottom .container .box:nth-of-type(1) a:hover {
    text-decoration: underline;
}

.footer__Container .footer__Wrapper .box:nth-of-type(1) .content p {
    display: inline-block;
    font-weight: 600;
    margin: 10px 0 0 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.footer__Container .footer__Wrapper .box:nth-of-type(1) .content p span:nth-of-type(1) {
    font-size: 1.2rem;
    font-weight: 400;
}

.footer .button__Wrapper.Hexagon {
    position: absolute;
    top: -50px;
    right: 4%;
}

.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav > ul li {
    position: relative;
}

.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav > ul > li > ul {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    
}

.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav > ul > li > ul.open {
    display: grid;
    gap: 25px 0;
    margin: 30px 0 0 0;
    position: relative;
    top: 0;
    left: 0;
    pointer-events: auto;
    opacity: 1;
    transition: 0.3s;
}

.footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav > ul > li .button__Wrapper.Menu.Plus.open button p::after {
    content: '';
    width: 0px;
    height: 15px;
    background-color: #a3cacc;
    position: absolute;
    top: calc(50% - 7.5px);
    right: 6px;
    transform: translateY(-50%);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .footer {
        width: 100%;
        border-top: solid 1px #E6E6E6;
        margin: 100px 0 0 0;
        position: relative;
    }
    
    .footer__Container {
        padding: 150px 16% 150px 8%;
    }
    
    .footer__Container .footer__Box {
        width: 100%;
        height: auto;
        position: relative;
    }
    
    .footer__Container .footer__Wrapper {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 24% 62%;
        gap: 0 14%;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(1) .content .button__Wrapper.Instagram {
        text-align: center;
        margin: 30px 0 0 0;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(1) .content a {
        display: block;
        text-decoration: none;
        text-align: center;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(1) .content a::after {
        content: attr(data-jp);
        color: #333333;
        letter-spacing: 4px;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav > ul {
        display: grid;
        grid-template-columns: 47% 47%;
        gap: 50px 6%;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav ul li {
        list-style: none;
    }
    
    .footer__Container .bottom {
        margin: 100px 0 0 0;
    }
    
    .footer__Container .bottom .container {
        display: flex;
        justify-content: space-between;
    }
    
    .footer__Container .bottom .container .box:nth-of-type(1) a {
        color: #333333;
        text-decoration: none;
    }
    
    .footer__Container .bottom .container .box:nth-of-type(1) a:hover {
        text-decoration: underline;
    }
    
    .footer .button__Wrapper.Hexagon {
        position: absolute;
        top: -50px;
        right: 4%;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .footer {
        width: 100%;
        border-top: solid 1px #E6E6E6;
        margin: 100px 0 0 0;
        position: relative;
    }
    
    .footer__Container {
        padding: 100px 8% 30px 8%;
    }
    
    .footer__Container .footer__Box {
        width: 100%;
        height: auto;
        position: relative;
    }
    
    .footer__Container .footer__Wrapper {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 100%;
        gap: 50px 14%;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(1) {
        display: grid;
        grid-template-columns: 60%;
        justify-content: center;
        width: 100%;
        order: 1;
    }

    .footer__Container .footer__Wrapper .box:nth-of-type(1) .content .button__Wrapper.Instagram {
        text-align: center;
        margin: 20px 0 0 0;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(1) .content a {
        display: block;
        text-decoration: none;
        text-align: center;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(1) .content a::after {
        content: attr(data-jp);
        color: #333333;
        letter-spacing: 4px;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav > ul {
        display: grid;
        grid-template-columns: 100%;
        gap: 35px 0%;
        grid-template-areas: 
        "wrapper1"
        "wrapper2"
        "wrapper3"
        "wrapper4"
        "wrapper5"
        "wrapper6"; 
    }

    .footer__Container .footer__Wrapper .box:nth-of-type(2) {
        order: 1;
    }
    
    .footer__Container .footer__Wrapper .box:nth-of-type(2) .wrapper nav ul li {
        list-style: none;
    }
    
    .footer__Container .bottom {
        margin: 70px 0 0 0;
    }
    
    .footer__Container .bottom .container {
        display: grid;
        justify-content: center;
        gap: 50px 0;
    }
    
    .footer__Container .bottom .container .box:nth-of-type(1) a {
        color: #333333;
        text-decoration: none;
    }
    
    .footer__Container .bottom .container .box:nth-of-type(1) a:hover {
        text-decoration: underline;
    }
    
    .footer .button__Wrapper.Hexagon {
        position: absolute;
        top: -35px;
        right: 4%;
    }
}
/*-----   /Footer   -----*/

/*-----   heading__Logo   -----*/
.heading__Logo {
    width: 100%;
    position: relative;
    z-index: 1;
}

.heading__Logo .wrapper {
    position: absolute;
    top: 40px;
    left: 40px;
}

.heading__Logo .wrapper a {
    display: flex;
    width: 100%;
    height: auto;
    z-index: 5;
}

.heading__Logo .wrapper a img {
    width: 80px;
    height: auto;
}

.heading__Logo .wrapper a span:nth-of-type(1) {
    width: 100%;
    font-weight: 500;
    font-size: 1.8rem;
    color: #333333;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: calc(80px + 15px);
    transform: translateY(-50%);
}

.heading__Logo .wrapper a span:nth-of-type(1)::before {
    content: attr(data-jp);
    font-size: 1.2rem;
    font-weight: 500;
    position: absolute;
    top: -50%;
}

.heading__Logo.top .wrapper a span:nth-of-type(1) {
    color: #ffffff;
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .heading__Logo {
        width: 100%;
        position: relative;
    }
    
    .heading__Logo .wrapper {
        position: absolute;
        top: 2vh;
        top: 2dvh;
        left: 2%;
    }
    
    .heading__Logo .wrapper a {
        display: flex;
        width: auto;
        height: auto;
        z-index: 5;
    }
    
    .heading__Logo .wrapper a img {
        width: 13vw;
        width: 13dvw;
        height: auto;
    }
    
    .heading__Logo .wrapper a span:nth-of-type(1) {
        width: 100%;
        font-weight: 500;
        font-size: 3vw;
        font-size: 3dvw;
        color: #333333;
        white-space: nowrap;
        position: absolute;
        top: 50%;
        left: calc(100% + 20%);
        transform: translateY(-50%);
    }
    
    .heading__Logo .wrapper a span:nth-of-type(1)::before {
        content: attr(data-jp);
        font-size: 2.4vw;
        font-size: 2.4dvw;
        font-weight: 500;
        position: absolute;
        top: -75%;
    }
}
/*-----   /heading__Logo   -----*/

/*----- Breadcrumb -----*/
.breadCrumb__Box ol {
    display: flex;
    gap: 50px;
}

.breadCrumb__Box ol li {
    list-style: none;
}

.breadCrumb__Box ol li a,
.breadCrumb__Box ol li p {
    display: inline-block;
    width: 100%;
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: 1px;
    position: relative;
}

.breadCrumb__Box ol li a {
    color: #a1a1a1;
}

.breadCrumb__Box ol li a::before,
.breadCrumb__Box ol li p::before {
    content: attr(data-en);
    color: #333333;
    position: absolute;
    top: 0;
    right: -30px;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .breadCrumb__Box ol {
        display: flex;
        gap: 40px;
    }
    
    .breadCrumb__Box ol li {
        list-style: none;
    }
    
    .breadCrumb__Box ol li a,
    .breadCrumb__Box ol li p {
        display: inline-block;
        width: 100%;
        font-weight: 500;
        font-size: 1.2rem;
        letter-spacing: 1px;
        position: relative;
    }
    
    .breadCrumb__Box ol li a {
        color: #a1a1a1;
    }
    
    .breadCrumb__Box ol li a::before,
    .breadCrumb__Box ol li p::before {
        content: attr(data-en);
        color: #333333;
        position: absolute;
        top: 0;
        right: -20px;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .breadCrumb__Box ol {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 35px;
    }
    
    .breadCrumb__Box ol li {
        list-style: none;
    }
    
    .breadCrumb__Box ol li a,
    .breadCrumb__Box ol li p {
        display: inline-block;
        width: 100%;
        font-weight: 500;
        font-size: 1.2rem;
        letter-spacing: 1px;
        position: relative;
    }
    
    .breadCrumb__Box ol li a {
        color: #a1a1a1;
    }
    
    .breadCrumb__Box ol li a::before,
    .breadCrumb__Box ol li p::before {
        content: attr(data-en);
        color: #333333;
        position: absolute;
        top: 0;
        right: -20px;
    }
}

/*-----   404   -----*/
.not404__Container {
    padding: 100px 8% 100px 8%;
}

.not404__Container p:nth-of-type(1) {
    margin: 100px 0 0 0;
}

.not404__Container p:nth-of-type(2) {
    margin: 5px 0 0 0;
}

.not404__Container .button__Wrapper.Lg {
    margin: 50px 0 0 0;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .not404__Container {
        padding: 80px 8% 80px 8%;
    }
    
    .not404__Container p:nth-of-type(1) {
        margin: 80px 0 0 0;
    }
    
    .not404__Container p:nth-of-type(2) {
        margin: 5px 0 0 0;
    }
    
    .not404__Container .button__Wrapper.Lg {
        margin: 40px 0 0 0;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .not404__Container {
        padding: 60px 8% 60px 8%;
    }
    
    .not404__Container p:nth-of-type(1) {
        margin: 50px 0 0 0;
    }
    
    .not404__Container p:nth-of-type(2) {
        margin: 5px 0 0 0;
    }
    
    .not404__Container .button__Wrapper.Lg {
        margin: 40px 0 0 0;
    }
}
/*-----   /404   -----*/

/*-----   privacy   -----*/
.privacy__Container {
    padding: 100px 8% 100px 8%;
}

.privacy__Container section:nth-of-type(1) p {
    line-height: 1.8;
    margin: 50px 0 0 0;
}

.privacy__Container section:nth-of-type(n + 1) h2 {
    font-weight: 500;
    font-size: 1.8rem;
    margin: 65px 0 0 0;
    position: relative;
}

.privacy__Container section:nth-of-type(n + 1) h2::before {
    content: attr(data-symbol);
    font-size: 1.8rem;
    color: #333333;
    margin: 0 5px 0 0;
    position: relative;
}

.privacy__Container section:nth-of-type(n + 2) p {
    line-height: 1.8;
    margin: 25px 0 0 0;
}

.privacy__Container section:nth-of-type(n + 2) ol {
    line-height: 1.8;
    margin: 25px 0 0 1.5em;
}

.privacy__Container section:nth-last-of-type(1) address {
    font-style: normal;
    margin: 25px 0 0 0;
}

.privacy__Container section:nth-last-of-type(1) a {
    display: inline-block;
    color: #333333;
    margin: 25px 0 0 0;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .privacy__Container {
        padding: 100px 8% 100px 8%;
    }
    
    .privacy__Container section:nth-of-type(1) p {
        margin: 50px 0 0 0;
    }
    
    .privacy__Container section:nth-of-type(n + 1) h2 {
        font-weight: 500;
        font-size: 1.8rem;
        margin: 65px 0 0 0;
    }
    
    .privacy__Container section:nth-of-type(n + 2) p {
        line-height: 1.8;
        margin: 25px 0 0 0;
    }
    
    .privacy__Container section:nth-of-type(n + 2) ol {
        line-height: 1.8;
        margin: 25px 0 0 1.5em;
    }
    
    .privacy__Container section:nth-last-of-type(1) address {
        font-style: normal;
        margin: 25px 0 0 0;
    }
    
    .privacy__Container section:nth-last-of-type(1) a {
        display: inline-block;
        color: #333333;
        margin: 25px 0 0 0;
    }
}
/*-----   /privacy   -----*/

/*-----   contact   -----*/
.contact__Container {
    padding: 100px 8% 100px 8%;
}

.contact__Container .heading__Box p:nth-of-type(1) {
    line-height: 1.8;
}

.contact__Container .heading__Box p:nth-of-type(2) {
    line-height: 1.8;
    color: #808080;
    margin: 25px 0 0 0;
}

.button__Wrapper.Md button{
    background-color: transparent;
    border: none;
}

.contact__Container .button__Wrapper.Md button a {
    text-decoration: none;
    pointer-events: none;
}

.contact__Container .button__Wrapper.Md button a:hover .Icon.R {
    transform: translateX(0px);
    transition: 0s all;
}

.contact__Container .button__Wrapper.Md button a:hover .Icon.R span.Bg {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #63B0C4;
    border-radius: 50%;
    position: absolute;
    top: 0%;
    left: 0%;
    transform: translateX(0%) translateY(0%);
    transition: 0s all;
}

.contact__Container section:nth-of-type(1) > .box:nth-of-type(1),
.contact__Container section:nth-of-type(2) > .box:nth-of-type(1) {
    display: flex;
    align-items: center;
    gap: 0 25px;
    margin: 85px 0 0 0;
}

.contact__Container section:nth-of-type(1) > .box:nth-of-type(1) h1,
.contact__Container section:nth-of-type(2) > .box:nth-of-type(1) h1 {
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1;
    margin: -5px 0 0 0;
}

.contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a {
    display: inline-block;
    width: 100%;
    font-size: 2.6rem;
    letter-spacing: 5px;
    color: #333333;
    text-decoration: none;
    text-align: center;
    padding: 40px 0 40px 0;
    border: solid 1px #E6E6E6;
    margin: 25px 0 0 0;
}

.contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a:hover {
    display: inline-block;
    width: 100%;
    font-size: 2.6rem;
    letter-spacing: 5px;
    color: #ffffff;
    background-color: #333333;
    text-decoration: none;
    text-align: center;
    padding: 40px 0 40px 0;
    border: solid 1px #E6E6E6;
    margin: 25px 0 0 0;
    transition: 0.3s all;
}

.contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a span {
    font-size: 1.8rem;
    letter-spacing: 10px;
}

.contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a::before {
    content: attr(data-jp);
    display: block;
    font-size: 1.4rem;
    letter-spacing: 3px;
    margin: 0 0 20px 0;
    position: relative;
}

.contact__Container section:nth-of-type(2) > .box:nth-of-type(1) {
    padding: 0 0 25px 0;
    border-bottom: solid 1px #E6E6E6;
}

.contact__Container section:nth-of-type(2) > .box:nth-of-type(2) {
    margin: 85px 0 0 0;
}

.contact-confirmation ol {
    display: flex;
    justify-content: center;
    gap: 0 165px;
}

.contact-confirmation ol li {
    font-weight: 500;
    font-size: 1.8rem;
    color: #808080;
    list-style: none;
    text-align: center;
    background-color: #F1EEE7;
    padding: 35px 40px;
    border-radius: 50%;
}

.contact-confirmation ol li.select {
    color: #ffffff;
    background-color: #63B0C4;
}

.contact-confirmation ol li::before {
    content: attr(data-number);
    display: block;
    position: relative;
}

.contact-confirmation ol li:nth-of-type(n + 2) {
    position: relative;
}

.contact-confirmation ol li:nth-of-type(n + 2)::after {
    content: '';
    width: 115px;
    height: 2px;
    background-color: #F7CF7E;
    position: absolute;
    top: 50%;
    left: calc(-100% + 5px - 25px);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .contact__Container {
        padding: 80px 8% 80px 8%;
    }
    
    .contact__Container .heading__Box p:nth-of-type(1) {
        line-height: 1.8;
    }
    
    .contact__Container .heading__Box p:nth-of-type(2) {
        line-height: 1.8;
        color: #808080;
        margin: 25px 0 0 0;
    }
    
    .contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a {
        display: inline-block;
        width: 100%;
        font-size: 2.6rem;
        letter-spacing: 5px;
        color: #333333;
        text-decoration: none;
        text-align: center;
        padding: 40px 0 40px 0;
        border: solid 1px #E6E6E6;
        margin: 25px 0 0 0;
    }
    
    .contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a:hover {
        display: inline-block;
        width: 100%;
        font-size: 2.6rem;
        letter-spacing: 5px;
        color: #333333;
        background-color: transparent;
        text-decoration: none;
        text-align: center;
        padding: 40px 0 40px 0;
        border: solid 1px #E6E6E6;
        margin: 25px 0 0 0;
        transition: 0s all;
    }
    
    .contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a span {
        font-size: 1.8rem;
        letter-spacing: 10px;
    }
    
    .contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a::before {
        content: attr(data-jp);
        display: block;
        font-size: 1.4rem;
        letter-spacing: 3px;
        margin: 0 0 20px 0;
        position: relative;
    }
    
    .contact__Container section:nth-of-type(2) > .box:nth-of-type(2) {
        margin: 85px 0 0 0;
    }
    
    .contact-confirmation ol {
        display: flex;
        justify-content: center;
        gap: 0 130px;
    }
    
    .contact-confirmation ol li {
        font-weight: 500;
        font-size: 1.6rem;
        color: #808080;
        list-style: none;
        text-align: center;
        background-color: #F1EEE7;
        padding: 35px 40px;
        border-radius: 50%;
    }
    
    .contact-confirmation ol li:nth-of-type(n + 2) {
        position: relative;
    }
    
    .contact-confirmation ol li:nth-of-type(n + 2)::after {
        content: '';
        width: 80px;
        height: 2px;
        background-color: #F7CF7E;
        position: absolute;
        top: 50%;
        left: calc(-100% + 10px - 0px);
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .contact__Container {
        padding: 80px 8% 60px 8%;
    }
    
    .contact__Container .heading__Box p:nth-of-type(1) {
        line-height: 1.8;
    }
    
    .contact__Container .heading__Box p:nth-of-type(2) {
        line-height: 1.8;
        color: #808080;
        margin: 25px 0 0 0;
    }

    .contact__Container section:nth-of-type(1) > .box:nth-of-type(1),
    .contact__Container section:nth-of-type(2) > .box:nth-of-type(1) {
        display: flex;
        align-items: center;
        gap: 0 6%;
        margin: 60px 0 0 0;
    }
    
    .contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a {
        display: inline-block;
        width: 100%;
        font-size: 1.8rem;
        letter-spacing: 3px;
        color: #333333;
        text-decoration: none;
        text-align: center;
        padding: 40px 0 40px 0;
        border: solid 1px #E6E6E6;
        margin: 25px 0 0 0;
    }
    
    .contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a:hover {
        display: inline-block;
        width: 100%;
        font-size: 1.8rem;
        letter-spacing: 3px;
        color: #333333;
        background-color: transparent;
        text-decoration: none;
        text-align: center;
        padding: 40px 0 40px 0;
        border: solid 1px #E6E6E6;
        margin: 25px 0 0 0;
        transition: 0s all;
    }
    
    .contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a span {
        font-size: 1.2rem;
        letter-spacing: 5px;
    }
    
    .contact__Container section:nth-of-type(1) > .box:nth-of-type(2) a::before {
        content: attr(data-jp);
        display: block;
        font-size: 1.2rem;
        letter-spacing: 3px;
        margin: 0 0 20px 0;
        position: relative;
    }
    
    .contact__Container section:nth-of-type(2) > .box:nth-of-type(2) {
        margin: 30px 0 0 0;
    }
    
    .contact-confirmation ol {
        display: flex;
        justify-content: center;
        gap: 0 3%;
    }
    
    .contact-confirmation ol li {
        font-weight: 500;
        font-size: 1.2rem;
        color: #808080;
        list-style: none;
        text-align: center;
        background-color: #F1EEE7;
        padding: 9% 10%;
        border-radius: 100%;
    }
    
    .contact-confirmation ol li:nth-of-type(n + 2) {
        position: relative;
    }
    
    .contact-confirmation ol li:nth-of-type(n + 2)::after {
        content: '';
        width: 25%;
        height: 4px;
        background-color: #F7CF7E;
        position: absolute;
        top: 50%;
        left: calc(-18% + 0px - 0px);
    }
}


/*Contact Form*/
.contact__Form {
    width: 100%;
}

.contact__Form form .box:nth-of-type(1) > dl {
    width: 100%;
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 30px 0;
}

.contact__Form form .box:nth-of-type(1) > dl dt {
    display: grid;
    align-items: center;
    position: relative;
}

.contact__Form form .box:nth-of-type(1) > dl dt:nth-last-of-type(1) {
    display: block;
    align-items: center;
    padding: 15px 0 0 0;
}

.contact__Form form .box:nth-of-type(1) > dl dt::before {
    content: attr(data-jp);
    font-weight: 400;
    font-size: 1.2rem;
    color: #ffffff;
    background-color: #F7B021;
    border-radius: 5px;
    padding: 4px;
    position: absolute;
    top: 50%;
    right: 2em;
    transform: translateY(-50%);
}

.contact__Form form .box:nth-of-type(1) > dl dt.n::before {
    padding: 0px;
}

.contact__Form form .box:nth-of-type(1) > dl dt:nth-last-of-type(2):before {
    padding: 0px;
}

.contact__Form form .box:nth-of-type(1) > dl dt:nth-last-of-type(1):before {
    position: absolute;
    top: 12px;
    right: 2em;
    transform: translateY(0%);
}

.contact__Form form .box:nth-of-type(1) > dl dd {
    display: grid;
    grid-template-columns: 1fr;
}

.contact__Form form .box:nth-of-type(1) > dl dd.a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1%;
}

.contact__Form form .box:nth-of-type(1) > dl dd.b {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 1%;
}

.contact__Form form .box:nth-of-type(1) > dl dd:nth-of-type(n + 1) input[type="text"],
.contact__Form form .box:nth-of-type(1) > dl dd:nth-of-type(n + 1) textarea {
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 2px;
    padding: 15px 1em 15px 1em;
    border: solid 1px #767676;
    border-radius: 5px;
}

.contact__Form form .box:nth-of-type(1) > dl dd:nth-of-type(n) textarea {
    height: 270px;
}

.contact__Form form .box:nth-of-type(2) > dl {
    display: grid;
    grid-template-columns: 70%;
    justify-content: end;
}

.contact__Container section:nth-of-type(2) .contact__Form {
    margin: 75px 0 0 0;
}

.contact__Form form .box:nth-of-type(2) > dl {
    margin: 60px 0 0 0;
}

.contact__Form form .box:nth-of-type(2) > dl dt {
    position: relative;
}

.contact__Form form .box:nth-of-type(2) > dl dt input[type=checkbox]  {
    display: block;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 0;
    left: 6.5px;
    opacity: 0;
}

.contact-checkbox {
    display: inline-block;
    width: auto;
    padding: 15px 0px 0px 0;
    margin: 0 45px 0 0;
    position: relative;
    color: #666;
    cursor: pointer;
    user-select:none;
}

.contact-checkbox::before {
    content: '';
    display: block;
    height: 25px;
    width: 25px;
    background: #fff;
    border: solid 2px #63B0C4;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.contact-checkbox::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border-right: solid 3px #63B0C4;
    border-bottom: solid 3px #63B0C4;
    margin-top: -7px;
    position: absolute;
    top: 50%;
    left: 11px;
    transform: rotate(45deg);
    opacity: 0;
}

.contact__Form form .box:nth-of-type(2) > dl dt input[type=checkbox]:checked + .contact-checkbox::after {
    opacity: 1;
}

.contact__Form form .box:nth-of-type(2) > dl dt a {
    font-weight: 400;
    font-size: 1.6rem;
    color: #333333;
}

.contact__Form form .box:nth-of-type(2) > dl dt span {
    font-size: 1.6rem;
    margin: 0 0 0 5px;
}

.contact__Form form .box:nth-of-type(2) > dl dd {
    margin: 65px 0 0 0;
    position: relative;
}

.submitBtn__Wrapper {
    width: 300px;
    position: relative;
}

.submitBtn__Wrapper input[type="submit"] {
    width: 300px;
    font-size: 1.6rem;
    letter-spacing: 3px;
    text-align: left;
    color: #ffffff;
    background-color: #63B0C4;
    padding: 20px 25px 20px 25px;
    border: solid 2px #63B0C4;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
}

.submitBtn__Wrapper input[type="submit"]:hover {
    width: 320px;
    padding: 25px 25px 25px 25px;
    transition: 0.3s all;
}

.submitBtn__Wrapper.over input[type="submit"] {
    width: 320px;
    padding: 25px 25px 25px 25px;
    transition: 0.3s all;
}

.submitBtn__Wrapper input[type="submit"]:hover .submitBtn__Wrapper {
    width: 320px;
    position: relative;
}

.submitBtn__Wrapper span::before {
    content: url(../images/arrow-right.svg);
    display: inline-block;
    width: 30px;
    height: auto;
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 1;
    transform: translateY(-50%);
    cursor: pointer;
}

.submitBtn__Wrapper.over span::before {
    content: url(../images/arrow-right.svg);
    display: inline-block;
    width: 30px;
    height: auto;
    position: absolute;
    top: 50%;
    right: 0px;
    z-index: 1;
    transform: translateY(-50%);
    transition: 0.3s all;
    cursor: pointer;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .contact__Form form .box:nth-of-type(1) > dl {
        width: 100%;
        display: grid;
        grid-template-columns: 35% 65%;
        gap: 30px 0;
    }

    .contact__Form form .box:nth-of-type(1) > dl dt {
        display: grid;
        align-items: start;
        position: relative;
        padding: 15px 0 0 0;
    }
    
    .contact__Form form .box:nth-of-type(1) > dl dt:nth-last-of-type(1) {
        display: block;
        align-items: start;
        padding: 15px 0 0 0;
    }
    
    .contact__Form form .box:nth-of-type(1) > dl dt::before {
        content: attr(data-jp);
        font-weight: 400;
        font-size: 1.2rem;
        color: #ffffff;
        background-color: #F7B021;
        border-radius: 5px;
        padding: 4px;
        position: absolute;
        top: 12px;
        right: 1em;
        transform: translateY(-0%);
    }

    .contact__Form form .box:nth-of-type(1) > dl dt:nth-last-of-type(1):before {
        position: absolute;
        top: 12px;
        right: 1em;
        transform: translateY(0%);
    }
    
    .contact__Form form .box:nth-of-type(1) > dl dd.a {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5% 0%;
    }

    .contact__Form form .box:nth-of-type(1) > dl dd.b {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5% 0%;
    }

    .contact__Form form .box:nth-of-type(2) > dl {
        display: grid;
        grid-template-columns: 65%;
        justify-content: end;
    }
    
    .contact__Container section:nth-of-type(2) .contact__Form {
        margin: 60px 0 0 0;
    }
    
    .contact__Form form .box:nth-of-type(2) > dl {
        margin: 60px 0 0 0;
    }

    .contact-checkbox {
        display: inline-block;
        width: auto;
        padding: 10px 0px 0px 0;
        margin: 0 45px 0 0;
        position: relative;
        color: #666;
        cursor: pointer;
        user-select:none;
    }

    .submitBtn__Wrapper {
        width: 300px;
        position: relative;
    }
    
    .submitBtn__Wrapper input[type="submit"] {
        width: 300px;
        font-size: 1.6rem;
        letter-spacing: 3px;
        text-align: left;
        color: #ffffff;
        background-color: #63B0C4;
        padding: 20px 25px 20px 25px;
        border: solid 2px #63B0C4;
        border-radius: 15px;
        position: relative;
        cursor: pointer;
    }
    
    .submitBtn__Wrapper input[type="submit"]:hover {
        width: 300px;
        padding: 20px 25px 20px 25px;
        transition: 0s all;
    }
    
    .submitBtn__Wrapper.over input[type="submit"] {
        width: 300px;
        padding: 20px 25px 20px 25px;
        transition: 0s all;
    }
    
    .submitBtn__Wrapper input[type="submit"]:hover .submitBtn__Wrapper {
        width: 300px;
        position: relative;
    }
    
    .submitBtn__Wrapper span::before {
        content: url(../images/arrow-right.svg);
        display: inline-block;
        width: 30px;
        height: auto;
        position: absolute;
        top: 50%;
        right: 20px;
        z-index: 1;
        transform: translateY(-50%);
        cursor: pointer;
    }
    
    .submitBtn__Wrapper.over span::before {
        content: url(../images/arrow-right.svg);
        display: inline-block;
        width: 30px;
        height: auto;
        position: absolute;
        top: 50%;
        right: 20px;
        z-index: 1;
        transform: translateY(-50%);
        transition: 0s all;
        cursor: pointer;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .contact__Form form .box:nth-of-type(1) > dl {
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        gap: 35px 0;
    }

    .contact__Form form .box:nth-of-type(1) > dl dt {
        display: grid;
        align-items: start;
        position: relative;
        padding: 15px 0 0 0;
    }
    
    .contact__Form form .box:nth-of-type(1) > dl dt:nth-last-of-type(1) {
        display: block;
        align-items: start;
        padding: 15px 0 0 0;
    }
    
    .contact__Form form .box:nth-of-type(1) > dl dt::before {
        content: attr(data-jp);
        font-weight: 400;
        font-size: 1.2rem;
        color: #ffffff;
        background-color: #F7B021;
        border-radius: 5px;
        padding: 4px;
        position: absolute;
        top: 12px;
        right: 1em;
        transform: translateY(-0%);
    }

    .contact__Form form .box:nth-of-type(1) > dl dt:nth-last-of-type(1):before {
        position: absolute;
        top: 12px;
        right: 1em;
        transform: translateY(0%);
    }
    
    .contact__Form form .box:nth-of-type(1) > dl dd.a {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5% 0%;
    }

    .contact__Form form .box:nth-of-type(1) > dl dd.b {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5% 0%;
    }

    .contact__Form form .box:nth-of-type(2) > dl {
        display: grid;
        grid-template-columns: 100%;
        justify-content: center;
    }
    
    .contact__Container section:nth-of-type(2) .contact__Form {
        margin: 50px 0 0 0;
    }
    
    .contact__Form form .box:nth-of-type(2) > dl {
        margin: 40px 0 0 0;
    }

    .contact__Form form .box:nth-of-type(1) > dl dd:nth-of-type(n) textarea {
        height: 150px;
    }
    
    .contact__Form form .box:nth-of-type(2) > dl dt a {
        position: relative;
        font-size: 1.2rem;
    }

    .contact__Form form .box:nth-of-type(2) > dl dt span {
        font-size: 1.2rem;
        line-height: 1.8;
    }

    .contact-checkbox {
        display: inline-block;
        width: auto;
        padding: 10px 0px 0px 0;
        margin: 0 35px 0 0;
        position: relative;
        color: #666;
        cursor: pointer;
        user-select:none;
    }

    .submitBtn__Wrapper {
        width: 100%;
        position: relative;
    }
    
    .submitBtn__Wrapper input[type="submit"] {
        width: 100%;
        font-size: 1.4rem;
        letter-spacing: 3px;
        text-align: left;
        color: #ffffff;
        background-color: #63B0C4;
        padding: 20px 25px 20px 25px;
        border: solid 2px #63B0C4;
        border-radius: 10px;
        position: relative;
        cursor: pointer;
    }
    
    .submitBtn__Wrapper input[type="submit"]:hover {
        width: 100%;
        padding: 20px 25px 20px 25px;
        transition: 0s all;
    }
    
    .submitBtn__Wrapper.over input[type="submit"] {
        width: 100%;
        padding: 20px 25px 20px 25px;
        transition: 0s all;
    }
    
    .submitBtn__Wrapper input[type="submit"]:hover .submitBtn__Wrapper {
        width: 100%;
        position: relative;
    }
    
    .submitBtn__Wrapper span::before {
        content: url(../images/arrow-right.svg);
        display: inline-block;
        width: 25px;
        height: auto;
        position: absolute;
        top: 50%;
        right: 20px;
        z-index: 1;
        transform: translateY(-50%);
        cursor: pointer;
    }
    
    .submitBtn__Wrapper.over span::before {
        content: url(../images/arrow-right.svg);
        display: inline-block;
        width: 25px;
        height: auto;
        position: absolute;
        top: 50%;
        right: 20px;
        z-index: 1;
        transform: translateY(-50%);
        transition: 0s all;
        cursor: pointer;
    }
}
/*/Contact Form*/
/*-----   /contact   -----*/

/*-----   contents company   -----*/
.contents__Container.company .wrapper.philosophy:nth-of-type(1) {
    padding: 0 8% 0 8%;
    margin: calc(40px + 150px) 0 0 0;
}

.contents__Container.company .wrapper.philosophy:nth-of-type(2) h1 {
    font-size: 2.4rem;
    padding: 0 8% 0 8%;
    margin: 120px 0 0 0;
}

.contents__Container.company .wrapper.philosophy:nth-of-type(3) {
    padding: 90px 0 0 0;
}

.contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(1) img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 18 / 16;
}

.contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) {
    display: flex;
    align-items: center;
    padding: 0% 16% 0 16%;
}

.contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) h2 {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.8;
    padding: 0 0 40px 0;
}

.contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) span {
    display: inline-block;
    font-weight: 400;
    font-size: 1.2rem;
    margin: 0 0 0 calc(15px + 15px);
    position: relative;
}

.contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) span::before {
    content: '';
    width: 15px;
    height: 1px;
    background-color: #333333;
    position: absolute;
    top: 50%;
    left: calc(-15px - 15px);
    transform: translateY(-50%);
}

.contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) p {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8;
    padding: 40px 0 0 0;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .contents__Container.company .wrapper.philosophy:nth-of-type(1) {
        padding: 0 8% 0 8%;
        margin: calc(40px + 130px) 0 0 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(2) h1 {
        font-size: 2.1rem;
        padding: 0 8% 0 8%;
        margin: 100px 0 0 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) {
        padding: 80px 0 0 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(1) {
        padding: 0 8% 0 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(1) img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 11;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) {
        display: block;
        align-items: center;
        padding: 0% 24% 0 8%;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) h2 {
        font-weight: 500;
        font-size: 1.6rem;
        line-height: 1.8;
        padding: 60px 0 40px 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) span {
        display: inline-block;
        font-weight: 400;
        font-size: 1.2rem;
        margin: 0 0 0 calc(15px + 15px);
        position: relative;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) span::before {
        content: '';
        width: 15px;
        height: 1px;
        background-color: #333333;
        position: absolute;
        top: 50%;
        left: calc(-15px - 15px);
        transform: translateY(-50%);
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) p {
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 1.8;
        padding: 40px 0 0 0;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .contents__Container.company .wrapper.philosophy:nth-of-type(1) {
        padding: 0 8% 0 8%;
        margin: calc(40px + 80px) 0 0 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(2) h1 {
        font-size: 1.6rem;
        padding: 0 8% 0 8%;
        margin: 80px 0 0 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) {
        padding: 40px 0 0 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(1) {
        padding: 0 8% 0 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(1) img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 11;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) {
        display: block;
        align-items: center;
        padding: 0% 8% 0 8%;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) h2 {
        font-weight: 500;
        font-size: 1.4rem;
        line-height: 1.6;
        padding: 40px 0 25px 0;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) span {
        display: inline-block;
        font-weight: 400;
        font-size: 1.1rem;
        margin: 0 0 0 calc(15px + 13px);
        position: relative;
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) span::before {
        content: '';
        width: 15px;
        height: 1px;
        background-color: #333333;
        position: absolute;
        top: calc(50% + 1px);
        left: calc(-15px - 13px);
        transform: translateY(-50%);
    }
    
    .contents__Container.company .wrapper.philosophy:nth-of-type(3) .grid__Container .box:nth-of-type(2) p {
        font-weight: 400;
        font-size: 1.2rem;
        line-height: 1.8;
        padding: 25px 0 0 0;
    }
}
/*-----   /contents company   -----*/

/*-----   contents history   -----*/
.contents__Container.company .contents__Box.history {
    background-color: #F1EEE7;
    padding: calc(40px + 130px) 8% 130px 8%;
    margin: calc(40px + 130px) 0 0 0;
    position: relative;
    z-index: -1;
}

.contents__Container.company .wrapper.history:nth-of-type(2) {
    margin: 90px 0 0 0;
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 40px 100px;
    margin: 0 0 0 calc(60px + 160px);
    position: relative;
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl::before {
    content: '';
    width: 2px;
    height: calc(100% - 20px);
    background-color: #63B0C4;
    position: absolute;
    top: 10px;
    left: -70px;
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 5px;
    position: relative;
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #63B0C4;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: -74px;
    transform: translateY(-50%);
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4):after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #63B0C4;
    border-radius: 100%;
    position: absolute;
    top: 70px;
    left: -74px;
    transform: translateY(-50%);
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt span:nth-of-type(2) {
    width: 100%;
    margin: 0 0 0 0;
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(1),
.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4) {
    position: relative;
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(1)::before,
.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4)::before {
    content: attr(data-number);
    font-weight: 700;
    font-size: 2.4rem;
    color: #63B0C4;
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(1)::before {
    position: absolute;
    top: -50%;
    left: calc(-60px - 160px);
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4)::before {
    position: absolute;
    top: 50px;
    left: calc(-60px - 160px);
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4),
.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd:nth-of-type(4) {
    padding: 60px 0 0 0;
    margin: 20px 0 0 0;
    border-top: solid 1px #E1E1E1;
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd {
    font-weight: 400;
    font-size: 1.4rem;
}

.contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd span {
    margin: 0 15px 0 15px;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .contents__Container.company .contents__Box.history {
        background-color: #F1EEE7;
        padding: calc(40px + 130px) 8% 130px 8%;
        margin: calc(40px + 130px) 0 0 0;
        position: relative;
        z-index: -1;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) {
        margin: 200px 0 0 0;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 40px 100px;
        margin: 0px 0 0 calc(0px + 0px);
        position: relative;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl::before {
        content: '';
        width: 2px;
        height: calc(100% - 20px);
        background-color: #63B0C4;
        position: absolute;
        top: 10px;
        left: -20px;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt {
        display: flex;
        justify-content: space-between;
        font-weight: 500;
        font-size: 1.4rem;
        letter-spacing: 5px;
        position: relative;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt::after {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: -24px;
        transform: translateY(-50%);
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4):after {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 190px;
        left: -24px;
        transform: translateY(-50%);
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt span:nth-of-type(2) {
        width: 100%;
        margin: 0 0 0 0;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(1),
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4) {
        position: relative;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(1)::before,
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4)::before {
        content: attr(data-number);
        font-weight: 700;
        font-size: 2.4rem;
        color: #63B0C4;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(1)::before {
        position: absolute;
        top: calc(50% - 110px);
        left: calc(0px - 0px);
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4)::before {
        position: absolute;
        top: 80px;
        left: calc(-0px - 0px);
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4),
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd:nth-of-type(4) {
        padding: 180px 0 0 0;
        margin: 20px 0 0 0;
        border-top: solid 1px #E1E1E1;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd {
        font-weight: 400;
        font-size: 1.4rem;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd span {
        margin: 0 15px 0 15px;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .contents__Container.company .contents__Box.history {
        background-color: #F1EEE7;
        padding: calc(40px + 40px) 8% 80px 8%;
        margin: calc(40px + 40px) 0 0 0;
        position: relative;
        z-index: -1;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) {
        margin: 140px 0 0 0;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl {
        display: grid;
        grid-template-columns: 1fr;
        gap: 60px 0px;
        padding: 0px 0 0 0%;
        margin: 0px 0 0 calc(0px + 0px);
        position: relative;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl::before {
        content: '';
        width: 2px;
        height: calc(100% - 5px);
        background-color: #63B0C4;
        position: absolute;
        top: 10px;
        left: -6%;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt {
        display: flex;
        justify-content:flex-start;
        gap: 0 25px;
        font-weight: 500;
        font-size: 1.4rem;
        letter-spacing: 5px;
        position: relative;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt::after {
        content: '';
        width: 8px;
        height: 8px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: calc(-6% - 3px);
        transform: translateY(-50%);
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4):after {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 130px;
        left: calc(-6% - 3px);
        transform: translateY(-50%);
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt span:nth-of-type(2) {
        width: 100%;
        margin: 0 0 0 0;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(1),
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4) {
        position: relative;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(1)::before,
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4)::before {
        content: attr(data-number);
        font-weight: 700;
        font-size: 2.4rem;
        color: #63B0C4;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(1)::before {
        position: absolute;
        top: calc(0% - 70px);
        left: calc(-0% - 0px);
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4)::before {
        position: absolute;
        top: 50px;
        left: calc(-0px - 0px);
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dt:nth-of-type(4),
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd:nth-of-type(4) {
        padding: 120px 0 0 0;
        margin: 0px 0 0 0;
        border-top: solid 1px #E1E1E1;
    }

    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd:nth-of-type(4) {
        padding: 0px 0 0 0;
        margin: 0px 0 0 0;
        border-top: solid 0px #E1E1E1;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd {
        font-weight: 400;
        font-size: 1.2rem;
    }
    
    .contents__Container.company .wrapper.history:nth-of-type(2) .container .box dl dd span {
        margin: 0 15px 0 15px;
    }
}
/*-----   /contents history   -----*/

/*-----   contents overview   -----*/
.contents__Container.company .contents__Box.overview {
    padding: calc(40px + 130px) 0 130px 0;
}

.contents__Container.company .wrapper.overview:nth-of-type(1) {
    padding: 0 8% 0 8%;
}

.contents__Container.company .wrapper.overview:nth-of-type(2) {
    margin: 90px 8% 0 8%;
}

.google-map__Box {
    padding: 100px 8% 0 8%;
    aspect-ratio: 16 / 9;
}

.google-map__Container iframe {
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .contents__Container.company .contents__Box.overview {
        padding: calc(40px + 130px) 0 130px 0;
    }

    .google-map__Box {
        padding: 80px 8% 0 8%;
        aspect-ratio: 16 / 12;
    }

}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .contents__Container.company .contents__Box.overview {
        padding: calc(40px + 40px) 0 80px 0;
    }

    .google-map__Box {
        padding: 60px 8% 0 8%;
        aspect-ratio: 16 / 20;
    }
}
/*-----   /contents overview   -----*/

/*-----   contents partner   -----*/
.contents__Container.company .contents__Box.partner {
    background-color: #F1EEE7;
    padding: calc(40px + 130px) 0 130px 0;
    position: relative;
    z-index: 0;
}

.contents__Container.company .wrapper.partner:nth-of-type(1) {
    padding: 0 8% 0 8%;
}

.contents__Container.company .wrapper.partner:nth-of-type(1) p {
    padding: 80px 0 80px 0;
    border-bottom: solid 1px #333333;
}

.contents__Container.company .wrapper.partner:nth-of-type(2) {
    padding: 80px 8% 0 8%;
}

.contents__Container.company .wrapper.partner:nth-of-type(2) .box {
    margin: 0 0 0 35px;
    position: relative;
}

.contents__Container.company .wrapper.partner:nth-of-type(2) .box::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #63B0C4;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
}

.contents__Container.company .wrapper.partner:nth-of-type(3) {
    padding: 0 8% 0 8%;
    margin: 30px 0 0 0;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) ul li {
    list-style: none;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) {
    width: 265px;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) a:nth-of-type(2) {
    display: block;
    font-weight: 600;
    color: #333333;
    text-decoration: none;
    padding: 15px 0 0 0;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) a:nth-of-type(2) span {
    position: relative;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) a:nth-of-type(2) span::after {
    content: '';
    width: 15px;
    height: 14px;
    background: url(../images/tab.svg) no-repeat;
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1):hover a {
    text-decoration: underline;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) img {
    width: 100%;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) {
    margin: 20px 0 0 0;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) h1 {
    font-weight: 500;
    font-size: 1.2rem;
    margin: 0 0 0 20px;
    position: relative;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) h1::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #63B0C4;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) > ul {
    display: grid;
    gap: 5px 0;
    margin: 15px 0 0 0;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) > ul > li {
    margin: 0 0 0 40px;
    position: relative;
}

.contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) > ul > li::before {
    content: '';
    width: 20px;
    height: 2px;
    background-color: #63B0C4;
    position: absolute;
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .contents__Container.company .contents__Box.partner {
        background-color: #F1EEE7;
        padding: calc(40px + 40px) 0 80px 0;
        position: relative;
        z-index: 0;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(1) {
        padding: 0 8% 0 8%;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(1) p {
        padding: 40px 0 40px 0;
        border-bottom: solid 1px #333333;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(2) {
        padding: 40px 8% 0 8%;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(2) .box {
        margin: 0 0 0 30px;
        position: relative;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(2) .box::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: -35px;
        transform: translateY(-50%);
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) {
        padding: 0 8% 0 8%;
        margin: 30px 0 0 0;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) ul li {
        list-style: none;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) {
        width: 265px;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) a:nth-of-type(2) {
        display: block;
        font-weight: 600;
        color: #333333;
        text-decoration: none;
        padding: 15px 0 0 0;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) a:nth-of-type(2) span {
        position: relative;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) a:nth-of-type(2) span::after {
        content: '';
        width: 15px;
        height: 14px;
        background: url(../images/tab.svg) no-repeat;
        position: absolute;
        top: 50%;
        right: -20px;
        transform: translateY(-50%);
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1):hover a {
        text-decoration: underline;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(1) img {
        width: 100%;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) {
        margin: 20px 0 0 0;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) h1 {
        font-weight: 500;
        font-size: 1.2rem;
        margin: 0 0 0 20px;
        position: relative;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) h1::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) > ul {
        display: grid;
        gap: 5px 0;
        margin: 15px 0 0 0;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) > ul > li {
        margin: 0 0 0 40px;
        position: relative;
    }
    
    .contents__Container.company .wrapper.partner:nth-of-type(3) .box:nth-of-type(2) > ul > li::before {
        content: '';
        width: 20px;
        height: 2px;
        background-color: #63B0C4;
        position: absolute;
        top: 50%;
        left: -35px;
        transform: translateY(-50%);
    }
}
/*-----   /contents partner   -----*/

/*-----   overview   -----*/
.overview__Container .contents__Wrapper:nth-of-type(1) {
    padding: 0 8% 0 8%;
}

.overview__Container .contents__Wrapper:nth-of-type(1) img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16 / 6;
}

.overview__Container .contents__Wrapper:nth-of-type(2) {
    padding: 0 8% 0 8%;
    margin: 90px 0 0 0;
}

.overview__Container .contents__Wrapper:nth-of-type(2) h1 {
    font-weight: 600;
    font-size: 2.4rem;
}

.overview__Container .contents__Wrapper:nth-of-type(2) p {
    line-height: 1.8;
    margin: 60px 0 0 0;
}

.overview__Container .contents__Wrapper:nth-of-type(3) {
    margin: 90px 0 0 0;
}

.overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) {
    display: flex;
    align-items: center;
    padding: 0% 16% 0 16%;
}

.overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) h2 {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.8;
    padding: 0 0 40px 0;
}

.overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) span {
    display: inline-block;
    font-weight: 400;
    font-size: 1.2rem;
    margin: 0 0 0 calc(15px + 15px);
    position: relative;
}

.overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) span::before {
    content: '';
    width: 15px;
    height: 1px;
    background-color: #333333;
    position: absolute;
    top: 50%;
    left: calc(-15px - 15px);
    transform: translateY(-50%);
}

.overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) p {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8;
    padding: 40px 0 0 0;
}

.overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(2) img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 18 / 16;
}

.overview__Container .contents__Wrapper:nth-of-type(4) {
    padding: 120px 8% 120px 8%;
    margin: 120px 0 0 0;
    background-color: #F1EEE7;
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container {
    display: grid;
    grid-template-columns:30% 70%;
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) p {
    font-weight: 400;
    line-height: 1.8;
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul {
    margin: 90px 0 0 0;
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li {
    list-style: none;
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li:nth-of-type(n + 1) {
    margin: 60px 0 0 0;
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > .wrapper .box {
    margin: 0 0 0 35px;
    position: relative;
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > .wrapper .box::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #a3cacc;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: -35px;
    transform: translateY(-50%);
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul {
    margin: 25px 0 0 0;
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul > li {
    list-style: none;
    padding: 0 0 0 70px;
    position: relative;
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul > li::before {
    content: '';
    width: 20px;
    height: 2px;
    background-color: #a3cacc;
    position: absolute;
    top: 50%;
    left: calc(70px - 35px);
    transform: translateY(-50%);
}

.overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul > li:nth-of-type(n + 1) {
    margin: 20px 0 0 0;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .overview__Container .contents__Wrapper:nth-of-type(1) {
        padding: 0 8% 0 8%;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(1) img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 6;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(2) {
        padding: 0 8% 0 8%;
        margin: 80px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(2) h1 {
        font-weight: 600;
        font-size: 2.1rem;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(2) p {
        line-height: 1.8;
        margin: 50px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) {
        margin: 80px 0 0 0;
    }

    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) {
        display: block;
        align-items: center;
        padding: 0% 24% 0 8%;
        order: 2;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) h2 {
        font-weight: 500;
        font-size: 1.6rem;
        line-height: 1.8;
        padding: 60px 0 40px 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) span {
        display: inline-block;
        font-weight: 400;
        font-size: 1.2rem;
        margin: 0 0 0 calc(15px + 15px);
        position: relative;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) span::before {
        content: '';
        width: 15px;
        height: 1px;
        background-color: #333333;
        position: absolute;
        top: 50%;
        left: calc(-15px - 15px);
        transform: translateY(-50%);
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) p {
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 1.8;
        padding: 40px 0 0 0;
    }

    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(2) {
        padding: 0 0 0 8%;
        order: 1;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(2) img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 11;
    }

    .overview__Container .contents__Wrapper:nth-of-type(4) {
        padding: 80px 8% 80px 8%;
        margin: 80px 0 0 0;
        background-color: #F1EEE7;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container {
        display: grid;
        grid-template-columns:30% 70%;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) p {
        font-weight: 400;
        line-height: 1.8;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul {
        margin: 90px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li {
        list-style: none;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li:nth-of-type(n + 1) {
        margin: 60px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > .wrapper .box {
        margin: 0 0 0 35px;
        position: relative;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > .wrapper .box::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: -35px;
        transform: translateY(-50%);
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul {
        margin: 25px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul > li {
        list-style: none;
        padding: 0 0 0 70px;
        position: relative;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul > li::before {
        content: '';
        width: 20px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: calc(70px - 35px);
        transform: translateY(-50%);
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul > li:nth-of-type(n + 1) {
        margin: 20px 0 0 0;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .overview__Container .contents__Wrapper:nth-of-type(1) {
        padding: 0 8% 0 8%;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(1) img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 8;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(2) {
        padding: 0 8% 0 8%;
        margin: 60px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(2) h1 {
        font-weight: 600;
        font-size: 1.8rem;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(2) p {
        line-height: 1.8;
        margin: 40px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) {
        margin: 60px 0 0 0;
    }

    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) {
        display: block;
        align-items: center;
        padding: 0% 8% 0 8%;
        order: 2;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) h2 {
        font-weight: 500;
        font-size: 1.4rem;
        line-height: 1.6;
        padding: 40px 0 25px 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) span {
        display: inline-block;
        font-weight: 400;
        font-size: 1.1rem;
        margin: 0 0 0 calc(15px + 13px);
        position: relative;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) span::before {
        content: '';
        width: 15px;
        height: 1px;
        background-color: #333333;
        position: absolute;
        top: calc(50% + 1px);
        left: calc(-15px - 13px);
        transform: translateY(-50%);
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(1) p {
        font-weight: 400;
        font-size: 1.2rem;
        line-height: 1.8;
        padding: 25px 0 0 0;
    }

    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(2) {
        padding: 0 0 0 8%;
        order: 1;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(3) .grid__Container .box:nth-of-type(2) img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 11;
    }

    .overview__Container .contents__Wrapper:nth-of-type(4) {
        padding: 60px 8% 60px 8%;
        margin: 60px 0 0 0;
        background-color: #F1EEE7;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) p {
        font-weight: 400;
        line-height: 1.8;
        margin: 25px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul {
        margin: 70px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li {
        list-style: none;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li:nth-of-type(n + 1) {
        margin: 60px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > .wrapper .box {
        margin: 0 0 0 35px;
        position: relative;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > .wrapper .box::before {
        content: '';
        width: 10px;
        height: 10px;
        background-color: #a3cacc;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: -35px;
        transform: translateY(-50%);
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul {
        margin: 25px 0 0 0;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul > li {
        list-style: none;
        padding: 0 0 0 70px;
        position: relative;
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul > li::before {
        content: '';
        width: 20px;
        height: 2px;
        background-color: #a3cacc;
        position: absolute;
        top: 50%;
        left: calc(70px - 35px);
        transform: translateY(-50%);
    }
    
    .overview__Container .contents__Wrapper:nth-of-type(4) .container > .grid__Container > .box:nth-of-type(2) > ul > li > ul > li:nth-of-type(n + 1) {
        margin: 20px 0 0 0;
    }
}
/*-----   /overview   -----*/

/*-----   service   -----*/
.service__Container {
    padding: 0 0 130px 0;
}

.service__Container .contents__Wrapper:nth-of-type(1) {
    padding: calc(40px + 130px) 8% 0 8%;
}

.service__Container .contents__Wrapper:nth-of-type(1) p {
    padding: 0 0 70px 0;
    margin: 80px 0 0 0;
    border-bottom: solid 1px #808080;
}

.service__Container .contents__Wrapper:nth-of-type(2) {
    padding: 0 8% 0 8%;
    margin: 90px 0 0 0;
}

.service__Container .contents__Wrapper:nth-of-type(3),
.service__Container .contents__Wrapper:nth-of-type(5),
.service__Container .contents__Wrapper:nth-of-type(6),
.service__Container .contents__Wrapper:nth-of-type(7),
.service__Container .contents__Wrapper:nth-of-type(8) {
    padding: 0 8% 0 8%;
    margin: 90px 0 0 0;
}

.service__Container .contents__Wrapper:nth-of-type(4) {
    padding: 0 8% 0 8%;
    margin: 120px 0 0 0;
}

.service__Container .contents__Wrapper:nth-of-type(4) > .wrapper.philosophy {
    padding: calc(40px + 120px) 0 0 0;
    border-top: solid 1px #e8e8e8;
}

.service__Container .contents__Wrapper:nth-of-type(4) p {
    padding: 0 0 70px 0;
    border-bottom: solid 1px #333333;
    margin: 80px 0 0 0;
}

.service-content__Container > picture > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16 / 6;
}

.service-content__Container.ce-scenery > picture > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center bottom;
    aspect-ratio: 16 / 6;
}

.service-content__Container > .box:nth-of-type(1) {
    width: 70%;
    margin: -90px 0 0 0;
    position: relative;
    z-index: 1;
}

.service-content__Container > .box:nth-of-type(1)::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #FAF9F7;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.service-content__Container > .box:nth-of-type(1) > a {
    display: block;
    color: #333333;
    text-decoration: none;
    text-shadow: 
        1px 1px 0px #ffffff, -1px -1px 0px #ffffff,
        -1px 1px 0px #ffffff,  1px -1px 0px #ffffff,
        1px 0px 0px #ffffff, -1px  0px 0px #ffffff,
        0px 1px 0px #ffffff,  0px -1px 0px #ffffff;
    ;
    background-color: #FAF9F7;
    padding: calc(25px + 45px) 0 45px 0;
    position: relative;
    z-index: 5;
}

.service-content__Container > .box:nth-of-type(1) > a span {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 40px;
    right: 40px;
}

.service-content__Container > .box:nth-of-type(1) > a span::before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #63B0C4;
    border-radius: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.service-content__Container > .box:nth-of-type(1) > a span::after {
    content: '';
    display: inline-block;
    width: 25px;
    height: 15px;
    background: url(../images/arrow-right.svg) no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translateY(-50%) translateX(-50%);
}

.service-content__Container > .box:nth-of-type(1) > a:hover span {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 20px;
    right: 20px;
    transition: 0.3s;
}

.service-content__Container > .box:nth-of-type(1) > a:hover span::before {
    content: '';
    display: inline-block;
    width: 70px;
    height: 70px;
    background-color: #63B0C4;
    border-radius: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    transition: 0.3s;
}

.service-content__Container > .box:nth-of-type(1) > p {
    font-weight: 400;
    line-height: 1.8;
    padding: 0 4% 0 0;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .service__Container {
        padding: 0 0 80px 0;
    }

    .service__Container .contents__Wrapper:nth-of-type(1) {
        padding: calc(40px + 80px) 8% 0 8%
    }
    
    .service__Container .contents__Wrapper:nth-of-type(1) p {
        padding: 0 0 60px 0;
        margin: 70px 0 0 0;
        border-bottom: solid 1px #808080;
    }
    
    .service__Container .contents__Wrapper:nth-of-type(2) {
        padding: 0 8% 0 8%;
        margin: 80px 0 0 0;
    }

    .service__Container .contents__Wrapper:nth-of-type(3),
    .service__Container .contents__Wrapper:nth-of-type(5),
    .service__Container .contents__Wrapper:nth-of-type(6),
    .service__Container .contents__Wrapper:nth-of-type(7),
    .service__Container .contents__Wrapper:nth-of-type(8) {
        padding: 0 8% 0 8%;
        margin: 80px 0 0 0;
    }

    .service__Container .contents__Wrapper:nth-of-type(4) {
        padding: 0 8% 0 8%;
        margin: 80px 0 0 0;
    }

    .service__Container .contents__Wrapper:nth-of-type(4) > .wrapper.philosophy {
        padding: calc(40px + 80px) 0 0 0;
        border-top: solid 1px #e8e8e8;
    }

    .service__Container .contents__Wrapper:nth-of-type(4) p {
        padding: 0 0 60px 0;
        border-bottom: solid 1px #333333;
        margin: 60px 0 0 0;
    }
    
    .service-content__Container > picture > img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 7;
    }

    .service-content__Container.ce-scenery > picture > img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center bottom;
        aspect-ratio: 16 / 7;
    }
    
    .service-content__Container > .box:nth-of-type(1) {
        width: 80%;
        margin: -70px 0 0 0;
        position: relative;
        z-index: 1;
    }
    
    .service-content__Container > .box:nth-of-type(1)::before {
        content: '';
        width: 100%;
        height: 100%;
        background-color: #FAF9F7;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a {
        display: block;
        color: #333333;
        text-decoration: none;
        text-shadow: 
            1px 1px 0px #ffffff, -1px -1px 0px #ffffff,
            -1px 1px 0px #ffffff,  1px -1px 0px #ffffff,
            1px 0px 0px #ffffff, -1px  0px 0px #ffffff,
            0px 1px 0px #ffffff,  0px -1px 0px #ffffff;
        ;
        background-color: #FAF9F7;
        padding: calc(15px + 45px) 0 35px 2px;
        position: relative;
        left: -2px;
        z-index: 5;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a span {
        width: 45px;
        height: 45px;
        position: absolute;
        top: 30px;
        right: 30px;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a span::before {
        content: '';
        display: inline-block;
        width: 45px;
        height: 45px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a span::after {
        content: '';
        display: inline-block;
        width: 25px;
        height: 15px;
        background: url(../images/arrow-right.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        transform: translateY(-50%) translateX(-50%);
    }
    
    .service-content__Container > .box:nth-of-type(1) > a:hover span {
        width: 45px;
        height: 45px;
        position: absolute;
        top: 30px;
        right: 30px;
        transition: 0s;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a:hover span::before {
        content: '';
        display: inline-block;
        width: 45px;
        height: 45px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        transition: 0s;
    }
    
    .service-content__Container > .box:nth-of-type(1) > p {
        font-weight: 400;
        line-height: 1.8;
        padding: 0 4% 0 0;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .service__Container {
        padding: 0 0 60px 0;
    }

    .service__Container .contents__Wrapper:nth-of-type(1) {
        padding: calc(40px + 60px) 8% 0 8%
    }
    
    .service__Container .contents__Wrapper:nth-of-type(1) p {
        line-height: 1.8;
        padding: 0 0 40px 0;
        margin: 50px 0 60px 0;
        border-bottom: solid 1px #808080;
    }
    
    .service__Container .contents__Wrapper:nth-of-type(2) {
        padding: 0 0% 0 8%;
        margin: 40px 0 0 0;
    }

    .service__Container .contents__Wrapper:nth-of-type(3),
    .service__Container .contents__Wrapper:nth-of-type(5),
    .service__Container .contents__Wrapper:nth-of-type(6),
    .service__Container .contents__Wrapper:nth-of-type(7),
    .service__Container .contents__Wrapper:nth-of-type(8) {
        padding: 0 0% 0 8%;
        margin: 60px 0 0 0;
    }

    .service__Container .contents__Wrapper:nth-of-type(4) {
        padding: 0 8% 0 8%;
        margin: 60px 0 0 0;
    }

    .service__Container .contents__Wrapper:nth-of-type(4) > .wrapper.philosophy {
        padding: calc(40px + 60px) 0 0 0;
        border-top: solid 1px #e8e8e8;
    }

    .service__Container .contents__Wrapper:nth-of-type(4) p {
        padding: 0 0 40px 0;
        border-bottom: solid 1px #333333;
        margin: 50px 0 0 0;
    }
    
    .service-content__Container > picture > img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 10.5;
    }

    .service-content__Container.ce-scenery > picture > img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center center;
        aspect-ratio: 16 / 10.5;
    }
    
    .service-content__Container > .box:nth-of-type(1) {
        width: 92%;
        margin: -50px 0 0 0;
        position: relative;
        z-index: 1;
    }
    
    .service-content__Container > .box:nth-of-type(1)::before {
        content: '';
        width: 100%;
        height: 100%;
        background-color: #FAF9F7;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a {
        display: block;
        color: #333333;
        text-decoration: none;
        text-shadow: 
            1px 1px 0px #ffffff, -1px -1px 0px #ffffff,
            -1px 1px 0px #ffffff,  1px -1px 0px #ffffff,
            1px 0px 0px #ffffff, -1px  0px 0px #ffffff,
            0px 1px 0px #ffffff,  0px -1px 0px #ffffff;
        ;
        background-color: #FAF9F7;
        padding: calc(15px + 20px) 0 25px 2px;
        position: relative;
        left: -2px;
        z-index: 5;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a span {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 20px;
        right: 15px;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a span::before {
        content: '';
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a span::after {
        content: '';
        display: inline-block;
        width: 18px;
        height: 11px;
        background: url(../images/arrow-right.svg) no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        transform: translateY(-50%) translateX(-50%);
    }
    
    .service-content__Container > .box:nth-of-type(1) > a:hover span {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 20px;
        right: 15px;
        transition: 0s;
    }
    
    .service-content__Container > .box:nth-of-type(1) > a:hover span::before {
        content: '';
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: #63B0C4;
        border-radius: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        transition: 0s;
    }
    
    .service-content__Container > .box:nth-of-type(1) > p {
        font-weight: 400;
        line-height: 1.8;
        padding: 0 0% 0 0;
    }
}
/*-----   /service   -----*/

/*-----   top-page   -----*/
.top__Wrapper {
    padding: 130px 0 130px 0;
}

.top__Wrapper .top__Container:nth-of-type(1) {
    padding: 0 8% 0 8%;
    margin: 0 0 90px 0;
}

.top__Wrapper .top__Container:nth-of-type(1) > h1 {
    font-weight: 600;
    font-size: 4.8rem;
}

.top__Wrapper .top__Container:nth-of-type(2) .grid__Container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(1) {
    padding: 0 16% 0 16%;
}

.top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(1) p {
    line-height: 1.8;
}

.top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(1) .button__Wrapper.Lg {
    margin: 90px 0 0 0;
}

.top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(2) img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16 / 16;
}

.top__Wrapper .top__Container:nth-of-type(3) {
    margin: -20% 0 0 0;
}

.top__Wrapper .top__Container:nth-of-type(3) img {
    width: 45%;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16 / 10;
}

.top__Wrapper .top__Container:nth-of-type(4) {
    padding: 0 8% 0 8%;
    margin: 5% 0 0 0;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .top__Wrapper {
        padding: 80px 0 80px 0;
    }
    
    .top__Wrapper .top__Container:nth-of-type(1) {
        padding: 0 8% 0 8%;
        margin: 0 0 70px 0;
    }
    
    .top__Wrapper .top__Container:nth-of-type(1) > h1 {
        font-weight: 600;
        font-size: 3.8rem;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(1) {
        padding: 0 16% 0 16%;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(1) p {
        line-height: 1.8;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(1) .button__Wrapper.Lg {
        margin: 60px 0 0 0;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(2) img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 18;
    }
    
    .top__Wrapper .top__Container:nth-of-type(3) {
        margin: -10% 0 0 0;
    }
    
    .top__Wrapper .top__Container:nth-of-type(3) img {
        width: 45%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 11;
    }
    
    .top__Wrapper .top__Container:nth-of-type(4) {
        padding: 0 8% 0 8%;
        margin: 5% 0 0 0;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .top__Wrapper {
        padding: 60px 0 60px 0;
    }
    
    .top__Wrapper .top__Container:nth-of-type(1) {
        padding: 0 8% 0 8%;
        margin: 0 0 40px 0;
    }
    
    .top__Wrapper .top__Container:nth-of-type(1) > h1 {
        font-weight: 600;
        font-size: 2.8rem;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px 0;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(1) {
        padding: 0 8% 0 8%;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(1) p {
        line-height: 1.8;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(1) .button__Wrapper.Lg {
        margin: 40px 0 0 0;
    }
    
    .top__Wrapper .top__Container:nth-of-type(2) .grid__Container .box:nth-of-type(2) img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 16;
    }
    
    .top__Wrapper .top__Container:nth-of-type(3) {
        margin: -15% 0 0 0;
    }
    
    .top__Wrapper .top__Container:nth-of-type(3) img {
        width: 80%;
        height: auto;
        object-fit: cover;
        object-position: center;
        aspect-ratio: 16 / 11;
    }
    
    .top__Wrapper .top__Container:nth-of-type(4) {
        padding: 0 8% 0 8%;
        margin: -5% 0 0 0;
    }
}

.top__header {
    position: relative;
}

.top__header > .wrapper:nth-of-type(1) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.top__header > .wrapper:nth-of-type(1) > h1 {
    font-weight: 500;
    font-size: 2.2vw;
    font-size: 2.2dvw;
    letter-spacing: 1vw;
    letter-spacing: 1dvw;
    color: #ffffff;
    white-space: nowrap;
    transform: translateY(-10%);
}

.top__header > .wrapper:nth-of-type(2) > .grid__Container {
    display: grid;
    grid-template-columns: 50% 50%;
    position: relative;
    z-index: -1;
}

.top__header > .wrapper:nth-of-type(2) > .grid__Container .box .swiper .swiper-slide img {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    object-position: center;
    filter: brightness(70%);
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .top__header {
        position: relative;
    }
    
    .top__header > .wrapper:nth-of-type(1) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
    
    .top__header > .wrapper:nth-of-type(1) > h1 {
        font-weight: 500;
        font-size: 3.2vw;
        font-size: 3.2dvw;
        letter-spacing: 0.8vw;
        letter-spacing: 0.8dvw;
        color: #ffffff;
        white-space: nowrap;
    }
    
    .top__header > .wrapper:nth-of-type(2) > .grid__Container {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 50% 50%;
        position: relative;
        z-index: -1;
    }
    
    .top__header > .wrapper:nth-of-type(2) > .grid__Container .box .swiper .swiper-slide img {
        width: 100%;
        height: 50vh;
        height: 50dvh;
        object-fit: cover;
        object-position: center;
        filter: brightness(70%);
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .top__header {
        position: relative;
    }
    
    .top__header > .wrapper:nth-of-type(1) {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
    
    .top__header > .wrapper:nth-of-type(1) > h1 {
        font-weight: 500;
        font-size: 4.2vw;
        font-size: 4.2dvw;
        letter-spacing: 0.8vw;
        letter-spacing: 0.8dvw;
        color: #ffffff;
        white-space: nowrap;
    }
    
    .top__header > .wrapper:nth-of-type(2) > .grid__Container {
        display: block;
        grid-template-columns: 100%;
        grid-template-rows: 50% 50%;
        position: relative;
        z-index: -1;
    }
    
    .top__header > .wrapper:nth-of-type(2) > .grid__Container .box .swiper .swiper-slide img {
        width: 100%;
        height: 50vh;
        height: 50dvh;
        object-fit: cover;
        object-position: center;
        filter: brightness(70%);
    }

    .top__header > .wrapper:nth-of-type(2) > .grid__Container .box:nth-of-type(2) {
        transform: translateY(-0.1%);
    }
}

.recruit-topic__Warapper {
    width: 100%;
    height: auto;
}

.recruit-topic__Warapper .container {
    position: absolute;
    bottom: -25px;
    right: 0;
}

.recruit-topic__Warapper .container a {
    display: inline-block;
    width: auto;
    height: auto;
    color: #333333;
    background-color: #F1EEE7;
    border-radius: 15px 0 0 15px;
    padding: 35px 35px 35px 65px;
    text-decoration: none;
}

.recruit-topic__Warapper .container a::before {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 35px;
    background-color: #63B0C4;
    border-radius: 50%;
    transform: translateY(-50%);
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .recruit-topic__Warapper .container {
        position: absolute;
        bottom: -20px;
        right: 0;
    }
    
    .recruit-topic__Warapper .container a {
        display: inline-block;
        width: auto;
        height: auto;
        color: #333333;
        background-color: #F1EEE7;
        border-radius: 15px 0 0 15px;
        padding: 15px 5px 20px 40px;
        text-decoration: none;
    }

    .recruit-topic__Warapper .container a::before {
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        left: 15px;
        background-color: #63B0C4;
        border-radius: 50%;
        transform: translateY(-50%);
    }
}

/*-----   /top-page   -----*/