@charset "utf-8";

/*----------------------------------------------------------------------------------------------------------------------------

reset & root set

----------------------------------------------------------------------------------------------------------------------------*/

/* reset
--------------------------------------------------------------*/

*,*::before,*::after { box-sizing: border-box; }
ul,ol { margin: 0; padding: 0; list-style: none; }
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd { margin: 0; font-size: inherit; font-weight: 400; }
img,video { max-width: 100%; height: auto; display: block; }
header,footer,main,aside,picture { display: block; }

/* form parts reset */
textarea { font: inherit; appearance: none; }
select { border: none; outline: none; font-weight: inherit; }
button,input[type="submit"],input[type="button"] { appearance: button; border: none; outline: none; cursor: pointer; }
input[type="submit"]:focus,input[type="button"]:focus { outline-offset: -2px;}
input[type="submit"]::-webkit-search-decoration,input[type="button"]::-webkit-search-decoration { display: none;}

/* iOS Safari tap reset */
body {-webkit-tap-highlight-color: transparent;}



/* print set
--------------------------------------------------------------*/
@media print{
html { width: 1280px; }
.header { position: relative !important; }/* fixheader clear */
[class*="iv-"] { opacity: 1; }/* inview view */
}


/* root set
--------------------------------------------------------------*/

/* color */
:root {
    --cl-key: #F287B2;
    --cl-txt: #333333;
    --cl-border: #e9e9e9;
    --cl-wh: #fff;
    --cl-bk: #000;
}

/* fixheader height */
:root { --header-height: 8rem; }
@media print, screen and (min-width: 768px){
:root { --header-height: 12rem; }
}

/* font set */
:root {
    /* font: style weight size / line-height family */
    --ff-base: normal 400 1.4rem / 1.6 "Zen Kaku Gothic New", sans-serif;
    --ff01f: "Lexend", sans-serif;
}
@media print, screen and (min-width: 768px){
:root {
    /* font: style weight size / line-height family */
    --ff-base: normal 400 1.4rem / 1.85 "Zen Kaku Gothic New", sans-serif;
}
}


/*----------------------------------------------------------------------------------------------------------------------------

base set

----------------------------------------------------------------------------------------------------------------------------*/
html { font-size:calc(100vw / 37.5); scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { min-height: 100vh; text-rendering: optimizeSpeed; -webkit-text-size-adjust:100%; text-size-adjust: 100%; color: var(--cl-txt); font: var(--ff-base); line-height: 1.8;  }
a { color: var(--cl-txt); outline:none; text-decoration:none; }

@media print, screen and (min-width: 768px){
html { font-size:62.5%; }
body { font-size: 1.6rem; }
a { transition: 0.5s; }
a:hover { opacity: 0.6; }
button:hover { opacity: 0.6; }
}



/* form set */
input:not([type=radio],[type=checkbox],[type=submit]),
select,
textarea { padding:0 0.75rem; background-color:var(--cl-bg-gr); border: none; width:100%; font-size: 1.6rem; height: 4rem; font-family: inherit; border-radius: 0; }
textarea { padding:1.0rem 1.25rem; min-height:20rem; }
button { cursor: pointer; padding: 0; background: none; color: var(--cl-txt); width: 100%; font-size: inherit; }
input::placeholder,
textarea::placeholder { color:var(--cl-txtl); font-size: 0.8em; }
label { display: inline-block; width: fit-content; }
label:hover { cursor: pointer; }
select {}

@media print, screen and (min-width: 768px){
input:not([type=radio],[type=checkbox],[type=submit]),
select,
textarea { height: 5rem; padding: 1rem 1.25rem; }
select:hover { cursor: pointer; }
}



/*----------------------------------------------------------------------------------------------------------------------------

utility & inview set

----------------------------------------------------------------------------------------------------------------------------*/

/* utility - base
---------------------------------------------------- */

/* utility - base responsive */
.u-wrapsect { padding: 6rem 0; overflow: hidden; }
.u-wrapsect._bg { background-color: var(--cl-wh); }
.u-only-pc	{ display: none; }

@media print, screen and (min-width: 768px){
.u-only-sp	{ display: none !important; }
.u-only-pc	{ display: inherit; }
}


/* utility - base */
.u-ff01 { font-family: var(--ff01f); font-weight: 600; }
.u-ff01-thin { font-family: var(--ff01f); font-weight: 300; }
.u-cl-txt { color: var(--cl-txt); }
.u-cl-wh { color: var(--cl-wh); }
.u-iframebox { position:relative; aspect-ratio: 16/9; }
.u-iframebox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.u-w30 { width: 30% !important; }
.u-w50 { width: 50% !important; }
.u-mt01 { margin-top: 1rem !important; }
.u-mt02 { margin-top: 2rem !important; }
.u-mt03 { margin-top: 3rem !important; }
.u-mb01 { margin-bottom: 1rem !important; }
.u-mb02 { margin-bottom: 2rem !important; }
.u-mb03 { margin-bottom: 3rem !important; }

@media print, screen and (min-width: 768px){

}



.u-txt-cen { text-align: center !important;}


.u-marker { display: inline; background:linear-gradient(transparent 60%, #FCE5E4 60%);}

.u-sectitle { font-size: 2.4rem; line-height: 1.6; }
.u-sectitle-sub { display: block; width: max-content; margin-bottom: 0.5rem; background:linear-gradient(transparent 60%, #FFF5D8 60%); font-size: 1.6rem;}
.u-sectitle._cen {  text-align: center;}
.u-sectitle-sub._cen { margin-inline: auto;}
@media print, screen and (min-width: 768px){
.u-sectitle { font-size: 3.2rem;}

}



/* utility - link
---------------------------------------------------- */

/* utility - linkbtn */



/* iv-animation
---------------------------------------------------- */
.iv-fade { opacity:0; transition: 0.8s; }
.iv-fade._view { opacity:1; }
.iv-up_fade { opacity:0; transform:translate(0, 6rem); transition: 0.8s; }
.iv-up_fade._view { opacity:1; transform:translate(0, 0); }




/*----------------------------------------------------------------------------------------------------------------------------

base layout

----------------------------------------------------------------------------------------------------------------------------*/

.pc-bg { display: none; }

@media print, screen and (min-width: 768px){
.content-wrap { position: relative; background-color: #FCE5E4;  }
.content-wrap::before { position: fixed; top: 0; left: 0; content: "" ; display: block; width: 100vw; height: 100vh; background: url(/images/candy_relay/pc_bg.png) no-repeat center center / cover;  }
.pc-bg { display: flex; height: 100vh; justify-content: space-between; left: 0; pointer-events: none; position: fixed; top: 0; width: 100%; }
.pc-bg__right,
.pc-bg__left { display: flex; flex-direction: column; justify-content: flex-end; padding: 6% 0 6rem 0; pointer-events: initial; width: calc((100% - 50rem)); }
.pc-bg__left { padding-left: 2rem; }
}
@media print, screen and (min-width: 1040px){
.content-wrap { padding: 6rem 0; }
.content-wrap::after { position: fixed; top: 0; left: 0; content: ""; display: block; width: 60rem; height: 26.4rem; background: url(/images/candy_relay/pc_bg_title.svg) no-repeat center center / contain #FCE5E4; clip-path: polygon(0 0, 100% 0, 100% 65%, 0% 110%); }
.pc-bg__right,
.pc-bg__left {  width: calc((100% - 50rem) / 2); }

}




.wrapper { background:  #FACAC8; }
.wrapper::before { position: fixed; top: 0; left: 0; content: "" ; display: block; width: 100vw; height: 100vh; background: url(/images/candy_relay/pc_bg.png) no-repeat center center / cover; }
.wrapper > * { position: relative; padding-inline: 2rem; z-index: 10;}


@media print, screen and (min-width: 768px){
.wrapper { position: relative; width: 50rem; margin-right: 0;  box-shadow: 0 0 14px rgba(0, 0, 0, .2); z-index: 10;}
.wrapper::before { display: none; }
.wrapper > * { padding-inline: 3rem; }
}
@media print, screen and (min-width: 1040px){
.wrapper { margin: 0 auto; border-radius: 2rem; overflow: hidden; }
}





/* header
--------------------------------------------------------------*/

/* header */
.header { width: 100%; max-width: 40rem; margin: 0 0 0 auto;  }
.header-logo { }
.header-nav { display: none; }

.bn-wrap { display: block; max-width: 32rem; margin-top: 2rem; padding: 1rem 1rem 0.5rem 1rem; background-color: var(--cl-wh); border-radius: 1rem 0 0 1rem; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.16);}
.bn-wrap-title { display: grid; grid-template-columns: max-content max-content; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 0.5rem; font-size: 1.4rem;}
.bn-wrap-title::before { content: ""; display: block; width: 0.6em; height: 1em; background-color: #FACAC8; clip-path: polygon(0 0, 0% 100%, 100% 50%);}

@media print, screen and (min-width: 768px){
.gnav { position: relative; display: grid; gap: 1rem; width: 100%;}
.gnav::before { position: absolute; top: -6rem; left: 0; content: ""; display: block; width: 18rem; height: 6.8rem; background: url(/images/candy_relay/pc_menu_title.svg) no-repeat center center / contain #FCE5E4;}
.gnav-item { display: grid; grid-template-columns: 1em 1fr; gap: 1rem; position: relative; padding: 1.5rem 2rem; text-decoration: none; color: #333; background-color: var(--cl-wh); border-radius: 5rem 0 0 5rem; font-size: 1.4rem; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.16); }
.gnav-item::before { content: ''; color: #FACAC8; transition: 0.3s;  }
.gnav-item.is-active::before,
.gnav-item:hover::before { content: '●'; }
.gnav-item:hover {  opacity: 1; }
.bn-wrap { border-radius: 1rem;}

}



/* footer
--------------------------------------------------------------*/

.footer { padding: 0 2rem 2rem; background-color: var(--cl-wh); text-align: center; }
.finfo-logo { width: 21.4rem; margin: 0 auto; }
.fcopy { margin-top: 1rem; font-size: 1.2rem; }
@media print, screen and (min-width: 768px){
}






/* spitem
--------------------------------------------------------------*/

/* _spopen changes */
@media print, screen and  (max-width: 1023px) {
body._spopen { height: 100%; overflow: hidden; }
}


/* spnav-btn */
.spitem-btn { position: fixed; top: 1.5rem; right: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color:var(--cl-key); cursor: pointer; width: 5rem; height: 5rem; outline: none; transition:0.5s; z-index: 130; cursor: pointer; border-radius: 5rem 0 0 5rem; }
.spitem-btn::before,
.spitem-btn::after { content: ""; position: absolute; left: 50%; width: 1.4rem; height: 1px; background-color: var(--cl-wh); transform: translateX(-50%); transition:0.3s; }
.spitem-btn::before { top: 1.8rem; }
.spitem-btn::after  { bottom: 1.8rem; }
.spitem-btn-line { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 1.4rem; height: 1px; background-color: var(--cl-wh); transition: 0.3s; overflow: hidden; }

._close.spitem-btn { }
._close.spitem-btn::before,
._close.spitem-btn::after { content: ""; position: absolute; left: 50%; background-color:var(--cl-wh); transform: translateX(-50%); transition:0.3s; }
._close.spitem-btn::before { top: 50%; transform: translate(-50%,-50%) rotate(45deg) ; left: 50%; }
._close.spitem-btn::after  { bottom: auto; top: 50%; transform: translate(-50%,-50%) rotate(-45deg); left: 50%;}
._close.spitem-btn .spitem-btn-line { display: none; }

@media print, screen and (min-width: 768px){
.spitem { display: none; }
.spitem-btn { display: none; }
}

/* spnav [wrap] */
.spmenu { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; width: 100%; z-index: 90; transition: 0.5s; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.spmenu._spopen { opacity: 1; visibility: visible; }
.spmenu-inner { position: relative; top: 0; right: -100%; width: 80%; height: calc(100vh - 4rem); margin: 2rem 0 2rem auto; padding: 8vh 0; overflow-y: scroll; background-color: var(--cl-bg-gr); border-radius: 1rem; transition: 0.5s;}
.spmenu._spopen .spmenu-inner { right: 0; }


/* spnavMenu */
.spnav {  }
.spnav-item { margin-top: 1rem; font-size: 1.6rem; }
.spnav-item { display: block; padding: 2vh 4vw; background-color: var(--cl-wh); border-radius: 1rem 0 0 1rem; line-height: 1; }






/*----------------------------------------------------------------------------------------------------------------------------

component

----------------------------------------------------------------------------------------------------------------------------*/

/* layout
--------------------------------------------------------------*/

/* c-grid */
.c-grid { display: grid; gap: 1rem; }
.c-grid._grid-s1-1 { grid-template-columns: 1fr 1fr; }
.c-grid._grid-s1-2 { grid-template-columns: 1fr 2fr; }
.c-grid._grid-s1-3 { grid-template-columns: 1fr 3fr; }

@media print, screen and (min-width: 768px){
}






/*----------------------------------------------------------------------------------------------------------------------------

page unique

----------------------------------------------------------------------------------------------------------------------------*/


/* 上下にふわふわするアニメーションの定義 */
@keyframes floatUpAndDown {
  0%, 100% {
    transform: translateY(0); /* 初期位置 */
  }
  50% {
    transform: translateY(-10px); /* 少し上に移動（10pxはお好みで調整） */
  }
}

/* アニメーションを適用する汎用クラス */
.u-float {
  display: inline-block; /* トランスフォームが正しく適用されるように */
  animation: floatUpAndDown 3s ease-in-out infinite; /* ショートハンド */
}




.kv { position: relative; padding-top: 2rem; }
.kv-catch { position: absolute; top: 4rem; left: 0; right: 0; width: calc(100% - 2rem); margin: 0 auto;}
.kv-pic { border-radius: 23rem 2rem 23rem 23rem; overflow: hidden;}
@media print, screen and (min-width: 768px){
.kv { padding-top: 3rem; }
}

#sec01 { margin-top: -10rem; padding-block: 16rem 0; background: url(/images/candy_relay/sec01_bg.svg) no-repeat center center / cover; z-index: 7;}
#sec01 .u-sectitle + p { }
#sec01 .u-sectitle + p::before { content: "";display: block; width: 16rem; height: 0.8rem; margin: 3rem 0; background: url(/images/candy_relay/sec01_title_line.svg) no-repeat center left / contain; }
#sec01 .yt-wrap { margin-top: 4rem; border-radius: 1rem; overflow: hidden; }




#sec02 { position: relative; overflow: hidden; margin: 4rem 2rem; padding: 4rem 2rem; background-color: #FFF5D8; border-radius: 4rem; text-align: center;}
#sec02 .u-sectitle span { display: inline-block; padding-bottom: 0.5rem;  background-image: radial-gradient(circle, #f287b2 1.5px, transparent 1.5px); background-position: left bottom; background-repeat: repeat-x; background-size: 14px 3px;}
#sec02 .counter { position: relative; margin-top: 5rem; padding: 2rem; background-color: var(--cl-wh); border-radius: 1rem;}
#sec02 .counter-title { position: absolute; top: -2rem; left: 0; right: 0; display: grid; align-items: center; justify-content: center; width: max-content; height: 4rem; margin: 0 auto; padding: 0 1.5rem; background-color: var(--cl-wh); color: var(--cl-key); border-radius: 5rem;}
.counter-now { margin-top: 1rem; font-size: 2.4rem;}
.counter-remaining {}
.counter-now,
.counter-remaining { display: flex; gap: 0.5rem; align-items: baseline; justify-content: center;}
.counter-num { color: var(--cl-key);}
.counter-now .counter-num { font-size: 4rem; line-height: 1;}
.counter-remaining .counter-num { font-size: 2.4rem; line-height: 1;}
#sec02 .counter + p { margin-top: 2rem; text-align: left;}


/* 紙吹雪用キャンバスのスタイル */
#my-canvas {
    position: absolute; /* 枠に対して絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;         /* 背景に回す */
    pointer-events: none; /* ★重要：キャンバスが前面にあっても、奥のボタンやリンクをクリックできるようにする */
}

/* コンテンツがキャンバスの下に隠れないようにする */
.u-wrapsect .content {
    position: relative;
    z-index: 1;
    padding: 20px;
    text-align: center;
}





#sec03 { border-radius: 2rem 2rem 0 0;}
.sec03-pic { width:100%; max-width: 40rem; margin: 3rem auto;}
.sec03-txt { text-align: center; font-size: 1.6rem; }
.sec03-txt + .sec03-txt { margin-top: 1.5rem; }
.sec03-txt.u-ff01 { color: var(--cl-key);}




#sec04 { background-image: radial-gradient(circle, #f287b2 1.5px, transparent 1.5px); background-position: left top; background-repeat: repeat-x; background-size: 13px 3px;}
#sec04 .u-sectitle + p { margin-top: 3rem;}
#sec04 .x-wrap { margin: 3rem 0;}
#sec04 .sec04-share { font-size: 2rem; text-align: center;}
#sec04 .sec04-share-btn { display: grid; grid-template-columns: 1em max-content; gap: 0.5rem; justify-content: center; align-items: center; height: 8rem; margin-top: 2rem; border: var(--cl-txt) 1px solid; border-radius: 0.5rem; font-size: 1.6rem; }
#sec04 .sec04-share-btn::before { content: ""; display: block; width: 1.2em; height: 1.2em; mask: url(/images/candy_relay/ico_sns_x.svg) no-repeat center center / contain; background-color: var(--cl-txt);  }



#sec05 { background-image: radial-gradient(circle, #f287b2 1.5px, transparent 1.5px); background-position: left top; background-repeat: repeat-x; background-size: 13px 3px;}
#sec05 .u-sectitle + p { margin-top: 3rem;}
#sec05 .sec05-btn { display: block; margin-top: 3rem;}




#sec06 { background-image: radial-gradient(circle, #f287b2 1.5px, transparent 1.5px); background-position: left top; background-repeat: repeat-x; background-size: 13px 3px;}
#sec06 .u-sectitle + p { margin-top: 3rem;}
#sec06 .member-wrap { margin-top: 6rem;}
#sec06 .sec06-title { position: relative; display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center; justify-content: center; color: var(--cl-key); font-size: 1.8rem;}
#sec06 .sec06-title span { display: block; padding: 0.5rem 1.5rem; border: var(--cl-key) 1px solid; background-color: var(--cl-wh); border-radius: 5rem;}
#sec06 .sec06-title::before { content: ""; display: block; width: 100%; height: 3px; background-image: radial-gradient(circle, #f287b2 1.5px, transparent 1.5px); background-position: left top; background-repeat: repeat-x; background-size: 13px 3px;}
#sec06 .sec06-title::after { content: ""; display: block; width: 100%; height: 3px; background-image: radial-gradient(circle, #f287b2 1.5px, transparent 1.5px); background-position: left top; background-repeat: repeat-x; background-size: 13px 3px;}

#sec06 .swiper { margin-right: -2rem;}
#sec06 .member-list { list-style: none; padding: 0; margin: 2rem 0 0; }
#sec06 .member-list-item { position: relative; }
#sec06 .member-list-item img { width: 100%; height: auto; display: block; }
#sec06 .member-list-item p { position: absolute; bottom: 2rem; left: 0; }
#sec06 .member-list-item span { display: block; width: max-content; background-color: var(--cl-wh); font-size: 3rem; line-height: 1;}
#sec06 .member-list-item span.u-ff01-thin { display: block; margin-top: 1rem; font-size: 1.4rem; color: #707070; }

#sec06 .c-grid { margin-top: 3rem;}
#sec06 .u-icobtn { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 1rem; color: var(--cl-key); border: var(--cl-key) 1px solid; border-radius: 1rem; height: 7rem; padding: 0 2rem;  }
#sec06 .u-icobtn::before { content: ""; display: block; width: 1.6em; height: 1.6em; mask: no-repeat center center / contain; background-color: var(--cl-key); }
#sec06 .u-icobtn._youtube::before { mask-image: url(/images/candy_relay/ico_sns_youtube.svg);  }
#sec06 .u-icobtn._insta::before { mask-image: url(/images/candy_relay/ico_sns_insta.svg);  }
#sec06 .u-icobtn._tiktok::before { mask-image: url(/images/candy_relay/ico_sns_tiktok.svg);  }
#sec06 .u-icobtn._x::before { mask-image: url(/images/candy_relay/ico_sns_x.svg);  }
#sec06 .u-icobtn._official { grid-column: 1/3;  }
#sec06 .u-icobtn._official::before { mask-image: url(/images/candy_relay/ico_site.svg);  }


@media print, screen and (min-width: 768px){
#sec06 .swiper { margin-right: -3rem;}

}




#btn_sns { display: none;}
header:not(.header) { display: none;}
footer:not(.footer) { display: none;}

#ctf .ctf-item {  box-shadow: none !important; border: #ddd 1px solid; margin: 1rem 0 2rem!important; width: 100% !important; padding: 2rem !important;}

#ctf .ctf-narrow .ctf-tweet-content { margin-top: 1rem !important;}
#ctf .ctf-author-box { width: 100%;}
#ctf .ctf-author-name { font-size: 1.4rem; }
#ctf p.ctf-tweet-text { font-size: 1.3rem;}

.ctf-tweet-media:has(video),
#ctf .ctf-tweet-media a:has(img) { position: relative; aspect-ratio: 1 / 1;}
#ctf .ctf-tweet-media img,
#ctf .ctf-tweet-media video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}


.x-wrap {}