@charset "utf-8";
@import "anime.css";

/*
------------
value.css
------------
*/
.in_page #tit_area span.en_sub {
    font-size: 10rem;
}
@media only screen and (max-width: 768px) {
    .in_page #tit_area h2 {
        letter-spacing: 0.025em;
    }
    .in_page #tit_area span.en_sub {
        font-size: 4rem;
    }
}
/* container_box */
.container_box .inner .head span {
    font-family: "Roboto", serif;
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(38, 38, 38, 0.20);
}
.container_box .inner .head h3 {
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    margin: 10px 0 0 0;
}
.container_box .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
@media only screen and (max-width: 768px) {
    .container_box .inner .head span {
        font-size: 1.6rem;
    }
    .container_box .inner .head h3 {
        font-size: 2.2rem;
        margin: 6px 0 0 0;
    }
    .container_box .inner {
        width: 85vw;
        max-width: 85vw;
    }
}
/* philosophy_area */
#philosophy_area {
    margin: 125px 0 0 0;
}
#philosophy_area .inner p.lead {
    margin: 45px 0 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.0125em;
    line-height: 1.8;
}
#philosophy_area .inner .scroll_wrap .diagram {
    width: 100%;
    margin: 65px 0 0 0;
}
#philosophy_area .inner .scroll_wrap .diagram figure {
    margin: 0;
}
#philosophy_area .inner .scroll_wrap .diagram figure img {
    width: 100%;
    height: auto;
    display: block;
}
#philosophy_area .inner .scroll_wrap .scrollbar {
    display: none;
}
#philosophy_area .inner .scroll_wrap .element {
    width: 100%;
    margin: 65px 0 0 0;
}
#philosophy_area .inner .scroll_wrap .element .list {
    display: flex;
    justify-content: flex-start;
    gap: min(calc(100vw * 60 / 1400), 60px);
}
#philosophy_area .inner .scroll_wrap .element .list article .tit span {
     font-family: "Roboto", serif;
     font-size: 1.2rem;
     font-weight: 600;
     letter-spacing: 0.05em;
     line-height: 1.2;
     color: rgba(38, 38, 38, 0.20);
}
#philosophy_area .inner .scroll_wrap .element .list article .tit h4 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    line-height: 1.2;
    margin: 2px 0 0 0;
}
#philosophy_area .inner .scroll_wrap .element .list article p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin: 15px 0 0 0;
}
@media only screen and (max-width: 768px) {
    #philosophy_area {
        margin: 65px 0 0 0;
    }
    #philosophy_area .inner {
        width: 100vw;
        max-width: 100vw;
    }
    #philosophy_area .inner .head {
        width: 85vw;
        margin: 0 auto;
    }
    #philosophy_area .inner p.lead {
        width: 85vw;
        margin: 20px auto 0 auto;
    }
    #philosophy_area .inner .scroll_wrap .diagram {
        margin: 45px 0 0 0;
        padding: 0 7.5vw;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #philosophy_area .inner .scroll_wrap .diagram::-webkit-scrollbar {
        display: none;
    }
    #philosophy_area .inner .scroll_wrap .diagram figure {
        width: 900px;
    }
    #philosophy_area .inner .scroll_wrap .scrollbar {
        position: relative;
        display: block;
        width: 85vw;
        height: 4px;
        margin: 40px auto 0 auto;
        border-radius: 999px;
        background: #f7f7f7;
        overflow: hidden;
    }
    #philosophy_area .inner .scroll_wrap .scrollbar .scrollbar__thumb {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 30%;
        border-radius: 999px;
        background: #A4C1E8;
        transform: translateX(0);
        transition: transform 0.05s linear;
    }
    #philosophy_area .inner .scroll_wrap .element {
        margin: 85px 0 0 0;
        padding: 0 7.5vw;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #philosophy_area .inner .scroll_wrap .element::-webkit-scrollbar {
        display: none;
    }
    #philosophy_area .inner .scroll_wrap .element .list {
        width: 1100px;
        gap: min(calc(100vw * 40 / 375), 40px);
    }
}
/* corporate_area */
#corporate_area {
    background-color: #f7f7f7;
    position: relative;
    margin: calc(100vw * 245 / 1400) 0 0 0;
    padding: calc(100vw * 300 / 1400) 0 125px 0;
}
#corporate_area::before {
    content: "";
    width: calc(100vw * 690 / 1400);
    height: auto;
    aspect-ratio: 690 / 515;
    background-image: url(../../images/content/value/img02.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: calc((100vw * 118 / 1400) * -1);
    right: 0;
}
#corporate_area .inner .element {
    margin: 65px 0 0 0;
}
#corporate_area .inner .element .item:nth-of-type(2) {
    margin: 45px 0 0 0;
}
#corporate_area .inner .element .item h4 {
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}
#corporate_area .inner .element .item h4 span {
    color: #3B81E0;
}
#corporate_area .inner .element .item p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin: 25px 0 0 0;
}
#corporate_area .inner .element .item p span {
    background: linear-gradient(transparent 60%, rgba(252, 235, 166, 0.40) 0%);
}
@media only screen and (max-width: 768px) {
    #corporate_area {
        margin: calc(100vw * 225 / 375) 0 0 0;
        padding: calc(100vw * 165 / 375) 0 65px 0;
    }
    #corporate_area::before {
        width: calc(100vw * 347 / 375);
        top: calc((100vw * 160 / 375) * -1);
    }
    #corporate_area .inner {
        position: relative;
        z-index: 1;
    }
    #corporate_area .inner .element {
        margin: 45px 0 0 0;
    }
    #corporate_area .inner .element .item h4 {
        font-size: 2.4rem;
    }
    #corporate_area .inner .element .item p {
        margin: 15px 0 0 0;
    }
}
/* vision_area */
#vision_area {
    background-image: url(../../images/content/value/img03.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 125px 0;
}
#vision_area::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .85);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#vision_area .inner {
    position: relative;
    z-index: 1;
}
#vision_area .inner .element {
    margin: 65px 0 0 0;
}
#vision_area .inner .element h4 {
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}
#vision_area .inner .element ul {
    margin: 40px 0 0 0;
}
#vision_area .inner .element ul li {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    line-height: 1.5;
    position: relative;
    padding: 0 0 0 55px;
}
#vision_area .inner .element ul li:not(:first-child) {
    margin: 30px 0 0 0;
}
#vision_area .inner .element ul li span {
    background: linear-gradient(transparent 60%, rgba(252, 235, 166, 0.40) 0%);
}
#vision_area .inner .element ul li::before {
    content: "";
    width: 35px;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
@media only screen and (max-width: 768px) {
    #vision_area {
        padding: 65px 0;
    }
    #vision_area .inner .element {
        margin: 45px 0 0 0;
    }
    #vision_area .inner .element h4 {
        font-size: 2.4rem;
    }
    #vision_area .inner .element ul {
        margin: 30px 0 0 0;
    }
    #vision_area .inner .element ul li {
        font-size: 1.8rem;
        padding: 0 0 0 50px;
    }
    #vision_area .inner .element ul li:not(:first-child) {
        margin: 25px 0 0 0;
    }
    #vision_area .inner .element ul li::before {
        width: 30px;
        top: 1.5rem;
        transform: translateY(0);
    }
}
/* management_area */
#management_area {
    margin: 125px 0 0 0;
}
#management_area .inner .tit {
    margin: 65px 0 0 0;
}
#management_area .inner .tit p:nth-of-type(1) {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
#management_area .inner .tit h4 {
    font-family: "Roboto", serif;
    font-size: 5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 7px 0 0 0;
}
#management_area .inner .tit p:nth-of-type(2) {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: 10px 0 0 0;
}
#management_area .inner p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin: 45px 0 0 0;
}
#management_area .inner p span {
    background: linear-gradient(transparent 60%, rgba(252, 235, 166, 0.40) 0%);
}
@media only screen and (max-width: 768px) {
    #management_area {
        margin: 65px 0 0 0;
    }
    #management_area .inner .tit {
        margin: 45px 0 0 0;
    }
    #management_area .inner .tit p:nth-of-type(1) {
        font-size: 1.4rem;
    }
    #management_area .inner .tit h4 {
        font-size: 3rem;
    }
    #management_area .inner .tit p:nth-of-type(2) {
        font-size: 1.4rem;
        margin: 7px 0 0 0;
    }
    #management_area .inner p {
        margin: 30px 0 0 0
    }
}
/* culture_area */
#culture_area {
    margin: 125px 0 0 0;
    position: relative;
}
#culture_area::before {
    content: "";
    width: calc(100vw * 733 / 1400);
    height: auto;
    aspect-ratio: 733 / 390;
    background-color: rgba(59, 129, 224, 0.06);
    position: absolute;
    top: 0;
    left: 0;
}
#culture_area .inner {
    display: flex;
    justify-content: flex-end;
}
#culture_area .inner .element {
    padding: calc(100vw * 225 / 1400) 0 0 0;
}
#culture_area .inner .element .item {
    margin: 65px 0 0 0;
}
#culture_area .inner .element .item h4 {
    font-size: 3.5rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}
#culture_area .inner .element .item p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
}
#culture_area .inner .element .item p {
    margin: 45px 0 0 0;
}
#culture_area .inner .element .item p:nth-of-type(n + 2) {
    margin: 15px 0 0 0;
}
@media only screen and (max-width: 768px) {
    #culture_area {
        margin: 65px 0 0 0;
    }
    #culture_area::before {
        width: calc(100vw * 307 / 375);
        aspect-ratio: 307 / 207;
    }
    #culture_area .inner {
        display: block;
    }
    #culture_area .inner .element {
        padding: calc(100vw * 65 / 375) 0 0 0;
    }
    #culture_area .inner .element .item {
        margin: 45px 0 0 0;
    }
    #culture_area .inner .element .item h4 {
        font-size: 2.4rem;
        line-height: 1.6;
    }
    #culture_area .inner .element .item p {
        margin: 20px 0 0 0;
    }
    #culture_area .inner .element .item p:nth-of-type(n + 2) {
        margin: 10px 0 0 0;
    }
}
/* guiding_area */
#guiding_area {
    margin: 125px 0 0 0;
    padding: 125px 0;
    background-color: #f7f7f7;
}
#guiding_area .element {
    margin: 65px 0 0 0;
}
#guiding_area .element article {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}
#guiding_area .element article:not(:first-child) {
    margin: 45px 0 0 0;
}
#guiding_area .element article span {
    font-family: "Roboto", serif;
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #3B81E0;
}
#guiding_area .element article .item h4 {
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}
#guiding_area .element article .item p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
    margin: 5px 0 0 0;
}
@media only screen and (max-width: 768px) {
    #guiding_area {
        margin: 65px 0 0 0;
        padding: 65px 0;
    }
    #guiding_area .element {
        margin: 45px 0 0 0;
    }
    #guiding_area .element article {
        gap: 10px;
    }
    #guiding_area .element article:not(:first-child) {
        margin: 25px 0 0 0;
    }
    #guiding_area .element article span {
        font-size: 3rem;
    }
    #guiding_area .element article .item h4 {
        font-size: 1.8rem;
    }
}