@charset "UTF-8";

.layer_main figure img{object-position: 18% top;}

#intro{padding: 3.5em 0;}
.intro_tit{text-align: center;font-size: 1.2em;}
.intro_tit + .copy{margin-top: 1em;text-align: center;}
.history_wrap{overflow-x: auto;width: calc(50vw + 29em - 2.4em);padding: 0 0 1em 0;margin: 2em 0 0 -2em;-webkit-overflow-scrolling: touch;cursor: grab;user-select: none;-webkit-user-select: none;}
.history_wrap:active{cursor: grabbing;}
.history{display: flex;color: #231815;margin-right: calc(50% - 50vw);width: calc(50vw + 29em - 2.4em);}
.history > li{overflow: hidden;padding: 0 0.75em;flex-shrink: 0;}
.history > li h5{display: inline-block;text-align: center;}
.history > li h5 span{font-family: "EB Garamond", serif;font-style: italic;font-size: 1.8em;letter-spacing: 0.1em;display: inline-block;padding-left: 0.1em;line-height: 1;opacity: 0;}
.history > li h5 small{font-size: 0.7em;display: block;opacity: 0;}
.history > li h5 i{width: 1.2em;height: 1.2em;border-radius: 50%;background: #4e4449;display: block;margin: 1em auto 0;}
.history > li h5 i::before{content: "";height: 1px;width: 100vw;background: #231815;position: absolute;top: 0;bottom: 0;margin: auto 0;right: 100%;}
.history > li h5 i::after{content: "";height: 1px;width: 100vw;background: #231815;position: absolute;top: 0;bottom: 0;margin: auto 0;left: 100%;}
.history > li:first-of-type h5 i::before{display: none;}
.history > li:last-of-type h5 i::after{display: none;}
.history > li p{font-size: 0.8em;margin: 1em 0 0 1.8em;white-space: nowrap;opacity: 0;}
.history > li.text_ani h5 span,
.history > li.text_ani h5 small,
.history > li.text_ani p
{animation: 0.7s fadeInLeft 0s forwards;}

#intro .img_list figure{width: 24em;}
#intro .img_list figure::after{position: absolute;left: 0;top: 0;display: flex;justify-content: center;align-items: center;width: 1.5em;height: 1.5em;line-height: 1;color: #fff;background: #51a6dd;font-size: 0.7em;}
#intro .img_list figure:nth-of-type(1)::after{content: "A";}
#intro .img_list figure:nth-of-type(2)::after{content: "B";}
#intro .img_list figure:nth-of-type(3)::after{content: "C";}


@media only screen and (max-width: 768px){
.history_wrap{overflow-x: auto;width: 100vw;padding: 0 0 1em 0;margin: 0 -6vw;}
.history{font-size: 0.9em;margin-top: 3.5em;margin-right: 0;width: 100%;}
}

#result{padding-bottom: 0;background: url("../img/result_bk.webp") no-repeat center top/contain;}
.result_item{display: flex;flex-wrap: wrap;align-items: flex-end; gap: 1.25em 1em;margin-top: 2em;}
.result_item > *{width: 16em;padding-bottom: 0.5em;border-bottom: 1px solid #333;}
.result_item > * p{font-size: 0.8em;}
.result_item > * p strong{color: #620606;font-size: 1.25em;}
.result_item > * p i{display: inline-flex;justify-content: center;align-items: center;width: 1.5em;height: 1.5em;line-height: 1;color: #fff;background: #51a6dd;font-size: 0.7em;margin-left: 0.3em;}
.result_item > * p strong + i{vertical-align: 0.3em;}
.result_item > * p small{font-size: 0.875em;display: block;}
.priod{text-align: right;margin-top: 1em;font-size: 0.65em;}

@media only screen and (min-width: 769px){
.result_item > *:nth-of-type(3n-1){animation-delay: 0.2s;}
.result_item > *:nth-of-type(3n){animation-delay: 0.4s;}
}

@media only screen and (max-width: 768px){
#result{background: url("../img/result_bk.webp") no-repeat center top/cover;}
.result_item{gap: 1.25em 4%;margin-top: 2em;}
.result_item > *{width: 48%;}
.result_item > *:nth-of-type(even){animation-delay: 0.2s;}
.result_item > * p small{font-size: 0.8em;}
}

.brand_item{background: #fcfafc;padding: 3.5em 1.5em;text-align: center;margin-top: 3.5em;}
.brand_item::before{content: "";display: block;width: calc(100% - 1.2em);height: calc(100% - 1.2em);position: absolute;left: 0.6em;top: 0.6em;border: 1px solid #a76a32;pointer-events: none;}
.brand_tit{font-size: 3em;text-align: center;line-height: 1;}
.brand_tit + p{font-size: 1.2em;margin-top: 1em;}
.brand_item .lealas_logo{width: 17.5em;margin: 1.5em auto 0;}
.brand_item .lealas_logo + p{font-size: 0.9em;line-height: 1.8;margin-top: 2em;}

@media only screen and (max-width: 768px){
.brand_item{padding: 2.5em 1.5em;}
.brand_item .lealas_logo + p{text-align: left;}
}