@charset "UTF-8";

.wrapper .wrap {
    margin-top: 60px;
}

.mainimg {
    position: relative;
    overflow: hidden;
    margin: 0 auto 40px;
}

.mainimg h2 {
    position: absolute;
    top: 50%;
    left: 4.27vw;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    max-width: 33.87vw;
    translate: 0 -50%;
    z-index: 1;
    pointer-events: none;
}

.mainimg h2 span {
    position: absolute;
    top: 4.5%;
    left: 28.8vw;
    font-size: 18px;
    color: rgb(var(--pink));
    writing-mode: vertical-rl;
}

/*============================
.js-slider
============================*/
.js-slider {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    z-index: 0;
}

.js-slider:not(.slick-slider) * {
    display: none;
}

.js-slider .slick-track .slick-slide {
    list-style: none;
    transition: 0.6s;
}

.js-slider .slick-track {
    display: flex;
    align-items: center;
}

.js-slider .slick-track .slick-slide figure img {
    width: auto;
    max-height: 360px;
    margin: 0;
    border: 1px solid #CAD5D8;
}

.js-slider .slick-track .slick-slide figure figcaption {
    margin-top: 10px;
    font-size: 12px;
    line-height: 16px;
}

.js-slider li img {
    object-fit: contain;
}

.js-slider .slick-arrow {
    position: static;
    width: fit-content;
    height: fit-content;
    padding: 0;
    border: none;
    background: transparent;
}

.js-slider .slick-arrow::before {
    display: none;
}

.js-slider .slick-arrow:focus-visible {
    outline: none;
}

.js-slider .slick-arrow i {
    min-width: 26px;
    width: 26px;
    height: 42px;
    color: var(--blue);
    font-size: 40px;
    text-align: center;
    z-index: 1;
}

.js-slider .slick-list {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    z-index: 0;
}

ul.slick-dots {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.slick-dotted li::marker {
    display: none !important;
}

ul.slick-dots li {
    display: block;
    list-style: none;
}

ul.slick-dots li button {
    display: block;
    width: 6px;
    height: 6px;
    padding: 0;
    font-size: 0;
    border: none;
    border-radius: 50%;
    background: var(--gray);
    aspect-ratio: 1;
    cursor: pointer;
}

ul.slick-dots li.slick-active button {
    background: rgb(var(--pink));
}

div#facebook {
    max-width: 365px;
    margin: 0 auto;
    padding: 12px 6px;
    border: 1px solid var(--gray);
    border-radius: 10px;
    background-color: var(--lightgray);
}

.ttl_wrap {
    max-width: 320px;
    margin: 0 auto 16px;
}

div#facebook h2 {
    display: inline-block;
    margin-bottom: 0;
}

div#facebook h2 + p {
    display: inline-block;
}

.fb-page.sp.fb_iframe_widget {
    display: block;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.fb-page.fb_iframe_widget.fb_iframe_widget_fluid {
    position: relative;
    display: block;
    max-width: 320px;
    margin: 12px auto 0;
}

.fb_iframe_widget::before {
    position: absolute;
    right: 10px;
    bottom: 100%;
    display: block;
    content: "";
    width: 15px;
    height: 34px;
    background-image: url(../images/icon_fb.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

button#instagram {
    display: block;
    margin: 20px auto 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
}

div.archive_wrap {
    position: relative;
    /* height: 330px; */
    margin-top: 20px;
    margin-right: -20px;
    padding: 16px 0 12px 40px;
    border: 1px solid var(--lightgray);
    border-right: none;
    border-radius: 10px 0 0 10px;
    background-color: #fff;
}

div.archive_wrap::before,
div.archive_wrap::after {
    position: absolute;
    left: -10px;
    display: block;
    content: "";
    width: 33px;
    height: 94px;
    background-image: url(../images/img_archive01.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

div.archive_wrap::before {
    top: 20px;
}

div.archive_wrap::after {
    bottom: 20px;
}

ul.archive-list {
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    padding-right: 15px;
    padding-bottom: 10px;
    overflow-x: scroll;
}

ul.archive-list li.archive-list__item {
    flex: 0;
    flex-basis: 50%;
    width: 100%;
    min-width: 167px;
    list-style: none;
}

ul.archive-list li.archive-list__item a.archive-list__link {}

figure.archive-list__thumb {
    max-height: 320px;
    border: 1px solid #8A8A8A;
    border-radius: 5px;
    overflow: hidden;
    aspect-ratio: 1 / 1.4;
}

figure.archive-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

dl.archive-list__meta {
    margin-top: 8px;
}

dt.archive-list__date {
    font-family: Staatliches;
    font-size: 12px;
    line-height: 1;
    color: #8A8A8A;
}

dd.archive-list__title {
    margin-top: 3px;
    font-size: 14px;
    line-height: 16px;
    color: #000;
}

div.archive_wrap figure.txt_scroll {
    margin-top: 14px;
    margin-right: 20px;
}

.profile_image {
    display: flex;
}

.profile_image figure {
    max-width: 38.67vw;
    border: 1px solid var(--lightgray);
    border-radius: 8px;
    overflow: hidden;
}

.profile_cont {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 -15px;
    margin-right: -20px;
    padding: 0 15px 6.4vw;
    text-align: center;
}

.profile_cont p.profile_name {
    font-size: 36px;
    color: rgb(var(--pink));
    line-height: 1;
    letter-spacing: 0;
}

.profile_cont p.profile_name rt {
    color: #000;
    font-size: 15px;
    text-align: center;
}

.profile_cont p.profile_txt {
    font-size: 14px;
    line-height: 1.45;
}

div#profile dl {
    margin: 20px -20px 0;
    padding: 20px;
    background-color: #FDEAF2;
    background-image: url(../images/bg_profile.svg);
    background-repeat: repeat;
    background-size: 18px auto;
}

div#profile dl dt {
    margin-bottom: 5px;
    color: rgb(var(--pink));
}

div#profile dl dt::before {
    content: "●";
}

div#profile dl dd {
    font-weight: normal;
}

div#profile dl dd + dt {
    margin-top: 10px;
}

div#policy figure {
    width: fit-content;
    margin: 0 auto;
}

div#policy dl {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #BABABA;
    border-radius: 10px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    background: #fff;
}

div#policy dl dt {
    display: flex;
    align-items: center;
    gap: 16px;
    line-height: 1.25;
}

span.num {
    display: inline-block;
    color: var(--policy-theme);
    font-weight: bold;
    font-size: 30px;
}

span.num::before {
    counter-increment: number 1;
    content: counter(number) " ";
}

div#policy dl dt h3 {
    color: var(--policy-theme);
    font-size: 18px;
    line-height: 1.25;
}

div#policy dl dt i {
    flex-basis: 18px;
    margin-left: auto;
    font-size: 18px;
    text-align: center;
    color: #BABABA;
}

dd.policy_sub {
    margin: 16px auto;
    padding: 10px 12px;
    padding-right: 70px;
    font-weight: normal;
    line-height: 1.35;
    background-color: var(--policy-theme-sub);
    border-radius: 8px;
    background-repeat: no-repeat;
    background-size: 70px auto;
    background-position: right 10px center;
}

div#policy dl dd:not(.policy_sub) {
    margin-top: 14px;
    font-weight: normal;
    padding-left: 22px;
    text-indent: -22px;
}

div#policy dl dd:not(.policy_sub)::before {
    display: inline-block;
    width: 14px;
    margin-right: 8px;
    font-family: "Font Awesome 7 Free";
    content: "\f14a";
    font-weight: bold;
    color: var(--policy-theme);
    text-indent: 0;
}

.policy01 {
    --policy-theme: #0096DF;
    --policy-theme-sub: #CCEAF9;
}

.policy02 {
    --policy-theme: #A42F8B;
    --policy-theme-sub: #EDD5E8;
}

.policy03 {
    --policy-theme: #1EAA39;
    --policy-theme-sub: #D2EED7;
}

.policy04 {
    --policy-theme: #F19200;
    --policy-theme-sub: #FCE9CC;
}

.policy05 {
    --policy-theme: #E7380D;
    --policy-theme-sub: #FAD7CF;
}

.policy06 {
    --policy-theme: #E73278;
    --policy-theme-sub: #FAD6E4;
}

.policy01 .policy_sub {
    background-image: url(../images/icon_policy01.svg);
}

.policy02 .policy_sub {
    background-image: url(../images/icon_policy02.svg);
}

.policy03 .policy_sub {
    background-image: url(../images/icon_policy03.svg);
}

.policy04 .policy_sub {
    background-image: url(../images/icon_policy04.svg);
}

.policy05 .policy_sub {
    background-image: url(../images/icon_policy05.svg);
}

.policy06 .policy_sub {
    background-image: url(../images/icon_policy06.svg);
}

div#policy figure.policy_img {
    margin-top: 20px;
}

@media screen and (max-width: 768px) {
    div#archive {
        margin-top: 60px;
    }

    .profile_cont hr {
        width: calc(100% + 30px);
        height: auto;
        margin: 12px 0 -5% -15px;
        border: none;
        background-image: url(../images/img_profile02.svg);
        background-repeat: no-repeat;
        background-size: cover;
        aspect-ratio: 9/1;
    }

    div#policy dl {
        cursor: pointer;
    }

    div#policy dl .accordion_wrap {
        display: none;
    }

    div#policy dl:first-of-type .accordion_wrap {
        display: unset;
    }

    div#policy figure.policy_img {
        max-width: 220px;
        margin-top: 20px;
    }
}

@media screen and (min-width: 769px) {
    .mainimg {
        width: calc(100vw - 40px);
        max-width: 1090px;
        border: 1px solid #FDEAF2;
        border-radius: 10px;
        z-index: 1;
    }

    .mainimg h2 {
        top: auto;
        bottom: 11%;
        left: 12%;
        max-width: 38.53%;
        translate: 0;
        z-index: 100;
    }

    .mainimg h2 span {
        top: auto;
        bottom: 96%;
        left: 32px;
        font-size: 38px;
        writing-mode: unset;
    }

    ul.slick-dots {
        top: auto;
        bottom: 20px;
        right: 33.09%;
    }

    .wrap.activity {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    div#sns {
        flex: 1;
        max-width: 534px;
    }

    div#facebook {
        max-width: 534px;
        padding: 30px;
    }

    .ttl_wrap {
        max-width: 474px;
        margin-bottom: 20px;
    }

    .fb_iframe_widget {
        display: block;
    }

    .fb_iframe_widget::before {
        right: 14px;
        width: 26px;
        height: 54px;
    }

    div#archive {
        /* flex: 1; */
        margin-left: 10px;
    }

    div.archive_wrap {
        max-width: 526px;
        margin-right: 0;
        padding: 30px 40px 20px;
        border: 1px solid var(--lightgray);
        border-radius: 10px;
    }

    ul.archive-list {
        gap: 20px;
        padding-right: 0;
        padding-bottom: 20px;
    }

    ul.archive-list li.archive-list__item {
        min-width: 228px;
    }

    dl.archive-list__meta {
        margin-top: 20px;
    }

    dt.archive-list__date {
        font-size: 18px;
    }

    dd.archive-list__title {
        margin-top: 18px;
        font-size: 18px;
        line-height: 20px;
    }

    div.archive_wrap figure.txt_scroll {
        margin-left: auto;
        margin-right: auto;
    }

    div#profile {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 16px;
        max-width: 720px;
        max-height: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    div#profile h2.common_ttl {
        order: 1;
        width: 61.67%;
        margin: 0;
        padding: 25px 30px;
        border: 1px solid var(--gray);
        border-radius: 10px;
        text-align: left;
        background-color: #fff;
    }

    .profile_image {
        order: 0;
        flex-direction: column;
        width: 36.39%;
        max-width: 262px;
    }

    div#profile dl {
        order: 2;
        width: 61.67%;
        margin: 0;
        padding: 30px;
        border-radius: 10px;
        font-size: 18px;
    }

    div#profile dl dd {
        line-height: 30px;
    }

    .profile_cont {
        width: 100%;
        margin: 0;
        margin-top: 10px;
        padding: 0;
    }

    .profile_cont p.profile_name {
        font-size: 38px;
    }

    .profile_cont hr {
        width: 100%;
        height: 4px;
        margin: 14px auto;
        border: none;
        border-radius: 4px;
        background: #F4A5C4;
    }

    .policy_cont {
        display: flex;
        flex-wrap: wrap;
        gap: 14px 20px;
        margin-top: 40px;
    }

    div#policy dl {
        flex: 1;
        flex-basis: calc((100% - 20px) / 2);
        margin: 0;
        padding: 30px;
    }

    div#policy dl dt {
        gap: 20px;
        line-height: 1;
        pointer-events: none;
    }

    span.num {
        font-size: 44px;
    }

    div#policy dl dt h3 {
        font-size: 22px;
    }

    dd.policy_sub {
        padding: 14px 22px;
        padding-right: 80px;
    }

    /*============================
.js-slider
============================*/
    .js-slider {
        max-width: 100vw;
        border-radius: 10px;
    }

    .js-slider .slick-track {
        /*gap: 48px;*/
    }
}