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

/*
------------
casestudy_post.css
------------
*/

/* title_area */
#title_area::before {
    background-image: url(../../images/content/casestudy/titleBg.webp);
}
@media only screen and (max-width: 768px) {
    #title_area::before {
        background-image: url(../../images/content/casestudy/titleBgSP.webp);
    }
}
/* intro_area */
#intro_area {
    margin: 80px 0 0 0;
}
#intro_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
#intro_area .inner h3 {
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.5;
}
#intro_area .inner .main_slider {
    margin: 60px 0 0 0;
    width: calc(100vw * 800 / 1400);
    max-width: 800px;
}
#intro_area .inner .main_slider ul.slider li {
    display: block;
    aspect-ratio: 800 / 540;
}
#intro_area .inner .main_slider ul.slider li img {
    display: block;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    border-radius: clamp(10px, calc(100vw * 20 / 1400), 20px);
}
#intro_area .inner .main_slider .slick_nav {
    margin: 20px 0 0 0;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}
#intro_area .inner ul.info {
    margin: 75px 0 0 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}
#intro_area .inner ul.info li dl {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(28, 33, 35, .2);
    padding: 0 0 15px 0;
}
#intro_area .inner ul.info li dl dt {
    color: var(--accent_color);
}
@media only screen and (max-width: 768px) {
    #intro_area {
        margin: 65px 0 0 0;
    }
    #intro_area .inner {
        width: 85vw;
        max-width: 85vw;
    }
    #intro_area .inner h3 {
        font-size: 2rem;
        letter-spacing: 0.1em;
    }
    #intro_area .inner .main_slider {
        margin: 30px 0 0 0;
        width: 100%;
        max-width: 100%;
    }
    #intro_area .inner .main_slider ul.slider li {
        width: 85vw;
        max-width: 85vw;
    }
    #intro_area .inner .main_slider ul.slider li img {
        border-radius: clamp(10px, calc(100vw * 14 / 375), 14px);
    }
    #intro_area .inner ul.info {
        margin: 35px 0 0 0;
        gap: 15px 10px;
    }
    #intro_area .inner ul.info li dl {
        padding: 0 0 15px 0;
    }
    #intro_area .inner ul.info li:nth-child(1),
    #intro_area .inner ul.info li:nth-child(2) {
        width: 100%;
    }
    #intro_area .inner ul.info li:nth-child(n + 3) {
        width: calc(100% / 2 - 5px);
    }
}
/* commitment_area */
#commitment_area {
    margin: 125px 0 0 0;
    background-color: var(--main_bg_color);
    padding: 125px 0;
}
#commitment_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
#commitment_area .inner .list {
    margin: 65px 0 0 0;
}
#commitment_area .inner .list article:not(:first-child) {
    margin: 65px 0 0 0;
}
#commitment_area .inner .list article {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 50px;
}
#commitment_area .inner .list article .img_area {
    width: 500px;
}
#commitment_area .inner .list article .img_area ul.slider li {
    width: 100%;
    aspect-ratio: 1160 / 800;
    display: block;
    background-color: var(--main_font_color);
    border-radius: clamp(10px, calc(100vw * 20 / 1400), 20px);
    overflow: hidden;
}
.post05 #commitment_area .inner .list article .img_area ul.slider li,
.post06 #commitment_area .inner .list article .img_area ul.slider li,
.post07 #commitment_area .inner .list article .img_area ul.slider li {
    aspect-ratio: 1200 / 800;
}
#commitment_area .inner .list article .img_area ul.slider li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#commitment_area .inner .list article .img_area .slick_nav {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin: 20px 0 0 0;
}
#commitment_area .inner .list article .item {
    width: calc(100% - 500px - 50px);
}
#commitment_area .inner .list article .item h4 {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--accent_color);
}
#commitment_area .inner .list article .item p {
    margin: 15px 0 0 0;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
}
@media only screen and (max-width: 768px) {
    #commitment_area {
        margin: 65px 0 0 0;
        padding: 65px 0;
    }
    #commitment_area .inner {
        width: 85vw;
        max-width: 85vw;
    }
    #commitment_area .inner .list {
        margin: 45px 0 0 0;
    }
    #commitment_area .inner .list article:not(:first-child) {
        margin: 45px 0 0 0;
    }
    #commitment_area .inner .list article {
        display: block;
    }
    #commitment_area .inner .list article .img_area {
        width: 100%;
    }
    #commitment_area .inner .list article .img_area ul.slider li {
        width: 85vw;
        max-width: 85vw;
        border-radius: clamp(10px, calc(100vw * 14 / 375), 14px);
    }
    #commitment_area .inner .list article .item {
        margin: 30px 0 0 0;
        width: 100%;
    }
    #commitment_area .inner .list article .item h4 {
        font-size: 2rem;
        margin: 20px 0 0 0;
    }
}
/* favorite_area */
#favorite_area {
    margin: 125px 0 0 0;
}
#favorite_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
#favorite_area .inner .stit_element h3 {
    line-height: 1.5;
}
#favorite_area .inner .list {
    margin: 65px 0 0 0;
}
#favorite_area .inner .list article:not(:first-child) {
    margin: 65px 0 0 0;
}
#favorite_area .inner .list article {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 50px;
}
#favorite_area .inner .list article .img_area {
    width: 500px;
}
#favorite_area .inner .list article .img_area ul.slider li {
    width: 100%;
    aspect-ratio: 1160 / 800;
    display: block;
    background-color: var(--main_font_color);
    border-radius: clamp(10px, calc(100vw * 20 / 1400), 20px);
    overflow: hidden;
}
.post05 #favorite_area .inner .list article .img_area ul.slider li,
.post06 #favorite_area .inner .list article .img_area ul.slider li,
.post07 #favorite_area .inner .list article .img_area ul.slider li {
    aspect-ratio: 1200 / 800;
}
#favorite_area .inner .list article .img_area ul.slider li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#favorite_area .inner .list article .img_area .slick_nav {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin: 20px 0 0 0;
}
#favorite_area .inner .list article .item {
    width: calc(100% - 500px - 50px);
}
#favorite_area .inner .list article .item h4 {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--accent_color);
    margin: 0 0 20px 0;
}
#favorite_area .inner .list article .item p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
}
@media only screen and (max-width: 768px) {
    #favorite_area {
        margin: 65px 0 0 0;
    }
    #favorite_area .inner {
        width: 85vw;
        max-width: 85vw;
    }
    #favorite_area .inner .list {
        margin: 45px 0 0 0;
    }
    #favorite_area .inner .list article:not(:first-child) {
        margin: 45px 0 0 0;
    }
    #favorite_area .inner .list article {
        display: block;
    }
    #favorite_area .inner .list article .img_area {
        width: 100%;
    }
    #favorite_area .inner .list article .img_area ul.slider li {
        width: 85vw;
        max-width: 85vw;
        border-radius: clamp(10px, calc(100vw * 14 / 375), 14px);
    }
    #favorite_area .inner .list article .item {
        margin: 30px 0 0 0;
        width: 100%;
    }
    #favorite_area .inner .list article .item h4 {
        font-size: 2rem;
        margin: 0 0 15px 0;
    }
}
/* gallery_area */
#gallery_area {
    margin: 250px 0 0 0;
    position: relative;
    z-index: 1;
}
#gallery_area::before {
    content: "";
    width: calc(100vw * 990 / 1400);
    height: 588px;
    background-color: var(--main_bg_color);
    position: absolute;
    top: -125px;
    left: 0;
    z-index: -1;
}
#gallery_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
#gallery_area .inner .slider {
    margin: 65px 0 0 0;
    width: 100%;
}
#gallery_area .inner .slider li {
    width: 100%;
    aspect-ratio: 1160 / 800;
    display: block;
    background-color: var(--main_font_color);
    border-radius: clamp(10px, calc(100vw * 20 / 1400), 20px);
    overflow: hidden;
}
.post05 #gallery_area .inner .slider li,
.post06 #gallery_area .inner .slider li,
.post07 #gallery_area .inner .slider li {
    aspect-ratio: 1200 / 800;
}
#gallery_area .inner .slider .slick-track .slick-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#gallery_area .inner .controls {
    margin: 30px 0 0 0;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0 40px;
}
#gallery_area .inner .controls .slick_nav {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}
#gallery_area .inner .controls p.counter {
    font-family: "Cinzel", serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
#gallery_area .inner .controls p.counter span {
    position: relative;
}
#gallery_area .inner .controls p.counter span:not(:first-child) {
    margin: 0 0 0 40px;
}
#gallery_area .inner .controls p.counter span:nth-child(1)::after {
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--main_font_color);
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%) rotate(35deg);
}
@media only screen and (max-width: 768px) {
    #gallery_area {
        margin: 65px 0 0 0;
        padding: 65px 0;
        background-color: var(--main_bg_color);
    }
    #gallery_area::before {
        content: none;
    }
    #gallery_area .inner {
        width: 85vw;
        max-width: 85vw;
    }
    #gallery_area .inner .slider {
        margin: 45px 0 0 0;
    }
    #gallery_area .inner .slider .slick-track .slick-slide img {
        border-radius: clamp(10px, calc(100vw * 14 / 375), 14px);
    }
    #gallery_area .inner .controls {
        margin: 20px 0 0 0;
        gap: 0 30px;
    }
}
/* comments_area */
#comments_area {
    margin: 125px 0 0 0;
    padding: 125px 0;
    background-color: var(--main_bg_color);
}
#comments_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
#comments_area .inner .element {
    margin: 65px 0 0 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: min(calc(100vw * 50 / 1400), 50px);
}
#comments_area .inner .element.none_photo {
    display: block;
}
#comments_area .inner .element figure {
    flex: 0 0 min(calc(100vw * 500 / 1400), 500px);
    max-width: 500px;
}
#comments_area .inner .element figure img {
    border-radius: clamp(10px, calc(100vw * 20 / 1400), 20px);
}
#comments_area .inner .element .item {
    flex: 1;
}
#comments_area .inner .element.none_photo .item {
    flex: none;
}
#comments_area .inner .element .item h4 {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
}
#comments_area .inner .element .item p {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 15px 0 0 0;
}
@media only screen and (max-width: 768px) {
    #comments_area {
        margin: 65px 0 0 0;
        padding: 0;
        background-color: transparent;
    }
    #comments_area .inner {
        width: 85vw;
        max-width: 85vw;
    }
    #comments_area .inner .element {
        margin: 45px 0 0 0;
        display: block;
    }
    #comments_area .inner .element figure {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    #comments_area .inner .element figure img {
        border-radius: clamp(10px, calc(100vw * 14 / 375), 14px);
    }
    #comments_area .inner .element .item {
        flex: none;
        margin: 25px 0 0 0;
    }
    #comments_area .inner .element .item h4 {
        font-size: 1.8rem;
    }
}
/* plan_area */
#plan_area {
    margin: 125px 0 0 0;
}
#plan_area .inner {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 0 auto;
}
#plan_area .inner article {
    margin: 45px 0 0 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: min(calc(100vw * 50 / 1400), 50px);
}
#plan_area .inner article .img_area {
    flex: 0 0 min(calc(100vw * 700 / 1400), 700px);
    max-width: 700px;
}
#plan_area .inner article .img_area ul.slider li img {
    border-radius: clamp(10px, calc(100vw * 20 / 1400), 20px);
}
#plan_area .inner article .img_area .slick_nav {
    margin: 20px 0 0 0;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}
#plan_area .inner article ul.info {
    flex: 1;
}
#plan_area .inner article ul.info li:not(:first-child) {
    margin: 30px 0 0 0;
}
#plan_area .inner article ul.info li dl dt {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.075em;
    color: var(--accent_color);
}
#plan_area .inner article ul.info li dl dd {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.075em;
    margin: 5px 0 0 0;
}
@media only screen and (max-width: 768px) {
    #plan_area {
        margin: 65px 0 0 0;
    }
    #plan_area .inner {
        width: 85vw;
        max-width: 85vw;
    }
    #plan_area .inner article {
        margin: 35px 0 0 0;
        display: block;
    }
    #plan_area .inner article .img_area {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
    #plan_area .inner article .img_area li {
        width: 85vw;
        max-width: 85vw;
    }
    #plan_area .inner article .img_area ul.slider li img {
        border-radius: clamp(10px, calc(100vw * 14 / 375), 14px);
    }
    #plan_area .inner article ul.info {
        flex: none;
        margin: 30px 0 0 0;
    }
    #plan_area .inner article ul.info li:not(:first-child) {
        margin: 20px 0 0 0;
    }
}
/* casestudy_back */
.casestudy_back {
    width: calc(100vw * 1100 / 1400);
    max-width: 1100px;
    margin: 125px auto 0 auto;
}
@media only screen and (max-width: 768px) {
    .casestudy_back {
        width: 85vw;
        max-width: 85vw;
        margin: 65px auto 0 auto;
    }
}