@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');

/*///// base css /////*/
:root {
    --mwbase: 1200px;
    --lhsmall: 1.4;
    --lhlarge: 1.8;
    --lssmall: 1;
    --lslarge: 3;
}

body{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    letter-spacing: 1.4;
}

.sp-fc14 {
    @media(max-width: 450px){
        font-size: 0.875rem;
        line-height: var(--lhsmall);
    }
}

/* spにした時任意の場所で改行させるため */
span.break {display: inline-block;}

.content {
    .content-inner {
        max-width: var(--mwbase);
        margin-inline: auto;
        padding-inline: 16px;
    }
}

h2 {
    max-width: var(--mwbase);

    &.title {
        border-bottom: #dedede 4px solid;
        padding-bottom: 15px;
        letter-spacing: 5;

        @media(max-width: 450px) {
            letter-spacing: var(--lslarge);
            border-bottom: #dedede 2px solid;
        }
    }
}

 .comp1 {
    img {
        aspect-ratio: 30/17;
        object-fit: cover;
        border-radius: 4px;
    }
 }

 .c-linkCard__text:has(.comp1-txt){
    padding: 1rem;

    @media(max-width: 450px) {
        padding: 0;
    }
 }

 .balloontitle {
    display: grid;
    grid-template-columns: min-content auto;
    align-items: center;

    .balloontitle-left {
        display:grid;
        place-content: center;
        width:112px;
        aspect-ratio:1/1;
        background-image: url(/-/Media/75C5D592EB22483F82CABD41A998A7CF.ashx);
        background-repeat: no-repeat;
        background-size: contain;

        @media(max-width: 450px) {
            width:80px;
        }

        span {
            display: inline-block;
            width: 80px;
            font-weight: 500;
            letter-spacing: var(--lslarge);
            line-height: var(--lhsmall);
            color: #fff;
            translate: -1px -5px;

             @media(max-width: 450px) {
                width:62px;
                letter-spacing: var(--lssmall);
                font-size: 0.875rem;
                translate: -1px -3px;
            }
        }
    }

    .balloontitle-right {
        display: grid;
        width: auto;
        align-items: center;
        padding-inline: 12px;
        line-height: var(--lhsmall);
        letter-spacing: var(--lslarge);
        font-size: 1.4rem;

        span {
            translate: 0px -5px;
        }

        @media(max-width: 450px)  {
            font-size: 1.25rem;
        }
    }

 }

/*///// seach section style /////*/

.mv img {
    width: 100%;
    height: auto;
    object-fit: cover;

    @media(max-width: 450px) {
        height:200px;
    }
}

.lead {
    margin-top: 5rem;
    letter-spacing: var(--lslarge);

    p {
        font-size: 1.6rem;
        font-weight: 500;
        margin: 0;
        line-height: var(--lhlarge);

        @media(max-width: 450px) {
            font-size: 1rem;
            letter-spacing: var(--lssmall);
        }
    }

    @media(max-width: 1000px) {
        margin-top: 3rem;
    }
}


.items {
    max-width: var(--mwbase);;
    margin-inline: auto;
    justify-content: center;

    .item {
        box-sizing: border-box;
        width: calc(33.333% - 20px);
        min-width: 340px;
        max-width:400px;

        img {
        border-radius: 4px;
        object-fit: cover;
        aspect-ratio: 19/11;
        padding-bottom: 8px;
        }
    }
}

.movie {
    h3 {
        font-weight: 500;
        letter-spacing: var( --lslarge);

        @media(max-width: 500px){
            letter-spacing: var( --lssmall);
        }
    }

    figure {
        width: fit-content;
        margin-inline: auto;
    }
    a img.thumbnail {
        width:100%;
        max-width: 500px;
        height:auto;
        aspect-ratio: 30 / 17;
        object-fit: cover;
        border-radius: 4px;

        &+img {
            aspect-ratio: 1/1;
            max-width: 80px;
            height: auto;
        }
    }

}

 .sec-about {
    .philosophy {

        padding: 5rem;

        @media (max-width:800px ) {
            padding: 3rem;

            h3 { font-size: 1.125rem;}
        }

        @media (max-width:600px ) {
            padding: 30px;
        }
        .philosophy-inner {
            padding: 3rem;

            @media (max-width:800px ) {
                padding: 1rem;
            }

            @media (max-width:600px ) {
                padding: 20px;
            }
        }
    }
 }

 .sec-topmessage {

    .photo img {
        width: 100%;
        max-width: 306px;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        margin-inline: auto;
        border-radius: 4px;

        @media (max-width:450px ) {
            max-width: 80%;
        }
    }

 }
 .sec-stories  {
    .pc-show {
        @media (max-width:450px ) {
            display: none;
        }
    }
    .sp-show {
        display: none;
        @media (max-width:450px ) {
            display: block;
        }
    }
    p {
        font-size: 1.2rem;
        line-height: var(--lhlarge);

        @media (max-width:450px ) {
            font-size: 0.9375rem;
        }
    }
}

.sec-sustainable {
    h3 {
        font-size: 1.2rem;
        line-height: var(--lhlarge);

        @media (max-width:450px ) {
            font-size: 1.1rem;
        }
    }
}

.afterword {
    padding: 2rem;
    line-height: var(--lhsmall);
    letter-spacing: var(--lssmall);
    background-color: #f3f3f3;

    h4 {
        font-size: 1.125rem;
        font-weight: 400;
        @media (max-width:450px ) {
            font-size: 1rem;
        }
    }

    @media (max-width:450px ) {
        padding: 16px;
    }
}