@charset "utf-8";

.fullPage * {
    box-sizing: border-box;
}

.fullPage a {
    transition: opacity 0.3s ease-out;
}
@media ( hover: hover ) {
    .fullPage a:hover {
        opacity: 0.5;
    }
}

.fullPage img,
.ws-popup img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}



/**
 * SP
 */
@media ( max-width: 768px ) {

    #avocado-fv {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    #avocado-fv .avocado-bg {
        margin: 0 auto;
        width: 100%;
        height: auto;
    }
    #avocado-fv h1 {
        position: absolute;
        left: calc( 100% * 120 / 1080 );
        bottom: calc( 100% * 60 / 400 );
        margin: 0;
        width: calc( 100% * 520 / 1080 );
        height: auto;
    }
    #avocado-fv .avocado-fv-pic1 {
        position: absolute;
        left: 5%;
        top: -37%;
        margin: 0;
        width: calc( 100% * 238 / 1080 );
        height: auto;
        rotate: 115deg;
    }

    #avocado-main {
        position: relative;
        margin: 0 auto;
        padding: 8.0vw 0;
        width: 100%;
        height: auto;
        background: url(../images/avocado-main-bg.webp) repeat-y center / 100% auto;
    }
    #avocado-main::before {
        position: absolute;
        content: "";
        bottom: calc( 100% - 6.0vw );
        right: 0;
        margin: 0;
        width: calc( 100% * 400 / 1080 );
        height: auto;
        aspect-ratio: 400 / 408;
        background: url(../images/avocado-pic1.webp) no-repeat center / contain;
    }
    #avocado-main .avocado-main-box {
        position: relative;
        margin: 0 auto;
        padding: 4.0vw 4.0vw 8.0vw;
        width: 90%;
        background: url(../images/avocado-main-r.webp) repeat-y right top / 5.5% auto, #fff;
        border-radius: 4.0vw 0 0 4.0vw;
    }
    #avocado-main .avocado-main-pic1 {
        position: absolute;
        left: -21%;
        top: -3%;
        margin: 0;
        width: calc( 100% * 297 / 1080 );
        height: auto;
        rotate: 130deg;
        z-index: 1;
    }
    #avocado-main .avocado-main-title {
        position: relative;
        width: calc( 100% * 246 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-line {
        position: relative;
        width: calc( 100% * 735 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-subtitle1 {
        position: relative;
        margin: 4.0vw 0 0 4.0vw;
        width: calc( 100% * 500 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-subtitle2 {
        position: relative;
        margin: 4.0vw 0 0 4.0vw;
        width: calc( 100% * 163 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-subtitle3 {
        position: relative;
        margin: 4.0vw 0 0 4.0vw;
        width: calc( 100% * 183 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-btns {
        position: relative;
        margin: 2.0vw auto 0;
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        gap: 4.0vw 3.0vw;
        z-index: 2;
    }
    #avocado-main .avocado-main-btns + .avocado-main-line {
        margin-top: 6.0vw;
    }
    #avocado-main .avocado-main-btns .avocado-main-btn {
        display: block;
        margin: 0 auto;
        width: 80%;
        height: auto;
        cursor: pointer;
    }
    #avocado-main .avocado-main-btns .avocado-main-btn.narrow {
        margin-top: 1.0vw;
        width: calc( 80% * 640 / 698 );
    }

    .ws-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        height: 100vh;
        padding: 12.0vw 0;
        background: rgb( 0, 0, 0, 0.66 );
        overflow-y: auto;
        z-index: 990;
        opacity: 0.0;
        transform: scaleY( 0.0 );
        transform-origin: top center;
        transition: opacity 0.3s ease-out, transform 0.01s ease-out 0.3s;
    }
    .ws-popup.show {
        opacity: 1.0;
        transform: scaleY( 1.0 );
        transition: opacity 0.3s ease-out, transform 0.01s ease-out;      
    }
    .ws-close-popup {
        position: fixed;
        top: 1.0vw;
        right: 1.0vw;
        width: 6.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        background: rgba( 0, 0, 0, 0.25 );
        border-radius: 2.0vw;
        cursor: pointer;
        z-index: 999;
    }
    .ws-close-popup::before {
        position: absolute;
        content: "";
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        background: #fff;
        clip-path: polygon( 10% 0, 50% 40%, 90% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 90%, 40% 50%, 0 10% );
    }
    .ws-popup ~ .ws-close-popup {
        display: none;
    }
    .ws-popup.show ~ .ws-close-popup {
        display: block;
        margin: 130px auto 0 auto;          
    }
    .ws-popup p {
        position: relative;
        margin: 1.0em 0 0;
        color: #707070;
        font-size: 3.6vw;
        line-height: calc( 28 / 18 );
        z-index: 2;
    }

    .avocado-popup-box {
        position: relative;
        margin: 0 auto;
        padding: 4.0vw 8.0vw 4.0vw 4.0vw;
        width: 90%;
        background: url(../images/avocado-popup-r.webp) repeat-y right top / 5.5% auto, #fff;
        border-radius: 4.0vw 0 0 4.0vw;
        margin: 130px auto 0 auto;        
    }
    .avocado-popup-title {
        position: relative;
        z-index: 2;
    }
    .avocado-popup-title:not(:first-child) {
        margin-top: 8.0vw;
    }
    .avocado-popup-title.w100 {
        width: 100%;
    }
    .avocado-popup-title.w100 img {
        width: calc(100%*1.5*207/635);
    }
    .avocado-popup-title.w124 {
        width: calc(100%*1.5*124/635);
    }
    .avocado-popup-title.w207 {
        width: calc(100%*1.5*207/600);
    }
    .avocado-popup-title.w323 {
        width: calc(100%*1.5*323/680);
    }
    .avocado-popup-title.w402 {
        width: calc(100%*1.5*402/680);
    }
    .avocado-popup-title.w498 {
        width: calc(100%*1.3*498/680);
    }
    .avocado-popup-feature .avocado-popup-title:not(:first-child) {
        margin-top: 8.0vw;
        padding-top: 4.0vw;
        border-top: 1px dotted #339966;
    }
    .avocado-movie {
        position: relative;
        margin: 4.0vw auto;
        width: 100%;
    }
    .avocado-movie iframe {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 1080;
        border: 0;
        border-radius: 4.0vw;
    }
    .avocado-main-pic {
        margin: 4.0vw auto;
        width: 100%;
    }
    .avocado-main-pic img {
        margin: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 680 / 383;
        border: 0;
    }
    .avocado-popup-feature {
        position: relative;
        margin: 8.0vw auto 0;
        width: 100%;
        padding: 4.0vw;
        border: 3px solid #339966;
        border-radius: 4.0vw;
        z-index: 2;
    }
    .avocado-popup-times {
        margin: 6.0vw auto 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0 4.0vw;
    }
    .avocado-popup-times .avocado-popup-time {
        width: max( 70px, 15% );
        height: auto;
        aspect-ratio: 80 / 110;
    }
    .avocado-popup-times .avocado-popup-time img {
        width: 100%;
        height: auto;
    }
    .avocado-popup-times .avocado-popup-materials {
        margin: 0;
        width: calc( 100% - max( 70px, 15% ) );
        list-style: none;
    }
    .avocado-popup-times .avocado-popup-materials li {
        list-style: none;
        color: #707070;
        font-size: 3.6vw;
    }
    .avocado-popup-times .avocado-popup-materials li + li {
        margin-top: 0.5em;
    }
    .avocado-popup-no {
        margin: 4.0vw auto 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0 4.0vw;
    }
    .avocado-popup-no .avocado-popup-icon {
        margin: 0;
        width: 6.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        flex: 0 0 6.0vw;
    }
    .avocado-popup-no .avocado-popup-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .avocado-popup-no .avocado-popup-txt {
        margin: 0.5em 0 0;
        color: #707070;
        font-size: 3.6vw;
    }
    .avocado-flow {
        margin: 4.0vw 0 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat( 2, 50% );
        gap: 2.0vw 2.0vw;
    }
    .avocado-flow .avocado-flow-item {
        margin: 0;
        width: 100%;
    }
    .avocado-flow .avocado-flow-item figure {
        position :relative;
        width: 100%;
        height: auto;
    }
    .avocado-flow .avocado-flow-item figure img {
        width: 100%;
        height: auto;
    }
    .avocado-flow .avocado-flow-item figure::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 15%;
        height: auto;
        aspect-ratio: 1 / 1;
        translate: -20% -20%;
    }
    .avocado-flow .avocado-flow-item:nth-child(1) figure::before {
        background: url(../images/avocado-no01.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item:nth-child(2) figure::before {
        background: url(../images/avocado-no02.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item:nth-child(3) figure::before {
        background: url(../images/avocado-no03.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item:nth-child(4) figure::before {
        background: url(../images/avocado-no04.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item:nth-child(5) figure::before {
        background: url(../images/avocado-no05.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item .avocado-green-box {
        padding: 4.0vw;
        border: 3px solid #339966;
        border-radius: 4.0vw;
    }
    .avocado-flow .avocado-flow-item .avocado-green-box figure {
        margin: 0 auto;
    }
    .avocado-flow .avocado-flow-item .avocado-green-box p {
        font-size: 2.8vw;
    }

    #avocado-movies-fv {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 400 / 80;
        overflow: hidden;
    }
    #avocado-movies-fv .avocado-fv-bg {
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }
    #avocado-movies-fv .avocado-fv-bg img {
        width: 100%;
        height: 100%;
        object-position: bottom center;
        object-fit: cover;
    }
    #avocado-movies-fv h1 {
        position: absolute;
        left: 10%;
        top: 50%;
        margin: 0;
        width: 80%;
        height: auto;
        translate: 0 -50%;
    }
    #avocado-movies {
        position: relative;
        margin: 0 auto;
        padding: 8.0vw 0;
        width: 100%;
        height: auto;
        background: url(../images/avocado-main-bg.webp) repeat-y center / 100% auto;
    }
    #avocado-movies p {
        position: relative;
        margin: 1.0em 0 0;
        color: #707070;
        font-size: 3.6vw;
        line-height: calc( 28 / 18 );
        z-index: 2;
    }
    #avocado-movies .avocado-movies-box {
        position: relative;
        margin: 0 auto;
        padding: 4.0vw 8.0vw 4.0vw 4.0vw;
        width: 90%;
        background: url(../images/avocado-main-r.webp) repeat-y right top / 5.5% auto, #fff;
        border-radius: 4.0vw 0 0 4.0vw;
    }
    #avocado-movies .avocado-movies-box + .avocado-movies-box {
        margin-top: 8.0vw;
    }

}


/**
 * PC
 */
@media ( min-width: 768.01px ) {

    #avocado-fv {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    #avocado-fv .avocado-bg {
        margin: 0 auto;
        width: 100%;
        height: auto;
    }
    #avocado-fv h1 {
        position: absolute;
        left: calc( 100% * 120 / 1080 );
        bottom: calc( 100% * 60 / 400 );
        margin: 0;
        width: calc( 100% * 520 / 1080 );
        height: auto;
    }
    #avocado-fv .avocado-fv-pic1 {
        position: absolute;
        left: 5%;
        top: -37%;
        margin: 0;
        width: calc( 100% * 238 / 1080 );
        height: auto;
        rotate: 115deg;
    }

    #avocado-main {
        position: relative;
        margin: 0 auto;
        padding: 8.0vw 0;
        width: 100%;
        height: auto;
        background: url(../images/avocado-main-bg.webp) repeat-y center / 100% auto;
    }
    #avocado-main::before {
        position: absolute;
        content: "";
        bottom: calc( 100% - 6.0vw );
        right: 0;
        margin: 0;
        width: calc( 100% * 400 / 1080 );
        height: auto;
        aspect-ratio: 400 / 408;
        background: url(../images/avocado-pic1.webp) no-repeat center / contain;
    }
    #avocado-main .avocado-main-box {
        position: relative;
        margin: 0 auto;
        padding: 30px 30px 60px;
        width: 90%;
        max-width: 840px;
        background: url(../images/avocado-main-r.webp) repeat-y right top / 5.5% auto, #fff;
        border-radius: 20px 0 0 20px;
    }
    #avocado-main .avocado-main-pic1 {
        position: absolute;
        left: -21%;
        top: -3%;
        margin: 0;
        width: calc( 100% * 297 / 1080 );
        height: auto;
        rotate: 130deg;
        z-index: 1;
    }
    #avocado-main .avocado-main-title {
        position: relative;
        width: calc( 100% * 246 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-line {
        position: relative;
        width: calc( 100% * 735 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-subtitle1 {
        position: relative;
        margin: 30px 0 0 30px;
        width: calc( 100% * 500 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-subtitle2 {
        position: relative;
        margin: 30px 0 0 30px;
        width: calc( 100% * 163 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-subtitle3 {
        position: relative;
        margin: 30px 0 0 30px;
        width: calc( 100% * 183 / 780 );
        z-index: 2;
    }
    #avocado-main .avocado-main-btns {
        position: relative;
        margin: 10px auto 0;
        width: calc( 100% - 60px );
        display: flex;
        flex-wrap: wrap;
        gap: 20px 20px;
        z-index: 2;
    }
    #avocado-main .avocado-main-btns + .avocado-main-line {
        margin-top: 40px;
    }
    #avocado-main .avocado-main-btns .avocado-main-btn {
        display: block;
        margin: 0;
        width: calc( 50% - 10px );
        height: auto;
        cursor: pointer;
    }
    #avocado-main .avocado-main-btns .avocado-main-btn.narrow {
        margin-top: 10px;
        width: calc( 50% * 640 / 698 );
    }

    .ws-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        height: 100vh;
        padding: 80px 0;
        background: rgb( 0, 0, 0, 0.66 );
        overflow-y: auto;
        z-index: 990;
        opacity: 0.0;
        transform: scaleY( 0.0 );
        transform-origin: top center;
        transition: opacity 0.3s ease-out, transform 0.01s ease-out 0.3s;
    }
    .ws-popup.show {
        opacity: 1.0;
        transform: scaleY( 1.0 );
        transition: opacity 0.3s ease-out, transform 0.01s ease-out;
    }
    .ws-close-popup {
        position: fixed;
        top: 1.0vw;
        right: 1.0vw;
        width: 4.0vw;
        height: auto;
        aspect-ratio: 1 / 1;
        background: rgba( 0, 0, 0, 0.25 );
        border-radius: 10px;
        cursor: pointer;
        z-index: 999;
    }
    .ws-close-popup::before {
        position: absolute;
        content: "";
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        background: #fff;
        clip-path: polygon( 10% 0, 50% 40%, 90% 0, 100% 10%, 60% 50%, 100% 90%, 90% 100%, 50% 60%, 10% 100%, 0 90%, 40% 50%, 0 10% );
    }
    .ws-popup ~ .ws-close-popup {
        display: none;
    }
    .ws-popup.show ~ .ws-close-popup {
        display: block;
    }
    .ws-popup p {
        position: relative;
        margin: 1.0em 0 0;
        color: #707070;
        font-size: 18px;
        line-height: calc( 28 / 18 );
        z-index: 2;
    }

    .avocado-popup-box {
        position: relative;
        margin: 0 auto;
        padding: 60px 100px 60px 60px;
        width: 90%;
        max-width: 840px;
        background: url(../images/avocado-popup-r.webp) repeat-y right top / 5.5% auto, #fff;
        border-radius: 20px 0 0 20px;
    }
    .avocado-popup-title {
        position: relative;
        z-index: 2;
    }
    .avocado-popup-title:not(:first-child) {
        margin-top: 40px;
    }
    .avocado-popup-title.w100 {
        width: 100%;
    }
    .avocado-popup-title.w100 img {
        width: calc(100%*207/635);
    }
    .avocado-popup-title.w124 {
        width: calc(100%*124/635);
    }
    .avocado-popup-title.w207 {
        width: calc(100%*207/600);
    }
    .avocado-popup-title.w323 {
        width: calc(100%*323/680);
    }
    .avocado-popup-title.w402 {
        width: calc(100%*402/680);
    }
    .avocado-popup-title.w498 {
        width: calc(100%*498/680);
    }
    .avocado-popup-feature .avocado-popup-title:not(:first-child) {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px dotted #339966;
    }
    .avocado-movie {
        position: relative;
        margin: 20px auto;
        width: 100%;
    }
    .avocado-movie iframe {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 1080;
        border: 0;
        border-radius: 20px;
    }
    .avocado-main-pic {
        margin: 20px auto;
        width: 100%;
    }
    .avocado-main-pic img {
        margin: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 680 / 383;
        border: 0;
        transform-origin: left center;
        transform: scale( 1.05, 1.05 );
    }
    .avocado-popup-feature {
        position: relative;
        margin: 60px auto 0;
        width: 100%;
        padding: 20px;
        border: 3px solid #339966;
        border-radius: 20px;
        z-index: 2;
    }
    .avocado-popup-times {
        margin: 30px auto 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0 20px;
    }
    .avocado-popup-times .avocado-popup-time {
        width: 15%;
        height: auto;
        aspect-ratio: 80 / 110;
    }
    .avocado-popup-times .avocado-popup-time img {
        width: 100%;
        height: auto;
    }
    .avocado-popup-times .avocado-popup-materials {
        margin: 0;
        width: 85%;
        list-style: none;
    }
    .avocado-popup-times .avocado-popup-materials li {
        list-style: none;
        font-size: 18px;
    }
    .avocado-popup-times .avocado-popup-materials li + li {
        margin-top: 0.5em;
    }
    .avocado-popup-no {
        margin: 20px auto 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0 20px;
    }
    .avocado-popup-no .avocado-popup-icon {
        margin: 0;
        width: 32px;
        height: auto;
        aspect-ratio: 1 / 1;
        flex: 0 0 32px;
    }
    .avocado-popup-no .avocado-popup-txt {
        margin: 0.5em 0 0;
        color: #707070;
        font-size: 18px;
    }
    .avocado-flow {
        margin: 30px 0 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat( 3, 33.3% );
        gap: 20px 20px;
    }
    .avocado-flow .avocado-flow-item {
        margin: 0;
        width: 100%;
    }
    .avocado-flow .avocado-flow-item figure {
        position :relative;
        width: 100%;
        height: auto;
    }
    .avocado-flow .avocado-flow-item figure img {
        width: 100%;
        height: auto;
    }
    .avocado-flow .avocado-flow-item figure::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 15%;
        height: auto;
        aspect-ratio: 1 / 1;
        translate: -20% -20%;
    }
    .avocado-flow .avocado-flow-item:nth-child(1) figure::before {
        background: url(../images/avocado-no01.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item:nth-child(2) figure::before {
        background: url(../images/avocado-no02.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item:nth-child(3) figure::before {
        background: url(../images/avocado-no03.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item:nth-child(4) figure::before {
        background: url(../images/avocado-no04.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item:nth-child(5) figure::before {
        background: url(../images/avocado-no05.svg) no-repeat center / contain;
    }
    .avocado-flow .avocado-flow-item .avocado-green-box {
        padding: 20px;
        border: 3px solid #339966;
        border-radius: 20px;
    }
    .avocado-flow .avocado-flow-item .avocado-green-box figure {
        margin: 0 auto;
    }
    .avocado-flow .avocado-flow-item .avocado-green-box p {
        font-size: 13px;
    }

    #avocado-movies-fv {
        position: relative;
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 1080 / 110;
        overflow: hidden;
    }
    #avocado-movies-fv .avocado-fv-bg {
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }
    #avocado-movies-fv .avocado-fv-bg img {
        width: 100%;
        height: 100%;
        object-position: bottom center;
        object-fit: cover;
    }
    #avocado-movies-fv h1 {
        position: absolute;
        left: calc( 100% * 120 / 1080 );
        top: 50%;
        margin: 0;
        width: calc( 100% * 380 / 1080 );
        height: auto;
        translate: 0 -50%;
    }
    #avocado-movies {
        position: relative;
        margin: 0 auto;
        padding: 8.0vw 0;
        width: 100%;
        height: auto;
        background: url(../images/avocado-main-bg.webp) repeat-y center / 100% auto;
    }
    #avocado-movies p {
        position: relative;
        margin: 1.0em 0 0;
        color: #707070;
        font-size: 18px;
        line-height: calc( 28 / 18 );
        z-index: 2;
    }
    #avocado-movies .avocado-movies-box {
        position: relative;
        margin: 0 auto;
        padding: 60px 100px 60px 60px;
        width: 90%;
        max-width: 840px;
        background: url(../images/avocado-main-r.webp) repeat-y right top / 5.5% auto, #fff;
        border-radius: 20px 0 0 20px;
    }
    #avocado-movies .avocado-movies-box + .avocado-movies-box {
        margin-top: 60px;
    }

}

@media screen and (min-width: 751px) {
  .fullPage {
    padding-left: 130px;
    margin: auto 0;
  }
}

@media screen and (max-width: 750px) {
#avocado-fv {
        margin: 130px 0 0 0;
	}	
}

@media screen and (max-width: 750px) {
#avocado-movies-fv {
        margin: 130px 0 0 0;
	}	
}