@charset "UTF-8";
/* ============================================================

    clamp(最小値, 可変値, 最大値) 
        特定の画面幅（viewport）における、可変する値の最小、最大値を設定しています。

    max(値1, 値2) 
        値1、2のうち、大きい方の値を適用させます。基本的には max(固定値, 固定値 / 画面幅) を設定しています。

    min(値1, 値2) 
        値1、2のうち、小さい方の値を適用させます。基本的には min(固定値, 固定値 / 画面幅) を設定しています。

============================================================ */
:root {
    --sans: "Noto Sans JP", sans-serif;
    --serif: "Noto Serif JP", serif;
    
    --color-main:#A40B5D;
    --color-main-light:color-mix(in sRGB, var(--color-main) 5%, transparent);
    --color-sub:#f5b32c;

    /* viewport:375-1200px */
    --clamp_42-60px:clamp(2.625rem, calc(2.114rem + 2.182vw), 3.75rem);     /* 42-60px */
    --clamp_34-43px:clamp(2.125rem, calc(1.869rem + 1.091vw), 2.688rem);    /* 34-43px */
    --clamp_30-40px:clamp(1.875rem, calc(1.591rem + 1.212vw), 2.5rem);      /* 30-40px */
    --clamp_26-33px:clamp(1.625rem, calc(1.426rem + 0.848vw), 2.063rem);    /* 26-33px */
    --clamp_24-30px:clamp(1.5rem, calc(1.33rem + 0.727vw), 1.875rem);       /* 24-30px */
    --clamp_20-24px:clamp(1.313rem, calc(1.227rem + 0.364vw), 1.5rem);      /* 20-24px */
    --clamp_17-21px:clamp(1.063rem, calc(0.949rem + 0.485vw), 1.313rem);    /* 17-21px */
    --clamp_16-18px:clamp(1rem, calc(0.943rem + 0.242vw), 1.125rem);        /* 16-18px */
    --clamp_14-16px:clamp(0.875rem, calc(0.818rem + 0.242vw), 1rem);        /* 14-16px */
}
*, *:before, *:after {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
html { font-family: var(--sans); line-height:1.65;}
body { overflow-x:hidden;}
img { max-width: 100%; height: auto; vertical-align: bottom;}
h2 {
    font-family:var(--serif);
    color:var(--color-main);
    font-size:var(--clamp_30-40px);
    text-align:center;
}
br.pc { display:block;}
br.sp { display:none;}
:where(ul, ol) { list-style:none;}
.circle {
    padding-left:1em;
    text-indent:-1em;

    &:before { content:"●"; color:var(--color-main);}
}
.caution {
    padding-left:1em;
    text-indent:-1em;
    font-size:0.8em;
    
    &:before { content:"※";}
}
.abs { position: absolute;}
.shadow { filter: drop-shadow(4px 4px 3px rgb(0 0 0 / 0.3));}
.inner { width:min(1200px, 90%); margin-inline:auto;}
.prize {
    display:flex;
    flex-wrap:wrap;
    gap:1.2em;

    & .prize_item {
        padding:0.5em 1.5em;
        background-color:var(--color-sub);
        border-radius:0.5em;
        font-size:1.15em;
        font-weight:bold;
        text-align:center;

        & small { display:block; font-size:0.75em; font-weight:normal;}
    }
    & .prize_desc { font-weight:bold;}
}
.popup {
    opacity:0;
    pointer-events:none;

    position:fixed;
    inset:60vh 10px auto auto;
    width:clamp(5.469rem, calc(2.983rem + 10.606vw), 10.938rem);/* viewport:375-1200px 87.5-175px */
    transform-origin:right bottom;
    animation:popup_move 5s ease infinite;
    transition:opacity 0.5s ease;
    z-index:100;

    &.active { opacity:1; pointer-events:auto;}
}
@keyframes popup_move {
    0%, 90%, 100% { rotate:0deg;}
    92%, 96% { rotate:-3deg;}
    94%, 98% { rotate:3deg;}
}

a:focus img { filter:brightness(1.1)}
@media (any-hover:hover) {
    a:hover img { filter:brightness(1.1)}
}
@media (any-hover:none){
    a:active img { filter:brightness(1.1);}
}



@media only screen and (max-width:768px){
    br.pc { display:none;}
    br.sp { display:block;}
}

/* ==================================================
    header
================================================== */






/* ==================================================
    section.fv
================================================== */
section.fv {
    position: relative;

    & :is(h1, picture) { display:contents;}
    & img { width:100%;}
    & .parallax_container { position:relative;}
    & :is(.bg2, .bg3) {
        /* viewport:1920px -160px */
        margin-top: -8.4vw;
    }
    & .text {
        position:absolute;
        filter:drop-shadow(0px 0px 7px #000);
    }
    & .text1 { width:53.2665%; right:2.5431%; top:15.7291vw;}
    & .text2 { width:38.1882%; right:2.9371%; top:38.2118vw;}
    & .text3 { width:60.0710%; right:1.9436%; top:70vw;}

    & .abs {
        inset: min(70px, 3.5vw) auto auto min(70px, 3.5vw);
        width: min(105px, 5.46875vw);
        filter:drop-shadow(0px 0px 7px #000);
    }

    & .swiper { padding-block:1em; translate:0 -50%;}
    & .swiper img {
        --viewport:1920;
        width:calc(var(--base-width) / var(--viewport) * 100vw);
        margin-top:calc(var(--base-margin) / var(--viewport) * 100vw);
        filter:drop-shadow(2px 2px 1px rgb(0 0 0 / 0.2));
    }
    & .swiper-wrapper { transition-timing-function: linear;}
    & .swiper-slide { width: fit-content;}

    /* viewport:1920px 時の比率 */
    & .swip1 { --base-width:376; --base-margin:93.1428; rotate:4deg;}
    & .swip2 { --base-width:358; --base-margin:205.0915; rotate:-4deg;}
    & .swip3 { --base-width:366; --base-margin:106.1685; rotate:3deg;}
    & .swip4 { --base-width:350; --base-margin:62.59; rotate:-6deg;}
    & .swip5 { --base-width:366; --base-margin:0; rotate:3deg;}
}
@media only screen and (max-width:1200px){
    section.fv .swiper img { --viewport:1200;}
}
@media only screen and (max-width:768px){
    section.fv {

        & :is(.bg2, .bg3) { margin-top:-8.8vw;}

        /* viewport:375pxの際の割合 */
        & .text1 { width:66.0735vw; top:23.7955vw;}
        & .text2 { width:63.5608vw; top:53.3125vw;}
        & .text3 { width:74.0365vw; top:96.2376vw;}

        & .abs { width:48px;}
    }
}



/* ==================================================
    section.intro：「飛鳥藤原」とは
================================================== */
section.intro {

    & .maps {
        display:grid;
        grid-template-columns:1fr 2fr;
        gap:2.5em;
        margin-top:min(110px, 9.1666vw);/* viewport:1200;px 110px */
        font-size:var(--clamp_20-24px);

        & p {
            writing-mode:vertical-rl;
            font-family:var(--serif);
            line-height:2;
            letter-spacing:0.01em;
        }
        & img { margin-top:-23%;}
    }
}
@media only screen and (max-width:1200px){
    section.intro {

        & .maps {
            grid-template-columns:auto 1fr;
            gap:1.5em;

            & p { line-height:1.8;}
        }
    }
}
@media only screen and (max-width:768px){
    section.intro {

        & .maps {
            grid-template-columns:1fr;
            justify-content:center;

            & p { block-size:fit-content; margin-block:auto;}
            & img { margin-top:0;}
        }
    }
}




/* ==================================================
    section.period：募集期間
================================================== */
section.period {
    position:relative;
    padding-block:285px;

    &:before {
        content:"";
        position:absolute;
        inset:50% auto auto 50%;
        translate:-50% -50%;
        width:max(1920px, 100%);
        aspect-ratio:2400/1609;
        background:url(../../img/period/bg.png) no-repeat center / cover;
        z-index:-1;
    }

    & .inner { position:relative; padding-inline:2rem;}
    & ul {
        display:grid;
        grid-template-columns:1fr clamp(2rem, calc(0.636rem + 5.818vw), 5rem) 1fr;/* viewport:375-1200px 32-80px */
        align-items:center;
        justify-content:space-between;
        gap:clamp(0.625rem, calc(0rem + 2.667vw), 2rem);/* viewport:375-1200px 10-32px */
        margin-top:min(80px, 6.6666vw); /* viewport:1200px 80px */

        & .line { width:100%; height:1px; background-color:#000;}
    }
    & dl {
        display:grid;
        grid-template-columns:auto 1fr;
        margin-top:clamp(2.75rem, calc(2.409rem + 1.455vw), 3.5rem);/* viewport:375-1200px 44-56px */
    }
    & :is(dt, dd) { padding-block:2rem; border-top:dashed 1px #000;}
    & :is(dt, dd):last-of-type { border-bottom:dashed 1px #000;}
    & dt {
        align-content:center;
        padding-inline:1.5em;
        color:var(--color-main);
        font-family:var(--serif);
        font-size:var(--clamp_24-30px);
        font-weight:bold;
        text-align:center;
    }
    & dd { padding-left:2rem;}
    & dd:has(.theme) { container-type:inline-size;}
    & .theme {
        font-size:var(--clamp_42-60px);
        font-size:min(60px, 7.7cqw);
        font-weight:bold;
        letter-spacing:0.075em;
        font-feature-settings:"palt";

        & ~ p { font-size:var(--clamp_17-21px); font-weight:bold;}
        & ~ small { font-size:var(--clamp_14-16px);}
    }
    & .prize { font-size:var(--clamp_20-24px);}
    & .prize_item {
        padding-inline:1em;
        font-size:var(--clamp_26-33px);
        line-height:1;
        letter-spacing:-0.05em;

        & span { font-size:var(--clamp_34-43px);}
        & small { font-size:18px; font-weight:inherit; line-height:1.8;}
    }
    & .abs { width:min(300px, 15.625vw); rotate:-5deg; inset:5rem calc(100% + 1rem) auto auto;}
}
@media only screen and (max-width:1700px){
    section.period {

        & dd:has(.prize) { position:relative;}
        & .prize { flex-direction:column; width:fit-content;}
        & .abs {
            rotate:5deg;
            inset:3rem clamp(1rem, calc(-8.6rem + 12.8vw), 5rem) auto auto;/* viewport:1200-1700px 16-80px */
            width:min(300px, 25vw);/* viewport:1500px 300px */
        }
    }
}
@media only screen and (max-width:1200px){
    section.period {
        margin-bottom:15vw;
        padding-block:10.4166vw;/* viewport:1200px 200px */

        &:before {
            width:100%;
            height:100%;
            aspect-ratio:unset;
        }
        & dt { padding-inline:0.75em;}
        & dd { padding-left:0px;}
        & .abs { inset-inline:auto clamp(0rem, calc(-5rem + 8vw), 1rem);/* viewport:1000-1200px 0-16px */}
    }
}
@media only screen and (max-width:1000px){
    section.period {
        & .abs { inset:10rem clamp(-2rem, calc(-21.862rem + 41.379vw), 4rem) auto auto;/* viewport:768-1000px -32-64px */}
    }
}
@media only screen and (max-width:768px){
    section.period {
    
        & .inner { padding-inline:0px;}
        & dl { grid-template-columns:1fr;}
        & dt { padding-inline:0px; text-align:center;}
        & dt:last-of-type { border-bottom:none;}
        & dd { padding-top:0px; border-top:none;}
        & .prize { align-content:center; margin-inline:auto;}
        & .abs { display:none;}
    }
}





/* ==================================================
    section.insta：Instagram
================================================== */
section.insta {
    scroll-margin-top:clamp(1.5rem, calc(0.069rem + 6.107vw), 3rem);/* viewport:375-768px 24-48px */

    & h2 {
        position:relative;
        width:fit-content;
        margin-inline:auto;

        &:after {
            content:"";
            position:absolute;
            inset:auto auto 0 calc(100% + 1em);
            display:block;
            width:1.35em;
            aspect-ratio:1;
            background:url(../../img/icon_insta.svg) no-repeat center / contain;
        }
    }

    & .insta_post_wrap {
        margin-top:clamp(2rem, calc(-0.564rem + 10.941vw), 4.688rem);/* viewport:375-768px 32-75px */
        padding:clamp(1.5rem, calc(0.546rem + 4.071vw), 2.5rem);/* vierwport:375-768px 24-40px */
        background-color:var(--color-main-light);
    }
}



/* ==================================================
    section.details：募集要項
================================================== */
section.details {
    --wave-height:max(300px, 15.625vw);     /* 薄紫ウェーブ部分の高さ 第2引数：300px / 1920px（viewport） */
    --scenery-height:max(630px, 32.8125vw);  /* 募集規約下部にある風景画像の高さ 第2引数：630px / 1920px（viewport） */

    position:relative;
    padding-block:var(--wave-height) calc(var(--wave-height) + var(--scenery-height));
    overflow-x:clip;

    & .inner {
        position:relative;
        
        &:before, &:after {
            content:"";
            position:absolute;
            display:block;
            width:max(1920px, 100vw);
            height:var(--wave-height);
            background:url(../../img/details/bg1.svg) no-repeat center / cover;
            inset-inline:50% auto;
            translate:-50% 0;
            z-index:-1;
        }
        &:before { inset-block:auto 100%;}
        &:after { inset-block:100% auto; rotate:180deg;}
    }
    & .content_wrap {
        position:relative;
        padding-block:2rem;

        &:before {
            content:"";
            position:absolute;
            display:block;
            width:100vw;
            height:100%;
            inset:0 auto auto 50%;
            translate:-50% 0;
            background-color:var(--color-main-light);
            z-index:-1;
        }
    }
    & dl {
        position:relative;
        display:grid;
        grid-template-columns:12em 1fr;
        margin-top:clamp(2.5rem, calc(2.216rem + 1.212vw), 3.125rem);/* viewport:375-1200px 40-50px */
    }
    & :is(dt, dd) { padding-block:32px 48px; border-top:solid 1px var(--color-main);}
    & :is(dt, dd):last-of-type { border-bottom:solid 1px var(--color-main);}
    & dt {
        padding-right:1em;
        font-size:var(--clamp_20-24px);
        font-weight:bold;
        color:var(--color-main);
        line-height:1.3;
    }
    & dd { font-size:var(--clamp_16-18px);}
    & dd:nth-of-type(3) {
        position:relative;

        & .abs {
            /* viewport:768-1920px 250-500px */
            width:clamp(15.625rem, calc(5.208rem + 21.701vw), 31.25rem);
            rotate:5deg;
            transform-origin:top left;
            /* viewport:768-1920px 400-740px */
            inset:32px auto auto clamp(25rem, calc(10.833rem + 29.514vw), 46.25rem)
        }
    }
    & ol {
        counter-reset:ol;

        & li {
            position:relative;
            counter-increment:ol;
            margin-bottom:1em;
            padding-bottom:1em;
            padding-left:1em;
            text-indent:-1em;
            background:radial-gradient(circle, #000000 1px, transparent 1px) repeat-x left bottom / 6px 2px;
        }
        & li:before {
            content:counter(ol);
            display:inline-block;
            width:1lh;
            line-height:1.5;
            background-color:var(--color-main);
            border-radius:100%;
            color:#fff;
            font-size:0.675em;
            text-indent:0;
            text-align:center;
            translate:0 calc((0.5lh - 0.5em) * -1)
        }
    }
    & .hash { display:inline-flex; flex-wrap:wrap; gap:0.5em 1em;}
    & .hash span {
        display:inline-block;
        text-indent:0;
        padding:0.25em 1.5em;
        font-weight:bold;
        font-size:1.15em;
        background-color:#fff;
        border-radius:100vmax;
    }
    & .prize { margin-top:1em;}
    & .scenery {
        inset:auto auto 0 50%;
        translate:-50% 0%;
        max-width:unset;
        width:max(1920px, 100%);
    }
}
@media only screen and (max-width:1200px) {
    section.details {
        --wave-height:17.3333vw;
        --scenery-height:47.8125vw;
        --overlap:14.5833vw;/* 変数2つの重なり部分 */
        padding-bottom:calc(var(--wave-height) + var(--scenery-height) - var(--overlap));

        & .inner {
            &:before, &:after { width:100vw;}
        }
        & dl { grid-template-columns:auto 1fr;}
        & dd:nth-of-type(3) .abs { top:2.5lh;}
        & .scenery { width:100%;}
    }
}
@media only screen and (max-width:768px){
    section.details {
        & dl { grid-template-columns:1fr;}
        & :is(dt, dd) { padding-block:28px;}
        & dt { padding-inline:0;}
        & dt:last-of-type { border-bottom:none;}
        & dd { padding-top:0; border:none;}
        & dd:nth-of-type(3) .abs {
            inset:auto 0 -2lh auto;
            width:32.550vw;
        } 
    }
}






/* ==================================================
    section.terms：応募規約
================================================== */
section.terms {
    padding-top:min(150px, 7.8125vw);/* viewport:1920px 150px */

    & .desc {
        margin-block:1lh;
        font-weight:bold;
        font-size:var(--clamp_20-24px);
        line-height:2;
        text-align:center;
    }
    & .term_list_wrap {
        padding:2.625em 3.125em;
        background-color:var(--color-main-light);
        font-size:var(--clamp_14-16px);
    }
    & .term_list {
        padding-right:1em;
        height:800px;
        overflow-y:auto;
        
        & > li + li { margin-top:2lh;}
        & > li ol {
            list-style:num;
            margin-top:1lh;
            padding-left:2em;
            
            & li { text-indent:0;}
        }
        & .red { color:var(--color-main);}
    }
}
@media only screen and (max-width:768px){
    section.terms {

        & .term_list_wrap { padding:2em 1em;}
        & .term_list { padding-right:0.5em; height:60vh; scrollbar-width:thin;}
    }
}


/* ==================================================
    section.organizer：主催
================================================== */
section.organizer {
    padding-block:min(190px, 9.8958vw);/* viewport:1920px 190px */

    & a:has(.logo) {
        display:block;
        width:min(220px, 30%);
        margin:min(80px, 6.6666vw) auto 0;/* viewport:1200px 80px */
    }
}



/* ==================================================
    footer
================================================== */
footer {
    position: relative;
    margin-top:min(175px, 9.1145vw);/* viewport:1920px 175px */
    padding-bottom:min(50px, 2.6041vw);/* viewport:1920px 50px */
    background-color:var(--color-main);

    &:before {
        content:"";
        position:absolute;
        inset:auto auto calc(100% - 1px) 0%;
        display:block;
        width:100%;
        aspect-ratio:300/27;
        background:url(../../img/footer/bg.svg) no-repeat bottom center / cover;
        z-index:-1;
    }

    & .abs1 {
        bottom:min(125px, 6.5104vw); /* viewport:1920px 125px */
        left:min(65px, 3.3854vw);    /* viewport:1920px 65px */
        width:min(135px, 7.03125vw); /* viewport:1920px 135px */
        min-width:40px;
    }
    & .abs2 {
        inset: auto 75px 155px auto;
        right:min(75px, 3.90625vw);  /* viewport:1920px 75px */
        bottom:min(155px, 8.0729vw); /* viewport:1920px 155px */
        width:min(450px, 23.4375vw); /* viewport:1920px 450px */
        rotate:-3deg;
    }
    & .copy {
        margin-right:min(65px, 5vw);
        font-family: var(--serif);
        font-size:clamp(0.75rem, calc(0.693rem + 0.242vw), 0.875rem);
        color: #fff;
        text-align: end;
    }
}
@media only screen and (max-width:768px){
    footer {
        & .abs1 { bottom:calc(100% + 1rem);}
    }
}