@charset "utf-8";

.page_mascot {
    color: #808080;
    padding-top: 0;
}


/* ==================================================
Section00 - MV
================================================== */
.mv {
    position: relative;
    background: #fff00a;
}

.mv-background {    
}

.mv-logo {
    position: absolute;
    left: min(calc((15) / 560 * 100vw), (15) * 1px);
    top: min(calc((15) / 560 * 100vw), (15) * 1px);
    width: min(calc((112) / 560 * 100vw), (112) * 1px);
    height: min(calc((42) / 560 * 100vw), (42) * 1px);
}

.mv-heading {
    position: absolute;
    left: 0;
    right: 0;
    top: min(calc((70) / 560 * 100vw), (70) * 1px);
    margin: auto;
    width: min(calc((220) / 560 * 100vw), (220) * 1px);
    height: min(calc((144) / 560 * 100vw), (144) * 1px);
}

.mv-mascot__list {
}

.mv-mascot__item {
    position: absolute;
    bottom: min(calc((30) / 560 * 100vw), (30) * 1px);
}
.mv-mascot__item--01 {
    width: min(calc((148) / 560 * 100vw), (148) * 1px);
    height: min(calc((214) / 560 * 100vw), (214) * 1px);
    left: min(calc((25) / 560 * 100vw), (25) * 1px);
}
.mv-mascot__item--02 {
    width: min(calc((63) / 560 * 100vw), (63) * 1px);
    height: min(calc((96) / 560 * 100vw), (96) * 1px);
    left: min(calc((190) / 560 * 100vw), (190) * 1px);
}
.mv-mascot__item--03 {
    width: min(calc((79) / 560 * 100vw), (79) * 1px);
    height: min(calc((119) / 560 * 100vw), (119) * 1px);
    left: min(calc((265) / 560 * 100vw), (265) * 1px);
}
.mv-mascot__item--04 {
    width: min(calc((78) / 560 * 100vw), (78) * 1px);
    height: min(calc((108) / 560 * 100vw), (108) * 1px);
    left: min(calc((345) / 560 * 100vw), (345) * 1px);
}
.mv-mascot__item--05 {
    width: min(calc((76) / 560 * 100vw), (76) * 1px);
    height: min(calc((92) / 560 * 100vw), (92) * 1px);
    left: min(calc((415) / 560 * 100vw), (415) * 1px);
}
.mv-mascot__item--06 {
    width: min(calc((56) / 560 * 100vw), (56) * 1px);
    height: min(calc((58) / 560 * 100vw), (58) * 1px);
    right: 0;
}


/* ==================================================
Section01 - News
================================================== */
.news-section {
    background: #fff00a;
    padding: 0 0 min(calc((50) / 560 * 100vw), (50) * 1px);
}

.news-section__list {
    margin: 0 min(calc((40) / 560 * 100vw), (40) * 1px);
}

.news-section__item {}

.news-section__link {
    display: flex;
    position: relative;
    font-size: min(calc((17) / 560 * 100vw), (17) * 1px);
    background-image:
        linear-gradient(
            to right,
            #ffffff min(calc((3) / 560 * 100vw), (3) * 1px),
            transparent min(calc((3) / 560 * 100vw), (3) * 1px)
        )
    ;
    background-size:
        min(calc((9) / 560 * 100vw), (9) * 1px)
        min(calc((3) / 560 * 100vw), (3) * 1px)
    ;
    background-repeat: repeat-x; 
    background-position: left bottom;
    padding: 0.6em 0 calc(0.6em + min(calc((3) / 560 * 100vw), (3) * 1px));
}
.news-section__link:hover{
    opacity: 1;
}

.news-section__link:before {
    content: "";
    display: inline-block;
    background: url('/wp-content/uploads/2026/02/mascot-news-icon.svg') no-repeat center /contain;
    flex: 0 0 1.37em;
    height: calc(1em + 0.5em); /* テキスト1行分の高さ */
    margin-right: 0.3em;
}

.news-section__date {
    letter-spacing: 0.03em;
    flex: 0 0 6em;
}

.news-section__name {
    letter-spacing: -0.03em;
}


/* ==================================================
Section02 - Intro
================================================== */
.intro-section {
    background: #fff00a;
    padding: 0 0 min(calc((95) / 560 * 100vw), (95) * 1px);
}

.intro-section__txt {
    font-size: min(calc((21.5) / 560 * 100vw), (21.5) * 1px);
    line-height: 1.75;
    letter-spacing: 0.17em;
    text-align: center;
    margin-bottom: min(calc((65) / 560 * 100vw), (65) * 1px);
}


/* ==================================================
Section03 - Profile
================================================== */
.profile-section {
    background: #fff00a;
    position: relative;
    padding: 0 0 min(calc((90) / 560 * 100vw), (90) * 1px);
}

.profile-section__heading {
    margin-bottom: min(calc((30) / 560 * 100vw), (30) * 1px);
}

/* START - マスコットプロフィール */
.profile-section__list {
    margin: 0 min(calc((55) / 560 * 100vw), (55) * 1px) 0;
}

.profile-section__item {
    overflow: hidden;
    background: #ffffff;
    border: min(calc((6) / 560 * 100vw), (6) * 1px) solid #b1e2ea;
    border-radius: min(calc((48) / 560 * 100vw), (48) * 1px);
    padding: min(calc((30) / 560 * 100vw), (30) * 1px) min(calc((40) / 560 * 100vw), (40) * 1px) min(calc((35) / 560 * 100vw), (35) * 1px);
}
.profile-section__item--bebickey {
    padding-bottom: min(calc((50) / 560 * 100vw), (50) * 1px);
}

.profile-section__item:not(:first-child) {
    margin-top: min(calc((20) / 560 * 100vw), (20) * 1px);
}

.profile-section__picture {
    position: relative;
    padding-bottom: min(calc((12) / 560 * 100vw), (12) * 1px);
    border-bottom: min(calc((5) / 560 * 100vw), (5) * 1px) dotted #fff00a;
    margin-bottom: min(calc((25) / 560 * 100vw), (25) * 1px);
}
.profile-section__item--bebickey .profile-section__picture { border-bottom-color: #b1e2ea; }

.profile-section__picture__img {
    width: min(calc((164) / 560 * 100vw), (164) * 1px);
}

.profile-section__table {
    display: grid;
    align-items: start;
    grid-template-columns: 25.5% 1fr;
    column-gap: min(calc((16) / 560 * 100vw), (16) * 1px);
    row-gap: min(calc((8) / 560 * 100vw), (8) * 1px);
    margin-bottom: min(calc((18) / 560 * 100vw), (18) * 1px);
}

.profile-section__table__head {
    color: #ffffff;
    font-size: min(calc((15.5) / 560 * 100vw), (15.5) * 1px);
    font-weight: normal;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    text-align: center;
    background: #b1e2ea;
    padding: 0.1em 0;
    border-radius: 10em;
}
.profile-section__item--bebickey .profile-section__table__head { background: #fff00a; }

.profile-section__table__data {
    font-size: min(calc((17.5) / 560 * 100vw), (17.5) * 1px);
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.profile-section__table__data.data--cond {
    transform-origin: left;
    transform: scaleX(0.86);
}

.profile-section__table__data.data--noletter {
    letter-spacing: 0;
}

.profile-section__description {
    font-size: min(calc((19.5) / 560 * 100vw), (19.5) * 1px);
    line-height: 1.7;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* END - マスコットプロフィール */

/* START - プロフィールあしらい */
.profile-section__ashirai {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.profile-section__ashirai--01 {
    top: 9%;
    right: 0;
    width: min(calc((48) / 560 * 100vw), (48) * 1px);
}

.profile-section__ashirai--02 {
    top: 65%;
    left: 0;
    width: min(calc((44) / 560 * 100vw), (44) * 1px);
}

.profile-section__ashirai img {
    width: 100%;
}
/* END - プロフィールあしらい */


/* ==================================================
Section04 - Gallery
================================================== */
.gallery-section {
    background: #b1e2ea;
    position: relative;
    padding: min(calc((80) / 560 * 100vw), (80) * 1px) 0 min(calc((130) / 560 * 100vw), (130) * 1px);
}

.gallery-section__heading {
    margin-bottom: min(calc((40) / 560 * 100vw), (40) * 1px);
}

/* START - ギャラリースライダー */
.gallery-section__slider__list.swiper-wrapper {
    transition-timing-function: linear;
}

.gallery-section__slider__item {
    border: 4px solid #fff00a;
    border-radius: min(calc((12) / 560 * 100vw), (12) * 1px);
    overflow: hidden;
}

/* END - ギャラリースライダー */

/* START - ギャラリーあしらい */
.gallery-section__ashirai {
    position: absolute;
    z-index: 1;
}

.gallery-section__ashirai--01 {
    bottom: calc(100% - min(calc((17) / 560 * 100vw), (17) * 1px));
    right: 9.4%;
    width: min(calc((102) / 560 * 100vw), (102) * 1px);
}

.gallery-section__ashirai--02 {
    bottom: 0;
    left: 12%;
    width: min(calc((88) / 560 * 100vw), (88) * 1px);
}

.gallery-section__ashirai img {
    width: 100%;
}
/* END - ギャラリーあしらい */


/* ==================================================
Section05 - Goods
================================================== */
.goods-section {
    background: #fff00a;
    padding: min(calc((90) / 560 * 100vw), (90) * 1px) 0 min(calc((100) / 560 * 100vw), (100) * 1px);
}

.goods-section__heading {
    margin-bottom: min(calc((30) / 560 * 100vw), (30) * 1px);
}

/* START - グッズ一覧 */
.goods-section__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(calc((23) / 560 * 100vw), (23) * 1px) min(calc((26) / 560 * 100vw), (26) * 1px);
    margin: 0 min(calc((60) / 560 * 100vw), (60) * 1px) 0;
}

.goods-section__item {
    overflow: hidden;
    background: #ffffff;
    border: min(calc((6) / 560 * 100vw), (6) * 1px) solid #ffffff;
    border-radius: 50%;
    position: relative;
}

.goods-section__item:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.goods-section__item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* END - グッズ一覧 */

/* START - COMING SOON */
.goods-section__list__outer {
    position: relative;
}

.goods-section__list__comingsoon {
    display: grid;
    place-content: center;
    color: #ffffff;
    font-size: min(calc((26.5) / 560 * 100vw), (26.5) * 1px);
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.14em;
    background: #808080;
    width: 10.1em;
    height: 2.3em;
    border-radius: min(calc((10) / 560 * 100vw), (10) * 1px);
    padding: 0 0 0.2em;
    rotate: -12deg;
    z-index: 3;
    position: absolute;
    inset: 0;
    margin: auto;
}
/* END - COMING SOON */


/* ==================================================
Section06 - SNS
================================================== */
.sns-section {
    background: #b1e2ea;
    padding: min(calc((105) / 560 * 100vw), (105) * 1px) 0 min(calc((130) / 560 * 100vw), (130) * 1px);
}

.sns-section__heading {
    margin-bottom: min(calc((55) / 560 * 100vw), (55) * 1px);
}

/* START - SNS一覧 */
.sns-section__list {
    display: flex;
    justify-content: center;
    gap: 0 min(calc((85) / 560 * 100vw), (85) * 1px);
    margin: 0 min(calc((60) / 560 * 100vw), (60) * 1px) 0;
}

.sns-section__item {
    flex: 0 0 min(calc((90) / 560 * 100vw), (90) * 1px);
}

.sns-section__item a:hover,
.sns-section__item a:active {
    opacity: 1;
}

.sns-section__item__img {
    width: 100%;
}
/* END - SNS一覧 */


/* ==================================================
Section07 - contact
================================================== */
.contact-section {
    background: #fff00a;
    position: relative;
    padding: min(calc((100) / 560 * 100vw), (105) * 1px) 0 min(calc((115) / 560 * 100vw), (115) * 1px);
}

.contact-section__heading {
    margin-bottom: min(calc((30) / 560 * 100vw), (30) * 1px);
}

.contact-section__intro {
    font-size: min(calc((19.8) / 560 * 100vw), (19.8) * 1px);
    line-height: 1.75;
    text-align: center;
    margin-bottom: min(calc((35) / 560 * 100vw), (35) * 1px);
}

.contact-section__btn {
    width: min(calc((246) / 560 * 100vw), (246) * 1px);
    margin: auto;
}

.contact-section__btn a:hover,
.contact-section__btn a:active {
    opacity: 1;
}

/* START - コンタクトあしらい */
.contact-section__ashirai {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.contact-section__ashirai--01 {
    top: 28%;
    left: 0;
    width: min(calc((98) / 560 * 100vw), (98) * 1px);
}

.contact-section__ashirai--02 {
    top: 43%;
    right: 0;
    width: min(calc((76) / 560 * 100vw), (76) * 1px);
}

.contact-section__ashirai img {
    width: 100%;
}
/* END - コンタクトあしらい */


/* ==================================================
Javascript
================================================== */
/* START - Swiper */
.gallery-section__slider__item.swiper-slide {
    width: min(calc((240) / 560 * 100vw), (240) * 1px);
}

.swiper-slide .gallery-section__slider__item__img {
    height: auto;
    width: 100%;
}
/* END - Swiper */

/* START - GSAP */
.js-fadein {
    opacity: 0;
}
.goods-section__item {
    opacity: 0;
    -webkit-transform: translateY(min(calc((24) / 560 * 100vw), (24) * 1px));
    transform: translateY(min(calc((24) / 560 * 100vw), (24) * 1px));
}
.goods-section__list__comingsoon {
    opacity: 0;
}
.sns-section__item {
    opacity: 0;
    -webkit-transform: translateY(min(calc((24) / 560 * 100vw), (24) * 1px));
    transform: translateY(min(calc((24) / 560 * 100vw), (24) * 1px));
}
/* END - GSAP */