@charset "UTF-8";

/*
	Reset CSS
-----------------------------------------------------------------------------------------------*/
/***
    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)){
	all: unset;
	display: revert;
}
*,*::before,*::after{
	box-sizing: border-box;
}
a, button{
	cursor: revert;
}
ol, ul, menu{
	list-style: none;
}
img{
	vertical-align: top;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
input, textarea{
	-webkit-user-select: auto;
	user-select: auto;
}
textarea{
	white-space: revert;
}
meter{
	-webkit-appearance: revert;
	appearance: revert;
}
::placeholder{
	color: unset;
}
:where([hidden]){
	display: none;
}
:where([contenteditable]:not([contenteditable="false"])){
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	line-break: after-white-space;
	-webkit-user-select: auto;
	user-select: auto;
}
:where([draggable="true"]){
	-webkit-user-drag: element;
}

/*
	Setting CSS
-----------------------------------------------------------------------------------------------*/
html{
	font-size: 62.5%;
}
body{
	width: 100%;
	font-family: YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif;
	font-size: 1.5em;
	font-weight: 400;
	font-feature-settings: 'palt';
	overflow-wrap: break-word;
}
p{
	line-height: 1.7;
}
a{
	color: #000;
	text-decoration: none;
	transition: all 0.3s;
}
a:link{
	color: #000;
}
a:visited{
	color: #000;
}
@media (any-hover: hover){
	a:hover {
		text-decoration: none;
		opacity: 0.7;
	}	
}

@media print, screen and (min-width:813px){
	/* tel pcのみ無効 */
	a[href^="tel:"]{
		pointer-events: none;
	}
}


/*
	common
-----------------------------------------------------------------------------------------------*/
/* 変数
============================== */
:root{
	/* color */
	--colorBlue:#1B439A;
	--colorRed:#CC0000;
	--colorLightGray:#F5F5F5;
	/* TikTok color */
	--colorPink: #FE2C55;
	--colorRBlue: #08DBEA;
	--colorPBlue: #00FFF0;
	--colorGray: #F5F5F5;
	/* font-weight */
	--ftBold: 700;
}

/* box
============================== */
/* wrapper */
#wrapper{
	position:relative;
}
#wrapper::after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url("../images/bg_pc.png") no-repeat center center / cover;
	position: fixed;
	top: 0;
	z-index: -1;
}

/* ctsWrapper */
#ctsWrapper{
	overflow: hidden;
}

/* ctsArea */
.ctsArea{
	margin: 0 auto;
	padding-inline: 20px;
}

/* spArea
============================== */
#spArea{
	max-width: 390px;
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	position: relative;
	z-index: 2;
}

/* ボタン
============================== */
.btnArea{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
a.btnBase{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 310px;
	min-height: 50px;
	padding: 10px 20px;
	padding-right: 30px;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--colorBlue);
	background-color: #fff;
	border-radius: 25px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	position: relative;
}
a.btnBase::after{
	content: "";
	display: inline-block;
	width: 16px;
	aspect-ratio: 1/1;
	background: url("../images/ico_arrow_forward.svg") no-repeat center center / 100%;
	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
}


/*
	KV
-----------------------------------------------------------------------------------------------*/
#kvWrapper{
	padding-top: 40px;
	margin-bottom: 35px;
	background: url("../images/bg_kv.png") no-repeat top center / contain;
	position: relative;
}
.kvArea{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	margin-inline: auto;
	padding-inline: 20px;
	position: relative;
}
.kvArea .logo{
	width: 120px;
}
.kvArea .txt{
	min-width: 296px;
}
.kvArea .img{
	width: 265px;
}
.kvArea .img img{
	width: 100%;
}
.kvArea .tit{
	min-width: 340px;
}

/*
	slider
-----------------------------------------------------------------------------------------------*/
#sliderWrapper{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	margin-bottom: 40px;
	position: relative;
}
#sliderWrapper .txt{
	width: 215px;
}

/* スライダー
============================== */
#imgSwiper{
	width: 390px;
	overflow: visible;
}
#imgSwiper .swiper-wrapper {
	transition-timing-function: linear !important;
}
#imgSwiper .swiper-slide{
	width: 190px !important;
	aspect-ratio: 1/1;
	position: relative;
}
#imgSwiper .swiper-slide:nth-of-type(even){
	margin-top: 20px;
}
#imgSwiper .swiper-slide img{
	width: 100%;
}
/* 丸パーツ */
#imgSwiper .swiper-slide::after{
	content: "";
	width: 110px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: url("../images/bg_dots.svg") repeat center center / 20px;
	position: absolute;
	z-index: -1;
}
#imgSwiper .swiper-slide:nth-of-type(even)::after{
	background: url("../images/bg_stripe.svg") repeat center center / 20px;
}
#imgSwiper .swiper-slide:nth-of-type(4n+1)::after{
	top: -30px;
	right: -30px;
}
#imgSwiper .swiper-slide:nth-of-type(4n+2)::after{
	width: 150px;
	left: -5px;
	bottom: -30px;
}
#imgSwiper .swiper-slide:nth-of-type(4n+3)::after{
	width: 160px;
	left: -10px;
	bottom: -5px;
}
#imgSwiper .swiper-slide:nth-of-type(4n+4)::after{
	width: 100px;
	right: 0;
	bottom: -20px;
}


/*
	cm
-----------------------------------------------------------------------------------------------*/
#cmWrapper{
	margin-bottom: 40px;
}
.cmArea{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* サムネイル */
.thumbnail{
	position: relative;
}
.thumbnail img{
	display: block;
	width: 100%;
}
.thumbnail::after{
	content: "";
	display: block;
	width: 50px;
	aspect-ratio: 1/1;
	background: url("../images/ico_play.svg") no-repeat center center / 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* modal
============================== */
.modalWrapper{
	display: none;
	width: 90%;
	max-width: 1000px;
	margin: 0;
    position: fixed;
    z-index: 1000;
}
.modalArea{
	max-height: calc(100svh - 20px);
	padding: 60px;
	background-color: #fff;
	border-radius: 20px;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.modalArea::-webkit-scrollbar{
	display: none;
}
.modalArea iframe{
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}
/* オープンボタン */
.modalOpen:hover{
	cursor: pointer;
}
/* クローズボタン */
.modalClose {
	width: 55px;
	aspect-ratio: 1/1;
	background-color: var(--colorBlue);
	border-radius: 50%;
    position: absolute;
    top: -20px;
    right: -20px;
	cursor: pointer;
}
.modalClose::before,
.modalClose::after{
	content: '';
	width: 1px;
	height: 20px;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}
.modalClose::after{
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* 背景 */
.modalBg {
	display: none;
	width: 100%;
	height: 120%;
	background-color: rgba(255,255,255,.3);
	backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
	opacity: 0.98;
	cursor: pointer;
}

/*
	TikTokキャンペーン
-----------------------------------------------------------------------------------------------*/
#tikTokWrapper{
	letter-spacing: .06em;
	padding-bottom: 40px;
	background: #000;
	position: relative;
	z-index: 100;
}
#tikTokWrapper .ctsArea{
	margin: 0 20px;
	background: #fff;
}
/* タイトル
============================== */
.TikTokTitCmn{
	position: relative;
	width: fit-content;
	font-size: 1.6rem;
	font-weight: var(--ftBold);
	text-align: center;
	line-height: 100%;
	margin-inline: auto;
	margin-bottom: 31px;
}
.TikTokTitCmn span{
	font-size: 1rem;
	font-weight: var(--ftBold);
	color: var(--colorPink);
}
.TikTokTitCmn::before,
.TikTokTitCmn::after{
	position: absolute;
	top: -3px;
}
.TikTokTitCmn::before{
	content: url(../images/ico_tit_left.svg);
	left: -25px;
}
.TikTokTitCmn::after{
	content: url(../images/ico_tit_right.svg);
	right: -25px;
}

/* kv
============================== */
#tikTokKvWrapper img{
	width: 100%;
}

/* 動画
============================== */
#postWrapper {
	position: relative;
}
#postWrapper .ctsArea{
	padding-top: 35px;
	border-radius: 10px 10px 0 0;
}
.postRead{
	font-size: 1.6rem;
	font-weight: var(--ftBold);
	line-height: 200%;
	text-align: center;
	letter-spacing: .1em;
}
/* 赤い文字 */
.readRed{
	color: var(--colorPink);
}
/* 青い文字 */
.readBlue{
	color: var(--colorRBlue);
}
.postImgArea{
	display: flex;
	width: 100%;
	height: 40px;
}
.postImgArea img{
	position: absolute;
	height: auto;
	z-index: 2;
}
/* ニックン */
.postImgArea img:first-of-type{
	left: 0;
	top: 70px;
	width: 90px;
}
/* セイチャン */
.postImgArea img:last-of-type{
	right: -2px;
	top: 71px;
	width: 85px;
}
.postSchedule{
	padding-block: 20px;
	border-top: 1px solid var(--colorPBlue);
	border-bottom: 1px solid var(--colorPink);
	margin-bottom: 40px;
}
.postTxt{
	font-size: 1.4rem;
	font-weight: var(--ftBold);
	line-height: 160%;
	letter-spacing: .1em;
	margin-bottom: 25px;
}
/* ダンス動画 */
.danceMovieList{
	display: flex;
	flex-direction: column;
	gap: 60px;
}
.danceMovieList li{
	position: relative;
}
/* 動画の右寄せ */
.danceMovieList li:first-of-type .tiktokWrap {
	margin-left: auto;
}
/* TikTok動画ラッパー */
.tiktokWrap {
	position: relative;
	max-width: 220px;
	overflow: hidden;
	aspect-ratio: 9 / 16; /* ← 重要：SPでもPCでも綺麗に縦動画が収まる */
}
.tiktokWrap img{
	border-radius: 10px;
}
.thumb-img,
video{
	width: 100%;
	height: 100%;
	object-fit: cover; /* ← サムネのデザインは壊さずトリミングも自然 */
	display: block;
}
/* TikTok動画 */
.thumb-img{
	width: 100%;
	display: block;
}
video{
	width: 100%;
	display: none;
	border-radius: 10px;
}
.play-button{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: opacity .3s ease;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	z-index: 10;
}
.play-button::before{
	content: "";
	width: 0;
	height: 0;
	border-left: 16px solid #fff;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	margin-left: 6px;
}
.danceTxtArea{
	position: absolute;
	bottom: -11%;
	z-index: 1;
}
.danceMovieList li:last-of-type .danceTxtArea{
	bottom: -19%;
}
.danceMovieList li:last-of-type .danceTxtArea{
	right: 0;
}
.danceTit{
	margin-bottom: 10px;
}
.danceTit img{
	width: auto;
}
.danceTxt{
	font-size: 1.2rem;
	font-weight: var(--ftBold);
}
.danceTxt span{
	display: inline-block;
	padding: 4px 5px;
	background: #fff;
}
/* 2番目のliの .danceTitのみ右揃えに */
.danceMovieList li:last-of-type .danceTxtArea .danceTit{
	text-align: right;
}
/* 2番目のliの .danceTxtのみ右揃えに */
.danceMovieList li:last-of-type .danceTxtArea .danceTxt{
	text-align: right;
}

/* 応募方法
============================== */
#applyWrapper .ctsArea{
	padding-top: 115px;
}
.applyList > li{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20px 30px;;
	border: 3px solid;
	border-color: var(--colorPBlue) var(--colorPink) var(--colorPink) var(--colorPBlue);
	border-radius: 12px;
}
.applyList > li:first-of-type,
.applyList > li:nth-of-type(2){
	margin-bottom: 46px;
}
.applyList > li:nth-of-type(2)::after,
.applyList > li:first-of-type::after{
	content: url(../images/ico_triangle.svg);
	position: absolute;
	left: 50%;
	bottom: -38px;
	translate: -50%;
}
.applyList > li:nth-of-type(3){
	margin-bottom: 13px;
	z-index: 11;
}
.applyList > li:nth-of-type(3)::after{
	position: absolute;
	content: url(../images/ico_applyList_puls.svg);
	left: 50%;
	translate: -50%;
	bottom: -24px;
	display: block;
	z-index: 100;
}
.applyList > li:last-of-type{
	padding-top: 30px;
}
.applyList > li:last-of-type .applyRead{
	margin-block: 0 2px;
}
.applyList > li:last-of-type .applyMovieListTxt{
	text-align: center;
	line-height: 170%;
}
.applyNum{
	width: fit-content;
	font-size: 1.4rem;
	font-weight: var(--ftBold);
	text-align: center;
	line-height: 100%;
	padding: 5px 20px 6px;/* 仮 */
	color: #fff;
	border-radius: 30px;
	background: #000;
	translate: 0 -50%;
}
.applyRead{
	font-size: 1.4rem;
	font-weight: var(--ftBold);
	line-height: 160%;
	text-align: center;
	margin-top: 8px;
}
a.applyAccountBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 70px;
	font-size: 1.4rem;
	font-weight: var(--ftBold);
	color: #fff;
	margin-top: 20px;
	border: 2px solid;
	border-color: var(--colorPBlue) var(--colorPink) var(--colorPink) var(--colorPBlue);
	border-radius: 10px;
	background: #000;
}
.applyAccountBtn::after{
	content: "";
	width: 50px;
	aspect-ratio: 1 / 1;
	margin-left: 10px;
	background: url(../images/img_applyFollow.png) no-repeat center center / cover;
}
.applyMovieList{
	display: flex;
	justify-content: space-between;
	text-align: center;
	gap: 20px;
	width: 100%;
}
.applyMovieList li{
	min-width: 90px;
	margin-top: 20px;
}
.applyMovieList li span{
	position: relative;
	display: block;
}
/* 画像の下部 白グラデーション */
.applyMovieList li span::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 18%; /* フェードの高さを調整 */
	pointer-events: none;
	background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
.applyMovieList li img{
	width: 100%;
	border-radius: 6px;
}
.applyMovieListTxtArea{
	translate: 0 -10px;
}
.applyMovieListTit{
	font-size: 1.4rem;
	font-weight: var(--ftBold);
	color: var(--colorPink);
	margin-bottom: 3px;
}
.applyMovieListTxt{
	font-size: 1.2rem;
	font-weight: 500;
}
/* TikTokを起動するボタン */
a.applyEffectBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 70px;
	font-size: 1.4rem;
	font-weight: var(--ftBold);
	color: #fff;
	margin-block: 10px 20px;
	border: 2px solid;
	border-color: var(--colorPBlue) var(--colorPink) var(--colorPink) var(--colorPBlue);
	border-radius: 10px;
	background: #000;
	cursor: pointer;
}
.applyEffectBtn span{
	position: relative;
	translate: 6%;
}
.applyEffectBtn span::before{
	content: url(../images/ico_effect.svg);
	position: absolute;
	top: 3px;
	left: -25px;
}
.applyEffectTxt{
	font-size: 1.2rem;
	font-weight: 500;
	text-align: justify;
	letter-spacing: .1em;
	line-height: 170%;
}
.tiktokTag{
	width: 100%;
	font-size: 1.7rem;
	font-weight: var(--ftBold);
	text-align: center;
	line-height: 170%;
	letter-spacing: .05em;
	padding: 15px 10px;
	margin-block: 20px 8px;
	border-radius: 5px;
	background: var(--colorGray);
}
/* ハッシュタグをコピー */
.copyBtn{
	position: relative;
	width: 148px;
	font-size: 1rem;
	font-weight: var(--ftBold);
	letter-spacing: .1em;
	padding: 3px 20px 5px;
	color: #fff;
	border: 2px solid;
	border-color: var(--colorRBlue) var(--colorPink) var(--colorPink) var(--colorRBlue);
	border-radius: 20px;
	background: #000;
	cursor: pointer;
	transition: all 0.3s;
}
.copyBtn span{
	position: relative;
	translate: -4px;
	display: block;
}
.copyBtn span::after{
	content: url(../images/ico_copy.svg);
	position: absolute;
	top: 3px;
	right: -12px;
}
.copyBtn:hover{
	text-decoration: none;
	opacity: 0.7;
}

/* 賞品
============================== */
#awardWrapper .ctsArea{
	padding-top: 43px;
}
.awardRead{
	font-size: 1.4rem;
	font-weight: var(--ftBold);
	text-align: center;
	line-height: 170%;
	letter-spacing: .1em;
	margin-bottom: 20px;
}
.prizeList img{
	width: 100%;
}
.prizeList > li:first-child{
	margin-bottom: 10px;
}
.prizeList > li:first-child::after{
	content: url();
}
.prizeList > li{
	position: relative;
	text-align: justify;
	color: #fff;
	border-radius: 12px;
	padding: 20px 20px 40px;
}
.prizeList > li:first-of-type{
	background: var(--colorBlue);
	z-index: 10;
}
/* ＋マーク */
.prizeList > li:first-of-type::after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: -29px;
	translate: -50%;
	display: block;
	width: 46px;
	aspect-ratio: 1 / 1;
	background: url(../images/ico_plus.png) no-repeat center center / cover;
	z-index: 100;
}
.prizeList > li:last-of-type{
	padding-top: 40px;
	background: var(--colorRed);
}
.prizeInnerList li{
	padding: 20px 0;
	border-bottom: 1px solid #fff;
}
.prizeInnerList li:first-of-type{
	padding: 0 0 20px;
}
.prizeInnerList li:last-of-type{
	padding-bottom: 0;
	border-bottom: none;
}
.prizeCopyArea{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 6px 6px 6px 10px;
	margin-bottom: 10px;
	border-radius: 30px;
	background: #000;
}
.prizeCopyArea .tiktokTag{
	width: auto;
	font-size: 1.2rem;
	padding: 0;
	margin-block: 0;
	background: none;
}
.prizeCopyArea .copyBtn{
	color: #000;
	background: #fff;
}
.prizeCopyArea .copyBtn span::after{
	content: url(../images/ico_copy_bk.svg);
	position: absolute;
	top: 2px;
	right: -12px;
}
.prizeTitArea{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.prizeTit{
	font-size: 1.6rem;
	font-weight: var(--ftBold);
	line-height: 150%;
}
.prizeTit span{
	font-size: 1.4rem;
	font-weight: 500;
}
.prizeTitArea img{
	width: auto;
}
.prizePeople span{
	font-size: 1.8rem;
}
.prizeTitCast{
	font-size: 2rem;
	font-weight: var(--ftBold);
	line-height: 170%;
	text-align: center;
	margin-bottom: 10px;
}
.prizeTxt{
	font-size: 1.2rem;
	font-weight: 500;
	text-align: justify;
	line-height: 210%;
	margin-block: 10px;
}
.prizeInnerList li:last-child .prizeTitArea{
	margin-bottom: 0;
}
.prizeInnerList li:last-child .prizeTxt{
	line-height: 160%;
	margin-top: 7px;
}
.prizeList li:last-of-type .prizeTxt span{
	display: block;
	font-size: 1rem;
	line-height: 190%;
	margin-top: 10px;
}
.prizeScheduleTit{
	font-size: 1.2rem;
	font-weight: var(--ftBold);
	margin-bottom: 4px;
}
.prizeSchedule{
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 170%;
	padding-left: 3em;
	text-indent: -3em;
	margin-bottom: 4px;
}
.prizeSchedule span{
	font-weight: var(--ftBold);
}
.prizeSchedule:last-of-type{
	margin-block: 10px 0;
}

/* 応募規約
============================== */
#termsWrapper .ctsArea{
	padding-block: 40px;
}
#termsWrapper .ctsArea .TikTokTitCmn{
	margin-bottom: 20px;
}
/* 続きを読む */
.readMore{
	position: relative;
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid #CCC;
	border-radius: 12px;
}
.readMoreContent{
	overflow: hidden;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 190%;
	height: 460px;
	overflow: scroll;
	padding-bottom: 50px;
}
.readMoreContent::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	content: "";
	/*以下お好み グラデーションの色と高さ 高さはreadMoreのheight以下にすること*/
	height: 70px;
	border-radius: 30px;
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 76%);
	background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 76%);
}
/* テキストリンク */
a.tiktokTextLink{
	color: var(--colorRed);
	border-bottom: 1px solid var(--colorRed);
}
.readMoreLabel{
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 220px;
	font-size: 1.2rem;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	margin: 0 auto;
	padding: 3px 12px 4px;
	border: 1px solid #CCC;
	border-radius: 30px;
	background: #fff;
	z-index: 2;
}
/* お問い合わせ
============================== */
#contactWrapper .ctsArea{
	border-radius: 0 0 10px 10px;
}
#contactWrapper .ctsArea .TikTokTitCmn{
	margin-bottom: 20px;
}
.tiktokMail{
	display: block;
	font-size: 1.2rem;
	font-weight: 500;
	text-align: center;
	padding: 13px 15px;
	margin-bottom: 40px;
	border-radius: 30px;
	background: var(--colorGray);
}
.tiktokMail span{
	position: relative;
	display: block;
	translate: 14px;
	padding-left: 5px;
}
.tiktokMail span::before{
	content: url(../images/ico_mail.svg);
	position: absolute;
	top: 2px;
	left: 20px;
}
.contactFooterImg{
	padding-inline: 20px;
}
.contactFooterImg img{
	width: 100%;
}

/* TikTokキャンペーンボタン
============================== */
.tiktokBtnArea{
	max-width: 390px;
	width: 100%;
	margin: 0 auto;        /* 常に画面中央 */
	position: relative;
}
#tiktokFixBtn{
	position: fixed;
	bottom: 10px;
	/* 画面中央に寄せた390pxカラムを基準に右下配置 */
	left: 50%;
	transform: translateX(-50%);
	width: 390px;         /* カラム幅 */
	max-width: 100%;
	display: block;
	text-align: end;
	padding-right: 10px;
	z-index: 999999999;
}
@media screen and (max-width:812px){
	#tiktokFixBtn img{
		width: auto;
	}
}
/*
	NISSEIは例えばどんなことやってるの？
-----------------------------------------------------------------------------------------------*/
#aboutWrapper{
	padding-top: 80px;
	background: url("../images/bg_aboutTop_black.svg") no-repeat top -1px center / contain;
	position: relative;
}

/* タイトル
============================== */
#aboutTitWrapper{
	position: relative;
	z-index: 10;
}
#aboutTitWrapper .tit{
	text-align: center;
}

/* コーン
============================== */
#coneWrapper{
	position: relative;
}
.coneArea .bg{
	width: 100%;
}
.coneArea [class^="img"]{
	width: 100%;
	position: absolute;
	top: -15%;
	left: 0;
}
.coneArea .img01,
.coneArea .img02{
	z-index: 2;
}
.coneArea .img02{
	z-index: 1;
}

/* フレーバー
============================== */
#flavorWrapper{
	margin-bottom: -100px;
	position: relative;
}
.flavorArea .bg{
	width: 100%;
}
.flavorArea [class^="img"]{
	width: 100%;
	margin-top: -30vh;
}

/* フリーザー
============================== */
#freezerWrapper{
	margin-bottom: 20vh;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
#freezerWrapper::after{
	content: "";
	width: 100%;
	height: 53px;
	background: url("../images/bg_freezerTop.svg") no-repeat top 1px center / contain;
	position: absolute;
	top: -52px;
	left: 0;
}
.freezerArea{
	padding-top: 40px;
}
.freezerArea .bg{
	width: 100%;
}
.freezerArea [class^="img"]{
	width: 100%;
	margin-top: -30vh;
}

/*
	プロフィール
-----------------------------------------------------------------------------------------------*/
#profileWrapper{
	margin-bottom: 60px;
}
.profileArea{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 30px;
}

/* タイトル周り
============================== */
.profileTitArea{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.profileTitArea .txt{
	text-align: center;
}

/* キャラクター
============================== */
.profileArea .img{
	width: 280px;
	margin: 0 auto;
}

/* テキスト周り
============================== */
.profileTxtArea{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.profileTxtArea .tit{
	font-size: 1.0rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
}
.profileTxtArea .tit span{
	font-size: 2.4rem;
	color: var(--colorBlue);
}

/* リスト
============================== */
.dlistprofileWrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}
.dlistprofile{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: calc((100% - 10px)/2);
	padding: 10px 15px;
	background-color: #FFF0DC;
	border-radius: 10px;
}
.dlistprofile dt{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 20px;
	font-size: 1.0rem;
	font-weight: 700;
	color: var(--colorBlue);
	background-color: #fff;
	border-radius: 10px;
}
.dlistprofile dd{
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--colorBlue);
	text-align: center;
}
.dlistprofile dd span{
	font-size: 1.0rem;
}

/*
	バナー
-----------------------------------------------------------------------------------------------*/
#bnrWrapper{
	padding-bottom: 100px;
	background-color: var(--colorLightGray);
}
.bnrArea{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding-top: 60px;
}

/* リスト
============================== */
.listBnr{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-inline: 20px;
}
.listBnr > li{
	border-radius: 10px;
	overflow: hidden;
	/* border: 1px solid #ddd; */
}
.listBnr > li img{
	display: block;
	width: 100%;
}


/*
	キャラクター
-----------------------------------------------------------------------------------------------*/
.character {
	position: fixed;
	bottom: 0; /* 常に0。画面外に隠すのは transform でやる */
	width: 70px;
	height: 160px;
	z-index: 100;
	pointer-events: none;

	/* 出入り・左右位置をまとめてアニメーション */
	transform: translateY(160px); /* 初期：画面下に隠す */
	transform-origin: center bottom;
	transition:
		transform 0.7s ease-out,
		left 0.7s ease-out,
		right 0.7s ease-out;
}

/* キャラ画像：ここだけ拡大させる */
.character img {
	width: 100%;
	height: auto;
	display: block;

	/* ひょっこり用のオフセット + 等倍 */
	transform: translateY(120px) scale(1);
	transform-origin: center bottom;
	transition: transform 0.7s ease-out;
}

/* 初期位置（左右） */
#nikkun {
	left: calc(50% - 390px/2 + 30px);
}
#seichan {
	right: calc(50% - 390px/2 + 30px);
}

/* visibleクラスで「ひょっこり」表示 */
.character.visible img {
	transform: translateY(-120px) scale(1); /* ひょっこり */
}

/* ふきだし */
.character .speech {
	display: block;
	width: 312px;
	position: absolute;
	bottom: calc(100% + 110px);
	opacity: 0;
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	transform: none; /* キャラのscaleの影響を受けないように */
}
.character.visible .speech {
	opacity: 1;
}
#nikkun .speech {
	left: 0;
}
#seichan .speech {
	right: 0;
}

/* 着地したら吹き出しをフェードアウト（大きさはそのまま） */
.character.visible.landed .speech {
	opacity: 0;
	transform: translateY(10px);
}

/* SVGのスケーリング（scaleしない） */
.character .speech svg {
	width: 100%;
	height: auto;
	display: block;
	transform: none;
}

/* プリント用 */
.printImg{
	display: none;
}

/* 着地エリア
============================== */
/* プロフィール着地エリア */
.profileCharactersTarget {
	position: relative;
	width: 100%;
	height: 260px;
	margin: 0 auto;
}

/* 着地状態（ここでimgだけ拡大＆左右位置調整） */
.character.landed {
	transform: none;
	z-index: 50;
	pointer-events: none;
}

/* 着地時：imgだけ拡大してフラットな位置に */
.character.visible.landed img {
	transform: translateY(0) scale(1.6);
}

/* 着地時の左右位置を +100px シフト */
#nikkun.landed {
	left: calc(50% - 390px/2 + 100px);
}
#seichan.landed {
	right: calc(50% - 390px/2 + 100px);
}

/* 着地時も吹き出しはscaleしない */
.character.landed .speech,
.character.landed .speech svg {
	transform: none;
}


/*
	CTA
-----------------------------------------------------------------------------------------------*/
.ctaWrapper{
	padding-bottom: 40px;
	background-color: var(--colorRed);
	position: relative;
	z-index: 20;
}
.ctaArea{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.ctaArea .img{
	display: block;
	width: 150px;
	margin-top: -50px;
}
.ctaArea .txt{
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
	line-height: 2.0;
}


/*
	footer
-----------------------------------------------------------------------------------------------*/
#footerWrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
}
.copyright{
	font-size: 1.1rem;
}


/*
	ページトップ
-----------------------------------------------------------------------------------------------*/
a#pageTop{
	width: 60px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: url("../images/ico_arrow_top.svg") var(--colorBlue) no-repeat center center / 36%;
	position: fixed;
	right: 20px;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
}
a#pageTop.active{
	opacity: 1;
	visibility: visible;
}


@media screen and (max-width:812px){
	/*
		Setting CSS
	-----------------------------------------------------------------------------------------------*/
	body{
		-webkit-text-size-adjust: 100%;
	}
	img{
		width:100%;
	}
	p{
		line-height: 1.5;
	}


	/*
		common
	-----------------------------------------------------------------------------------------------*/
	/* spArea
	============================== */
	#spArea{
		width: 100%;
		box-shadow: none;
	}

	/*
		cm
	-----------------------------------------------------------------------------------------------*/
	/* modal
	============================== */
	.modalArea{
		padding: 30px;
		border-radius: 10px;
	}
	/* クローズボタン */
	.modalClose {
		width: 40px;
		top: -10px;
		right: -10px;
	}
	.modalClose::before,
	.modalClose::after{
		height: 16px;
	}

	/*
		ページトップ
	-----------------------------------------------------------------------------------------------*/
	a#pageTop{
		display: block;
		width: 100%;
		height: 50px;
		aspect-ratio: unset;
		border-radius: 0;
		background: url("../images/ico_arrow_top.svg") var(--colorBlue) no-repeat center center / 30px auto;
		opacity: 1;
		visibility: visible;
	}
}