@charset "utf-8";

body {
    color: var(--font-black);
}
/*========= VISUAL ===============*/
.visual {
  background: url(../images/firstvisual.webp) center / cover;
}

/*****  VISUAL SP *****/
@media screen and (max-width: 768px){
    .visual {
        background: url(../images/firstvisual_sp.webp) center / cover;
    }
} /* SP 768px */
/*========= CONTENTS ===============*/

/*========= COMPETENCE ===============*/
#competence {
    padding: 10% 15%;
}

#competence .title,
#competence .titlename {
    position: initial;
    font-size: clamp(1.8rem, 2.22vw, 3.2rem);
    text-align: center;
    line-height: 1.5;
}

#competence .title {
    position: relative;
    display: inline-block;
    left: 50%;
    color: var(--font-black);
    transform: translateX(-50%);
    padding-bottom: 0.8rem;
}

#competence .title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(45vw, 35rem);
    height: 0.8rem;
    background: #FFEE04;
}

#competence .text {
    position: relative;
    display: inline-block;
    line-height: 1.4;
    color: var(--main-color);
    font-weight: 700;
    font-size: clamp(1.6rem, 1.38vw, 2rem);
}

#competence .titlename {
    font-size: clamp(1.4rem, 1.38vw, 2rem);
    color: rgba(var(--main-color-rgb), 0.3);
}

#competence ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 4rem;
    row-gap: 2rem;
    margin-top: 4rem;
}

#competence ul li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#competence ul li:not(:last-child)::after {
    content: '▶';
    position: absolute;
    right: -2.8rem;
    top: clamp(4rem, 7vw, 7rem);
    color: var(--main-color);
    font-size: clamp(2rem, 2.22vw, 3.2rem);
    line-height: 1;
}

#competence ul li img {
    width: 100%;
    height: auto;
    display: block;
}

#competence ul li p {
    font-size: clamp(1.2rem, 1.04vw, 1.5rem);
    line-height: 1.8;
}

#competence ul.competence__notes {
    display: block;
    grid-template-columns: unset;
    margin-top: 0;
    gap: 0;
}

#competence ul.competence__notes li {
    position: static;
    padding-left: 1.4em;
    font-size: clamp(1.1rem, 0.97vw, 1.4rem);
    line-height: 1.8;
    gap: 0;
}

#competence ul.competence__notes li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--main-color);
    font-size: 0.8em;
}

#competence ul.competence__notes li::after {
    display: none;
}

.topic {
    font-size: clamp(1.5rem, 1.94vw, 2.8rem);
    padding: 0.25em 0.5em;
    border-left: solid 5px var(--main-color);
    color: var(--main-color);
    font-weight: 700;
}

.competence__text {
    position: relative;
    padding-left: 2rem;
    font-size: clamp(1.2rem, 1.38vw, 1.8rem);
    line-height: 2;
}


/*****  COMPETENCE SP *****/
@media screen and (max-width: 1024px){
    #competence {
        padding: 10% 10%;
    }

    #competence ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.4rem;
        row-gap: 2.4rem;
    }

    #competence ul li::after {
        display: none;
    }
}

@media screen and (max-width: 768px){
    #competence {
        padding: 12% 7%;
    }

    #competence ul {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
} /* SP 768px */

/*========= FLOW ===============*/
#flow {
    background: url(../images/flowbg.webp) center / cover;
    padding: 10% 7% 0;
    /* 調整は基本この変数群のみ */
    --flow-circle-size: 300px;
    --flow-item-gap: 120px;
    --flow-text-offset: 360px;
    --flow-line-left: 149px;
    --flow-line-top: 300px;
    --flow-line-max: 144px;
    --flow-line-width: 2px;
    --flow-line-alpha: 0.45;
    --flow-text-gap-bottom: 20px;
}

#flow .timeline li {
    position: relative;
    min-height: var(--flow-circle-size);
    padding: 0 0 var(--flow-item-gap) 0;
}

#flow .timeline li::after {
    width: var(--flow-circle-size);
    height: var(--flow-circle-size);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#flow .timeline li:nth-child(1)::after {
    background-image: url(../images/flow01.webp);
}

#flow .timeline li:nth-child(2)::after {
    background-image: url(../images/flow02.webp);
}

#flow .timeline li:nth-child(3)::after {
    background-image: url(../images/flow03.webp);
}

#flow .timeline li:nth-child(4)::after {
    background-image: url(../images/flow04.webp);
}

#flow .timeline li:nth-child(5)::after {
    background-image: url(../images/flow05.webp);
}

#flow .timeline dl {
    margin: 0 0 var(--flow-text-gap-bottom) var(--flow-text-offset);
    min-height: var(--flow-circle-size);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#flow .flow-note {
    position: relative;
    padding-left: 1.4em;
}

#flow .flow-note::before {
    content: '▶';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--main-color);
}

#flow .border-line {
    width: var(--flow-line-width);
    left: var(--flow-line-left);
    top: var(--flow-line-top);
    max-height: var(--flow-line-max);
    background: rgba(var(--main-color-rgb), var(--flow-line-alpha));
}

#flow .timeline li:last-child .border-line {
    display: none;
}

#flow .timeline-actions {
    display: flex;
    gap: 5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

#flow .timeline-actions .btn {
    padding: 0 1.5rem;
}

#flow .timeline-actions .icon {
    margin-right: 0.8rem;
    font-size: 1.2em;
}

.btn::before {
    content: '';
    background: rgba(255, 170, 0, 0.5);
    /* background: rgba(var(--main-purple-rgb), 0.3); */
}

#flow .timeline-actions .btn-mail::before {
    content: '';
    background: rgba(var(--main-color-rgb), 0.3) !important;
}

.number {
    font-size: clamp(2rem, 3.47vw, 5rem);
    line-height: 1;
}

strong {
    margin-left: 2rem;
    display: flex;
    align-items: center;
}

#flow .timeline dt {
    display: flex;
    align-items: center;
}

/*****  FLOW SP *****/
@media screen and (max-width: 768px){
    #flow {
        background: url(../images/flowbg_sp.webp) center / cover;
        --flow-circle-size: 180px;
        --flow-item-gap: 72px;
        --flow-text-offset: 200px;
        --flow-line-left: 89px;
        --flow-line-top: 180px;
        --flow-line-max: 72px;
        --flow-line-width: 2px;
        --flow-text-gap-bottom: 16px;
    }
} /* SP 768px */

/*========= BRING ===============*/
/*========= COLLECTION ===============*/
.section--bring,
.section--collection {
    padding: 5% 7%;
}

#bring strong,
#collection strong {
    position: relative;
    display: block;
    margin: 1rem 0 0 0;
    padding-left: 2rem;
    line-height: 1.5;
}

#bring strong::before,
#collection strong::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--main-color);
}

.bring__contents,
.collection__contents {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4rem;
}

.bring__contents li,
.collection__contents li {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 0.8rem;
    background: var(--gradient);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 1.2rem;
    overflow: visible;
    box-shadow: 0 8px 20px rgba(5, 83, 132, 0.16);
}

.bring__contents li:not(:last-child)::after,
.collection__contents li:not(:last-child)::after {
    content: '▶';
    position: absolute;
    right: -3rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-color);
    font-size: clamp(2rem, 2.22vw, 3.2rem);
    line-height: 1;
    z-index: 2;
}

#bring .bring__contents li br,
#collection .collection__contents li br {
    display: none;
}

.bring__contents li img,
.collection__contents li img {
    width: calc(100% - 5.2rem);
    height: auto;
    display: block;
    margin: 3rem auto 0;
}

#bring .bring__contents li strong,
#collection .collection__contents li strong {
    margin: 1rem 2.6rem 0;
    padding-left: 2.5rem;
    color: var(--font-white);
}

#bring .bring__contents li strong::before,
#collection .collection__contents li strong::before {
    color: #8ae5dc;
}

.bring__contents p,
.collection__contents p {
    margin: 0;
    padding: 0 2.6rem 2.8rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.92);
}

.bring__map {
    padding: clamp(2rem, 2.78vw, 4rem);
    border-radius: 1.2rem;
    border: 1px solid rgba(var(--main-color-rgb), 0.2);
    background: linear-gradient(
        180deg,
        rgba(var(--font-white-rgb), 0.95) 0%,
        rgba(var(--font-white-rgb), 0.9) 100%
    );
    box-shadow: 0 8px 24px rgba(5, 83, 132, 0.1);
}

.bring__map-address {
    font-size: clamp(1.4rem, 1.38vw, 2rem);
    font-weight: 700;
}

.bring__map-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-top: 1.6rem;
}

.bring__map-info div {
    display: grid;
    grid-template-columns: minmax(7.5rem, auto) 1fr;
    align-items: start;
    gap: 2rem;
    font-size: clamp(1.2rem, 1.11vw, 1.6rem);
    line-height: 1.8;
}

.bring__map-info dt {
    color: var(--main-color);
    font-size: clamp(1.3rem, 1.25vw, 1.8rem);
    font-weight: 700;
}

.bring__map-info dd {
    margin: 0;
    color: var(--font-black);
}

.bring__map-embed {
    margin-top: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(var(--main-color-rgb), 0.24);
}

.bring__map-embed iframe {
    display: block;
    width: 100%;
    height: clamp(280px, 34vw, 420px);
    border: 0;
}

.bring__map-link {
    margin-top: 1.2rem;
}

.bring__map-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--main-color);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.bring__map-link a::after {
    content: '↗';
    font-size: 0.95em;
}

@media screen and (max-width: 1024px) {
    .bring__contents,
    .collection__contents {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bring__contents li::after,
    .collection__contents li::after {
        display: none;
    }
}

.bring__text {
    color: var(--main-color);
    font-size: clamp(1.6rem, 1.66vw, 2.4rem);
    font-weight: 700;
    padding-left: 1rem;
}

/*****  BRING, COLLECTION SP *****/
@media screen and (max-width: 768px) {
    .bring__contents,
    .collection__contents {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    #bring .bring__contents li strong,
    #collection .collection__contents li strong {
        margin: 1rem 2rem 0;
        padding-left: 2rem;
    }

    .bring__contents li img, 
    .collection__contents li img {
        width: calc(100% - 3.8rem);
        margin-top: 1.8rem;
    }

    .bring__contents p,
    .collection__contents p {
        padding: 0 2rem 2.2rem;
        line-height: 1.9;
    }

    .bring__map {
        padding: 2rem;
    }

    .bring__map-info div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .bring__map-embed iframe {
        height: 280px;
    }
} /* BRING, COLLECTION SP 768px */

/*========= FIRST SP 480px以下 ===============*/
@media screen and (max-width: 480px){

    /* COMPETENCE SP */
    #competence {
        padding: 5%;
    }

    #competence .title::after {
        width: 50vw;
    }

    #competence ul li {
        width: 80%;
        margin: 0 auto;
    }

    .topic {
        line-height: 1.5;
    }

    /* FLOW SP - 480px以下で調整 */
    #flow {
        background: url(../images/flowbg_sp.webp) center / cover;
        --flow-circle-size: 100px;
        --flow-item-gap: 50px;
        --flow-text-offset: 116px;
        --flow-line-left: calc(var(--flow-circle-size) / 2 - var(--flow-line-width) / 2);
        --flow-line-top: var(--flow-circle-size);
        --flow-line-max: calc(100% - var(--flow-line-top));
        --flow-line-width: 2px;
        --flow-text-gap-bottom: 12px;
        padding: 10% 7% 0;
    }

    #flow .timeline li {
        min-height: var(--flow-circle-size);
        padding: 0 0 var(--flow-item-gap) 0;
    }

    #flow .timeline li::after {
        width: var(--flow-circle-size);
        height: var(--flow-circle-size);
    }

    #flow .timeline dl {
        margin: 0 0 var(--flow-text-gap-bottom) var(--flow-text-offset);
        min-height: var(--flow-circle-size);
    }

    #flow .border-line {
        left: var(--flow-line-left);
        top: var(--flow-line-top);
        max-height: var(--flow-line-max);
    }

    .timeline strong {
        margin-left: 1rem;
        font-size: 1.4rem;
    }

    #flow .timeline-actions {
        flex-direction: column;
        gap: 1rem;
    }

    #flow .timeline-actions .btn {
        width: 100%;
        padding: 0 1rem;
    }

    .timeline {
        padding: 0 0;
    }

    /* BRING / COLLECTION SP */
    .section--bring, .section--collection {
        padding: 0 7%;
    }

    .bring__contents li img,
    .collection__contents li img {
        width: calc(100% - 2.4rem);
        margin-top: 1.4rem;
    }

    .bring__contents p,
    .collection__contents p {
        padding: 0 1.2rem 1.8rem;
    }

    .bring__map {
        padding: 1.5rem;
    }

    .bring__map-embed iframe {
        height: 240px;
    }

} /* SP 480px */