@charset "utf-8";
/* CSS関数設定 */
:root {
	/* カラーパレット */
	--WHITE: #FFFFFF;

	--DARK01: #000000;
	--DARK02: #292929;

	--PICK01: #F431C6;
	--PICK02: #F464E0;
	--PICK03: #F9E1EB;
	--PICK04: #F792C0;
	--PICK05: #F3D7E7;
	--PICK06: #fc9fc5;

	--BEIGE01: #F9DDC0;
	--BEIGE02: #E9AA98;

	--YELLOW01: #CDED6B;
	--YELLOW02: #f4e57c;

	--GREEN01: #92f497;

	--BROWN01: #89633d;

	/* テキストカラー */
	--TXT_COLOR_BASE: var(--DARK01);

	/* ベース文字間隔 */
	--LETTER_SPACING: 0.1em;

	/* フォント */
	--FF_BASE: "小塚ゴシック Pr6N", sans-serif;
	--FF_CJK: "Noto Sans CJK JP", sans-serif;
	--FF_JOSE: "Josefin Sans", sans-serif;
	--FF_TORNAC: "Tornac", serif;
	--FF_UDD: "URW Classico W01 Black", serif;

	/* フォントウェイト */
	--FF_WEIGHT_BASE: 500;
	
	/* アニメーション */
	--ANIME_FADEIN: fadeIn .5s ease-in-out 0s forwards;
	--ANIME_FADEOUT: fadeOut .5s ease-in-out 0s forwards;

	/* フォトサイズ */
	--FZ_9: clamp(8px, 0.8vw, 9px);
	--FZ_10: clamp(8px, 0.8vw, 10px);
	--FZ_11: clamp(10px, 1.1vw, 11px);
	--FZ_12: clamp(10px, 1.1vw, 12px);
	--FZ_13: clamp(11px, 1vw, 13px);
	--FZ_14: clamp(12px, 1.2vw, 14px);
	--FZ_15: clamp(13px, 1.4vw, 15px);
	--FZ_16: clamp(14px, 1.5vw, 16px);
	--FZ_18: clamp(15px, 1.6vw, 18px);
	--FZ_20: clamp(16px, 1.8vw, 20px);
	--FZ_22: clamp(18px, 2vw, 22px);
	--FZ_25: clamp(20px, 2vw, 25px);
	--FZ_28: clamp(22px, 2.5vw, 28px);
	--FZ_30: clamp(25px, 3vw, 30px);
	--FZ_35: clamp(25px, 3vw, 35px);
	--FZ_38: clamp(30px, 3.5vw, 38px);
	--FZ_40: clamp(30px, 3.5vw, 40px);
	--FZ_43: clamp(30px, 4vw, 43px);
	--FZ_50: clamp(30px, 4vw, 50px);
	--FZ_60: clamp(40px, 5vw, 60px);
	--FZ_70: clamp(50px, 6vw, 70px);
	--FZ_10_CONST: 10px;
	--FZ_12_CONST: 12px;
	--FZ_14_CONST: 14px;
	--FZ_15_CONST: 15px;
	--FZ_16_CONST: 16px;
	--FZ_18_CONST: 18px;
	--FZ_20_CONST: 20px;

	/* ブロック間 */
	--GAP_10: clamp( 5px, 1.1vw, 10px);
	--GAP_15: clamp( 10px, 1.2vw, 15px);
	--GAP_20: clamp( 15px, 1.7vw, 20px);
	--GAP_25: clamp( 15px, 1.7vw, 25px);
	--GAP_35: clamp( 20px, 2.5vw, 35px);
	--GAP_30: clamp( 20px, 2.5vw, 30px);
	--GAP_40: clamp( 30px, 3.5vw, 40px);
	--GAP_50: clamp( 30px, 3.5vw, 50px);
	--GAP_60: clamp( 40px, 4.5vw, 60px);
	--GAP_65: clamp( 50px, 5.5vw, 65px);
	--GAP_75: clamp( 60px, 6.5vw, 75px);
	--GAP_80: clamp( 50px, 5.5vw, 80px);
	--GAP_90: clamp( 60px, 6.5vw, 90px);
	--GAP_100: clamp( 70px, 7.5vw, 100px);
	--GAP_5_CONST: 5px;
	--GAP_10_CONST: 10px;
	--GAP_15_CONST: 15px;
	--GAP_20_CONST: 20px;
	--GAP_30_CONST: 30px;
	--GAP_40_CONST: 40px;

	/* PCマックス幅 */
	--PC_MAX_WIDTH: var(--PC_MAX_WIDTH_M);
	--PC_MAX_WIDTH_SS: 800px;
	--PC_MAX_WIDTH_S: 1000px;
	--PC_MAX_WIDTH_M: 800px;
	--PC_MAX_WIDTH_L: 1440px;

	/* 親要素を超えて幅100% */
	--FULL_WIDTH: calc(50% - 50vw);

	/* セクション間隔半分 */
	--GENERALSEC_HALF: calc(var(--GENERALSEC) / 2);
}

@media screen and (min-width: 601px){
	:root{
		--INNER_WIDTH: 95%;
		--GENERALSEC: clamp(70px, 8vw, 100px);
	}
}
@media screen and (max-width: 600px){
	:root{
	--INNER_WIDTH: 87.201%;
	--GENERALSEC: 50px;
	}
}
/* フェードインアニメーション */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* リセットCSS */
*{margin:0;padding:0;min-height: 0;min-width: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {height:100%;scroll-behavior: smooth;}
ul li ,ol li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight: var(--FF_WEIGHT_BASE);font-size: 100%;margin: 0;}
p,section{margin: 0;}
strong{font-weight: inherit;}
a:focus, *:focus{ outline:none; }
article, header, footer, aside, figure, figcaption, nav, section,main{ 
  display:block;
}
body{
	font-family: var(--FF_BASE);
	font-weight: var(--FF_WEIGHT_BASE);
	font-feature-settings: "palt" 1;
	letter-spacing: var(--LETTER_SPACING);
	width:100%;
	color: var(--TXT_COLOR_BASE);
	position:relative;
	z-index: 0;
	overflow-x: clip;
}
a{
	text-decoration: none;
	outline: none;
	word-wrap: break-word;
	color: var(--TXT_COLOR_BASE);
}
a img,a{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s;
}
img{
	height: auto;
	max-width: 100%;
	box-sizing: unset;
	vertical-align: bottom;
}
@media screen and (min-width: 601px){
	h1, h2, h3, h4, h5,p,span,div.ul,li{
		line-height: 1.7;
	}
}
@media screen and (max-width: 600px){
	h1, h2, h3, h4, h5,p,span,div.ul,li{
		line-height: 1.6;
	}
}
/* imgリセット */
.imgauto{
	height: auto;
	width: 100%;
	box-sizing: unset;
	line-height: 1rem;
	display: block;
}
/* セクション間隔*/
.g-mgt{
	margin-top: var(--GENERALSEC);
}
.g-mgb{
	margin-bottom: var(--GENERALSEC);
}
.g-pd{
	padding-block: var(--GENERALSEC);
}
.g-pdt{
	padding-top: var(--GENERALSEC);
}
.g-pdb{
	padding-bottom: var(--GENERALSEC);
}
.g-mgt--half{
	margin-top: var(--GENERALSEC_HALF);
}
.g-mgb--half{
	margin-bottom: var(--GENERALSEC_HALF);
}
.g-pd--half{
	padding-block: var(--GENERALSEC_HALF);
}
.g-pdt--half{
	padding-top: var(--GENERALSEC_HALF);
}
.g-pdb--half{
	padding-bottom: var(--GENERALSEC_HALF);
}
/* スライダー読み込みまで非表示 */
.slick{
	opacity: 0;
	transition: opacity .3s linear;
}
.slick.slick-initialized{
	opacity: 1;
}
.swiper{
	overflow: hidden;
  opacity: 0;
	transition: opacity .3s linear;
}
.swiper.swiper-initialized{
	opacity: 1;
}
/* 縦書き */
.tategaki{
	writing-mode: vertical-rl;
}
/* 文字間 */
a{
	letter-spacing: var(--LETTER_SPACING);
}
/* 親要素超えて幅100% */
.widthOverParent{
	width: 100vw;
	--OYA: calc(50% - 50vw);;
	margin-left: var(--OYA);
	margin-right: var(--OYA);
}
@media (hover: hover){
	a:hover{
		opacity: 0.7;
		text-decoration: none;
	}
	a:hover img{
		opacity:0.75;
	}
}
html.no-smooth-scroll {
	scroll-behavior: auto;
}
.g-inner,
.g-inner--l,
.g-inner--m,
.g-inner--s,
.g-inner--ss{
	width: var(--INNER_WIDTH);
	margin-inline: auto;
}
@media screen and (min-width: 601px){
	html{
		scroll-padding-top: 120px;
	}
	body{
		font-size: var(--FZ_15_CONST);
		line-height: 1.7;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
	.g-inner--pc{
		width: var(--INNER_WIDTH);
		margin-inline: auto;
	}
	.g-inner,
	.g-inner--m,
	.g-inner--pc{
		max-width: var(--PC_MAX_WIDTH_M);
	}
	.g-inner--l{
		max-width: var(--PC_MAX_WIDTH_L);
	}
	.g-inner--s{
		max-width: var(--PC_MAX_WIDTH_S);
	}
	.g-inner--ss{
		max-width: var(--PC_MAX_WIDTH_SS);
	}
	.g-inner--pcHasSlickGap{
		--INNER_ADJUST: calc(var(--SLICK_GAP) * 2);
    width: calc(var(--INNER_WIDTH) + var(--INNER_ADJUST));
    max-width: calc(var(--PC_MAX_WIDTH_M) + var(--INNER_ADJUST));
		margin-inline: auto;
	}
	.g-pd--halfPcOnly{
		padding-block: var(--GENERALSEC_HALF);
	}
	.sp{
		display: none !important;
	}
	.tategaki--pc{
		writing-mode: vertical-rl;
	}
	/* pc順番付与 */
	.orderPc-1st { order: 1; }
	.orderPc-2nd { order: 2; }
	.orderPc-3rd { order: 3; }
	.orderPc-4th { order: 4; }
	.orderPc-5th { order: 5; }
	.orderPc-6th { order: 6; }
	.orderPc-7th { order: 7; }
	.orderPc-8th { order: 8; }
	.orderPc-9th { order: 9; }
	.orderPc-10th { order: 10; }
	.orderPc-11th { order: 11; }
	.orderPc-12th { order: 12; }
	.orderPc-13th { order: 13; }
	.orderPc-14th { order: 14; }
	.orderPc-15th { order: 15; }
	.orderPc-16th { order: 16; }
	.orderPc-17th { order: 17; }
	.orderPc-18th { order: 18; }
	.orderPc-19th { order: 19; }
	.orderPc-20th { order: 20; }
	.orderPc-21th { order: 21; }
	.orderPc-22th { order: 22; }
	.orderPc-23th { order: 23; }
	.orderPc-24th { order: 24; }
	.orderPc-25th { order: 25; }
	.orderPc-26th { order: 26; }
	.orderPc-27th { order: 27; }
	.orderPc-28th { order: 28; }
	.orderPc-29th { order: 29; }
	.orderPc-30th { order: 30; }
	.orderPc-31th { order: 31; }
	.orderPc-32th { order: 32; }
	.orderPc-33th { order: 33; }
	.orderPc-34th { order: 34; }
	.orderPc-35th { order: 35; }
	.orderPc-36th { order: 36; }
	.orderPc-37th { order: 37; }
	.orderPc-38th { order: 38; }
	.orderPc-39th { order: 39; }
	.orderPc-40th { order: 40; }
}
@media screen and (max-width: 600px){
	html{
		scroll-padding-top: 50px;
	}
	body{
		font-size: var(--FZ_14_CONST);
		line-height: 1.6;
	}
	.g-inner--sp{
		width: var(--INNER_WIDTH);
		margin-inline: auto;
	}
	.g-pd--halfPcOnly{
		padding-block: var(--GENERALSEC);
	}
	.pc{
		display: none !important;
	}
	.sp-scroll--y{
		overflow-y: scroll;
		overflow-x: auto;
	}
	.sp-scroll--x{
		overflow-x: scroll;
		overflow-y: auto;
		padding-inline: calc((100% - var(--INNER_WIDTH)) / 2);
	}
	.tategaki--sp{
		writing-mode: vertical-rl;
	}
}

/* 初夏ノウズブランドページ */
/* リセットcss */
.fs-l-main{
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.fs-l-pageMain{
	margin: 0 !important;
}

/* 共通 */
.sunWrap{
	max-width: 600px;
	margin-inline: auto;
	overflow: hidden;
	position: relative;
	background: var(--WHITE);
}
@media screen and (min-width: 600px){
	.fs-body-custom::before{
		content: "";
		display: inline-block;
		background: url(../images/pc-bg.svg) no-repeat center center / cover;
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: -3;
	}
}


/* -------FV-------- */
.sunFV{
	position: relative;
	z-index: 2;
}
.sunFV__body{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
	letter-spacing: 0em;
}
h1.sunFV__top{
	font-family: var(--FF_JOSE);
	font-weight: bold;
	color: var(--PICK01);
	letter-spacing: 0em;
}
.sunFV__mid{
	font-family: var(--FF_CJK);
	color: var(--PICK02);
	font-weight: 400;
}
.sunFV__under{
	font-family: var(--FF_JOSE);
	font-weight: bold;
	color: var(--YELLOW01);
}
@media screen and (min-width: 601px){
	.sunFV__body{
		top: 10%;
	}
	.sunFV__body > *{
		line-height: 1.2;
	}
	.sunFV__top{
		font-size: 43px;
	}
	.sunFV__mid{
		font-size: 16px;
	}
	.sunFV__under{
		font-size: 35px;
	}
}
@media screen and (max-width: 600px){
	.sunFV__body{
		top: 10%;
	}
	.sunFV__body > *{
		line-height: 1.2;
	}
	.sunFV__top{
		font-size: 33px;
	}
	.sunFV__mid{
		font-size: 12px;
	}
	.sunFV__under{
		font-size: 25px;
	}
}

/* -------lineup------------- */
/* top */
.sunLineup{
	background: var(--PICK03);
	position: relative;
}
.sunLineup::before{
	content: "";
	display: inline-block;
	background: url(../images/sunLineup-deco.svg) no-repeat center center / 100%;
	aspect-ratio: 29/30;
	position: absolute;
}
.sunLineup__lead{
	text-align: center;
	margin-bottom: 50px;
	position: relative;
	z-index: 2;
	line-height: 2.5;
	font-weight: 500;
	letter-spacing: 0.05em;
}
@media screen and (min-width: 601px){
	.sunLineup{
		padding-block: 50px 220px;
	}
	.sunLineup::before{
		width: 280px;
		top: -50px;
		right: -40px;
	}
	.sunLineup__lead{
		font-size: 14px;
	}
}
@media screen and (max-width: 600px){
	.sunLineup::before{
		width: 180px;
		top: -50px;
		right: -40px;
	}
	.sunLineup__lead{
		font-size: 10.5px;
	}
}
@media screen and (min-width: 0px) and (max-width: 490px){
	.sunLineup{
		padding-block: 50px 150px;
	}
}
@media screen and (min-width: 491px) and (max-width: 600px){
	.sunLineup{
		padding-block: 50px 250px;
	}
}

/* middle */
h2.sunLineupFlower__hd{
	color: var(--PICK04);
	font-family: var(--FF_TORNAC);
	line-height: 1.2;
	font-weight: 400 !important;
}
.sunLineupFlower__pic{
	position: relative;
	width: 80%;
}
.sunLineupFlower__box{
	display: block;
}
.sunLineupFlower__pic img{
	border-radius: 10px;
	position: relative;
	z-index: 2;
}
.sunLineupFlower__pic::before,.sunLineupFlower__pic::after{
	content: "";
	display: inline-block;
	background: url(../images/sunLineupFlower-line-left.svg) no-repeat center center / 100%;
	aspect-ratio: 124/75;
	position: absolute;
}

.g-sunProduct--sunLineupFlower{
	position: absolute;
	right: 5%;
  bottom: 20%;
	z-index: 3;
}
.g-sunProduct{
	text-align: left;
	letter-spacing: 0em;
}
.g-sunProduct__name{
	padding-right: 5px;
	font-weight: 500;
}
.g-sunProduct__pirce{
	padding-right: 5px;
}
a.g-sunProduct__buy{
	border-radius: 50px;
	color: var(--WHITE);
	padding-inline: 10px;
	padding-block: 3px;
	letter-spacing: 0em;
}
a.g-sunProduct__buy--pink{
	background: var(--PICK04);
}

.sunLineupFlower__deco{
	position: absolute;
	display: inline-block;
	background: url(../images/sunLineupFlower__deco.svg) no-repeat center center / 100%;
	aspect-ratio: 29/30;
	z-index: 3;
}

/* 回転アニメーション */
.sunLineupFlower__deco {
  transform-origin: center center;
  animation: rotate360 10s linear infinite;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 601px){
	.sunLineupFlower{
		margin-bottom: 60px;
		padding-left: 30px;
	}
	.sunLineupFlower__hd{
		font-size: 45px;
	}
	.sunLineupFlower__pic::before{
		top: 75%;
		left: -30px;
		width: 85%;
	}
	.sunLineupFlower__pic::after{
		top: -30%;
		left: 75%;
		width: 85%;
	}

	.g-sunProduct__name{
		font-size: 17px;
	}
	.g-sunProduct__pirce{
		font-size: 17px;
	}
	.g-sunProduct__buy{
		font-size: 15px;
	}

	.sunLineupFlower__deco__left{
		width: 20%;
		left: 15%;
		bottom: -45%;
	}
	.sunLineupFlower__deco__rgt{
		width: 25%;
		right: -19%;
		bottom: -10%;
	}
}
@media (hover: hover){
	a.sunLineupFlower__box:hover{
		opacity: 1;
	}
	a.sunLineupFlower__box:hover img{
		opacity: 1;
	}
}
@media screen and (max-width: 600px){
	.sunLineupFlower{
		margin-bottom: 40px;
		padding-left: 20px;
	}
	.sunLineupFlower__hd{
		font-size: 30px;
	}
	.sunLineupFlower__pic::before{
		top: 75%;
		left: -20px;
		width: 85%;
	}
	.sunLineupFlower__pic::after{
		top: -30%;
		left: 75%;
		width: 85%;
	}

	.g-sunProduct__name{
		font-size: 12px;
	}
	.g-sunProduct__pirce{
		font-size: 12px;
	}
	.g-sunProduct__buy{
		font-size: 10px;
	}

	.sunLineupFlower__deco__left{
		width: 20%;
		left: 15%;
		bottom: -45%;
	}
	.sunLineupFlower__deco__rgt{
		width: 25%;
		right: -19%;
		bottom: -10%;
	}
}

/* bottom */
.sunLineupPics{
	display: flex;
	gap: 20px;
}
.sunLineupPics li{
	flex: 1;
}
.sunLineupPics li img{
	border-radius: 15px;
}
.sunLineupPics li:nth-of-type(1){
	margin-top: 160px;
	margin-left: -15px;
}
.sunLineupPics li:nth-of-type(2){
	margin-top: 80px;
}
.sunLineupPics li:nth-of-type(3){
	margin-right: -15px;
}
@media screen and (min-width: 601px){
	.sunLineupPics li:nth-of-type(1){
		margin-top: 200px;
		margin-left: -25px;
	}
	.sunLineupPics li:nth-of-type(2){
		margin-top: 100px;
	}
	.sunLineupPics li:nth-of-type(3){
		margin-right: -25px;
	}
}
@media screen and (max-width: 600px){
	.sunLineupPics li:nth-of-type(1){
		margin-top: 160px;
		margin-left: -15px;
	}
	.sunLineupPics li:nth-of-type(2){
		margin-top: 80px;
	}
	.sunLineupPics li:nth-of-type(3){
		margin-right: -15px;
	}
}

/* -----Cookie Shops-------- */
.sunShops{
	position: relative;
	background: var(--BEIGE01);
}
@media screen and (min-width: 601px){
	.sunShops{
		padding-block: 300px 50px;
	}
}
@media screen and (max-width: 600px){
	.sunShops{
		padding-block: 200px 50px;
	}
}
/*写真 */
.sunShops::before{
	content: "";
	display: inline-block;
	background: url(../images/sunShops-deco.svg) no-repeat center center / 100%;
	aspect-ratio: 24/25;
	width: 140%;
	position: absolute;
	left: 0;
}
@media screen and (min-width: 601px){
	.sunShops::before{
		top: -405px;
	}
}
@media screen and (max-width: 600px){
	.sunShops::before{
		top: 0px;
		transform: translateY(-47%);
	}
}
/* 文字R,A,N */
.sunShopsR,.sunShopsA,.sunShopsH{
	position: absolute;
	z-index: 2;
}
.sunShopsR{
	aspect-ratio: 13/15;
}
.sunShopsA{
	aspect-ratio: 11/15;
}
.sunShopsH{
	aspect-ratio: 59/75;
}
@media screen and (min-width: 601px){
	.sunShopsR{
		width: 55px;
		left: 25px;
		top: 120px;
	}
	.sunShopsA{
		width: 45px;
		left: 95px;
		top: 190px;
	}
	.sunShopsH{
		width: 45px;
		left: 155px;
		top: 130px;
	}
}
@media screen and (max-width: 600px){
	.sunShopsR{
		width: 45px;
		left: 15px;
		top: 8%;
	}
	.sunShopsA{
		width: 35px;
		left: 65px;
		top: 15%;
	}
	.sunShopsH{
		width: 35px;
		left: 105px;
		top: 9%;
	}
}
/* 写真top */
.sunShopsTopPic{
	width: 75%;
	margin-bottom: 20px;
}
.sunShopsMid__body{
	width: fit-content;
}
.sunShopsMid__pic{
	width: 45%;
}
.sunShopsMid__pic__text{
	font-family: var(--FF_UDD);
	letter-spacing: 0em;
	color: var(--BROWN01);
}


@media screen and (min-width: 601px){
	.sunShopsTopPic{
		padding-left: 40px;
	}
}
@media screen and (max-width: 600px){
	.sunShopsTopPic{
		padding-left: 30px;
	}
}

/* middle */
.sunShopsMid{
	display: flex;
	justify-content: space-between;
}
.sunShopsMid__deco{
	aspect-ratio: 33/25;
}
.g-sunProduct__buy--beige{
	background: var(--BEIGE02);
}
@media screen and (min-width: 601px){
	.sunShopsMid{
		padding-inline: 30px 10px;
	}
	.sunShopsMid__deco{
		width: 150px;
		margin-bottom: 15px;
	}
	.g-sunProduct--sunShops{
		margin-left: 25px;
	}
}
@media screen and (max-width: 600px){
	.sunShopsMid{
		padding-inline: 20px 10px;
	}
	.sunShopsMid__deco{
		width: 90px;
		margin-bottom: 15px;
	}
	.g-sunProduct--sunShops{
		margin-left: 25px;
	}
}

/* bottom */
.sunShopsBtmPic{
	padding-left: 10px;
	width: 75%;
}
.sunShopsN{
	position: absolute;
	aspect-ratio: 64/75;
}
.sunShopsS{
	position: absolute;
	aspect-ratio: 61/150;
}
@media screen and (min-width: 601px){
	.sunShopsN{
		width: 50px;
		bottom: 60px;
		right: 75px;
	}
	.sunShopsS{
		width: 40px;
		bottom: 40px;
		right: 28px;
	}
}
@media screen and (max-width: 600px){
	.sunShopsN{
		width: 40px;
		bottom: 60px;
		right: 45px;
	}
	.sunShopsS{
		width: 30px;
		bottom: 50px;
		right: 10px;
	}
}

/* ----------  Drawing Design -------------- */
.sunDraw{
	padding-block: 40px;
}
@media screen and (min-width: 601px){
	.sunDraw{
		padding-inline: 30px;
	}
}
@media screen and (max-width: 600px){
	.sunDraw{
		padding-inline: 20px;
	}
}
/* 見出し */
.sunDrawHd{
	margin-inline: auto;
}
@media screen and (min-width: 601px){
	.sunDrawHd{
		width: 75%;
		margin-bottom: 45px;
	}
}
@media screen and (max-width: 600px){
	.sunDrawHd{
		width: 75%;
		margin-bottom: 35px;
	}
}
/* コンテンツ */
.sunDrawWrap{
	margin-top: 10px;
	padding: 40px 15px 20px;
	background: url(../images/sunDrawWrap__bg.jpg) no-repeat center center / cover;
	position: relative;
}
.sunDrawCon{
	position: relative;
}
.sunDrawCon li{
	position: absolute;
}
.sunDrawCon > li:nth-of-type(3) img{
	margin-bottom: 10px;
}
.g-sunProduct--sunDraw{
	margin-left: auto;
}
.sunDrawCon li:nth-of-type(3) > a{
	display: block;
	position: relative;
}
.sunDrawCon li:nth-of-type(3) > a::before{
	content: "";
	display: inline-block;
	background: url(../images/sunDrawCon-pic3-deco.png) no-repeat center center / 100%;
	aspect-ratio: 218/247;
	position: absolute;
	animation: rotate 1s steps(2) infinite;
}
@media screen and (min-width: 601px){
	.sunDraw{
		background: var(--WHITE);
	}
	.sunDrawCon{
		height: 770px;
	}
	.sunDrawCon > li:nth-of-type(1){
		width: 48%;
		top: 0;
		left: 0;
	}
	.sunDrawCon > li:nth-of-type(2){
		width: 80%;
		top: 40px;
		right: -70px;
	}
	.sunDrawCon > li:nth-of-type(3){
		width: 55%;
		bottom: 0;
		left: 0;
		z-index: 3;
	}
	.sunDrawCon > li:nth-of-type(4){
		width: 57%;
		bottom: 30px;
		right: -15px;
		z-index: 2;
	}

	.sunDrawCon li:nth-of-type(3) > a::before{
		width: 50px;
		top: 85px;
		left: 30px;
	}
}
@media screen and (max-width: 600px){
	.sunDraw{
		width: 375px;
		margin-inline: auto;
	}
	.sunDrawCon{
		height: 480px;
	}
	.sunDrawCon > li:nth-of-type(1){
		width: 50%;
		top: 0;
		left: 0;
	}
	.sunDrawCon > li:nth-of-type(2){
		width: 80%;
		top: 25px;
		right: -50px;
	}
	.sunDrawCon > li:nth-of-type(3){
		width: 55%;
		bottom: 0;
		left: 0;
		z-index: 3;
	}
	.sunDrawCon > li:nth-of-type(4){
		width: 57%;
		bottom: 30px;
		right: -15px;
		z-index: 2;
	}

	.sunDrawCon li:nth-of-type(3) >  a::before{
		width: 40px;
		top: 45px;
		left: 16px;
	}
}
/* 飾り */
.sunDrawWIce,.sunDrawWfork,.sunDrawWFish,.sunDrawWNizi,.sunDrawWLeef,.sunDrawWHeart{
	position: absolute;
	background: no-repeat center center / 100%;
}
.sunDrawWIce{
	aspect-ratio: 17/16;
}
.sunDrawWfork{
	aspect-ratio: 11/13;
}
.sunDrawWFish{
	aspect-ratio: 557/366;
}
.sunDrawWNizi{
	aspect-ratio: 281/234;
}
.sunDrawWLeef{
	aspect-ratio: 257/272;
}
.sunDrawWHeart{
	aspect-ratio: 310/332;
}
.sunDrawCon::before{
	content: "";
	display: inline-block;
	background: url(../images/sunDrawCon-star.png) no-repeat center center / 100%;
	aspect-ratio: 281/271;
	position: absolute;
	z-index: 5;
}
@media screen and (min-width: 601px){
	.sunDrawCon::before{
		width: 75px;
		top: 315px;
		right: -10px;
	}
	.sunDrawWIce{
		width: 85px;
		top: 30px;
		left: -32px;
	}
	.sunDrawWfork{
		width: 55px;
		top: -5px;
		left: 24px;
	}
	.sunDrawWFish{
		width: 140px;
		top: -50px;
		right: 0;
	}
	.sunDrawWNizi{
		width: 70px;
		top: -75px;
		right: 100px;
	}
	.sunDrawWLeef{
		width: 65px;
		left: -40px;
		bottom: 60px;
	}
	.sunDrawWHeart{
		width: 80px;
		left: 20px;
		bottom: 55px;
		z-index: 4;
	}
}
@media screen and (max-width: 600px){
	.sunDrawCon::before{
		width: 55px;
		top: 185px;
		right: -20px;
	}
	.sunDrawWIce{
		width: 55px;
		top: 10px;
		left: -20px;
	}
	.sunDrawWfork{
		width: 35px;
		top: -5px;
		left: 24px;
	}
	.sunDrawWFish{
		width: 100px;
		top: -40px;
		right: 0;
	}
	.sunDrawWNizi{
		width: 60px;
		top: -65px;
		right: 70px;
	}
	.sunDrawWLeef{
		width: 50px;
		left: -25px;
		bottom: 50px;
	}
	.sunDrawWHeart{
		width: 60px;
		left: 18px;
		bottom: 45px;
		z-index: 4;
	}
}

/* --------OnePiece------ */
.sunOnePiece{
	position: relative;
}
.g-sunProduct--sunOnePiece{
	position: absolute;
}
@media screen and (min-width: 601px){
	.g-sunProduct--sunOnePiece{
		left: 30px;
		bottom: 45px;
	}
}
@media screen and (max-width: 600px){
	.g-sunProduct--sunOnePiece{
		left: 20px;
		bottom: 30px;
	}
}

/* リボン */
.sunOnePiecePic a{
	display: block;
	position: relative;
}
.sunOnePiecePic__deco{
	display: inline-block;
	background: no-repeat center center / 100%;
	position: absolute;
}
.sunOnePiecePic__deco1{
	aspect-ratio: 373/344;
}
.sunOnePiecePic__deco2{
	aspect-ratio: 158/145;
}
.sunOnePiecePic__deco3{
	aspect-ratio: 191/188;
}
@media screen and (min-width: 601px){
	.sunOnePiecePic__deco1{
		width: 100px;
		top: 35px;
		left: 40px;
	}
	.sunOnePiecePic__deco2{
		width: 90px;
		top: 120px;
		left: 130px;
	}
	.sunOnePiecePic__deco3{
		width: 90px;
		top: 200px;
		left: 50px;
	}
}
@media screen and (max-width: 600px){
	.sunOnePiecePic__deco1{
		width: 75px;
		top: 15px;
		left: 20px;
	}
	.sunOnePiecePic__deco2{
		width: 65px;
		top: 75px;
		left: 80px;
	}
	.sunOnePiecePic__deco3{
		width: 65px;
		top: 125px;
		left: 30px;
	}
}

/* リボンアニメーション */
.sunOnePiecePic__deco {
  opacity: 0;
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}

/* 遅延をずらして順番に落ちるように */
.sunOnePiecePic__deco1 {
  transition-delay: 0.2s;
}
.sunOnePiecePic__deco2 {
  transition-delay: 0.4s;
}
.sunOnePiecePic__deco3 {
  transition-delay: 0.6s;
}

/* --- in-view（ビューポート内）になったら --- */
.sunOnePiece.in-view .sunOnePiecePic__deco {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (min-width: 601px){
	.sunOnePiecePic__deco{
		transform: translateY(-150px);
	}
}
@media screen and (max-width: 600px){
	.sunOnePiecePic__deco{
		transform: translateY(-100px);
	}
}


/* nous */
.sunNouss{
	display: grid;
	grid-template-columns: 406fr 685fr;
	background: var(--WHITE);
}
.sunNouss__body{
	background: rgba(243, 215, 231, .31);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sunNouss__text{
	width: 70%;
}

/* --------- Ice cream---------- */
.sunIce{
	background: var(--WHITE);
}
.sunIceWrap{
	padding-block: 25px;
	background: rgba(255, 215,195,.11);
	display: flex;
	letter-spacing: 0em;
}
.sunIce__body{
	flex: 424;
}
.sunIce__pic{
	flex: 643;
}
.sunIce__hd{
	font-family: var(--FF_TORNAC);
	color: var(--GREEN01);
	white-space: nowrap;
	font-weight: 400 !important;
}
.sunIce__top{
	font-family: var(--FF_UDD);
	font-weight: bold;
	position: relative;
	color: var(--YELLOW02);
}
.sunIce__top::before{
	content: "";
	display: inline-block;
	background: url(../images/sunIce-arrow.svg) no-repeat center center / 100%;
	aspect-ratio: 100/17;
	position: absolute;
}
.sunIce__mid{
	font-family: var(--FF_UDD);
	font-weight: bold;
	color: var(--PICK06);
}
.sunIce__leftPic{
	width: 70%;
}
@media screen and (min-width: 601px){
	.sunIceWrap{
		padding-left: 30px;
	}

	.sunIce__hd{
		font-size: 45px;
		margin-bottom: 10px;
		line-height: 1;
	}
	.sunIce__top{
		font-size: 18px;
		margin-bottom: 25px;
	}
	.sunIce__mid{
		font-size: 18px;
		margin-bottom: 55px;
	}
	.sunIce__top::before{
		width: 60px;
		bottom: -17px;
		right: 0;
	}
}
@media screen and (max-width: 600px){
	.sunIceWrap{
		padding-left: 20px;
	}
	.sunIce__hd{
		font-size: 30px;
		margin-bottom: 10px;
		line-height: 1;
	}
	.sunIce__top{
		font-size: 12px;
		margin-bottom: 20px;
	}
	.sunIce__mid{
		font-size: 12px;
		margin-bottom: 30px;
	}
	.sunIce__top::before{
		width: 50px;
		bottom: -15px;
		right: 0;
	}
}

/* ----- sunGoods --------- */
.sunGoods{
	padding-inline: 10px;
}
.sunGoodsWrap{
	padding-block: 25px;
	background: url(../images/sunGoodsWrap-bg.jpg) no-repeat center center / cover;
}

/* top */
.sunGoodsTop{
	display: flex;
	align-items: flex-end;
	padding-right: 5px;
}
.sunGoodsTop__pic{
	flex: 1;
}
.sunGoodsTopBody{
	width: fit-content;
}
@media screen and (min-width: 601px){
	.sunGoodsTopBody{
		margin-bottom: 35px;
	}
}
@media screen and (max-width: 600px){
	.sunGoodsTopBody{
		margin-bottom: 20px;
	}
	.g-sunProduct--sunGoodsTop .g-sunProduct__name,.g-sunProduct--sunGoodsTop .g-sunProduct__pirce{
		font-size: 10px;
	}
	.g-sunProduct--sunGoodsTop .g-sunProduct__buy{
		font-size: 9px;
	}
}

/* middle */
.sunGoodsMid{
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	padding-left: 15px;
}
.sunGoodsMid__body{
	width: fit-content;
}
.sunGoodsMid__pic{
	flex: 1;
}
@media screen and (max-width: 600px){
	.g-sunProduct--sunGoodsTop .g-sunProduct__name,.g-sunProduct--sunGoodsTop .g-sunProduct__pirce{
		font-size: 10px;
	}
	.g-sunProduct--sunGoodsTop .g-sunProduct__buy{
		font-size: 9px;
	}
}

/* sunGoodsTexts */
.sunGoodsTexts{
	display: flex;
	justify-content: center;
	align-items: start;
	font-weight: bold;
	color: var(--WHITE);
	letter-spacing:0em;
	font-family: var(--FF_UDD);
}
.sunGoodsTexts li{
	position: relative;
}
.sunGoodsTexts__1{
	background: url(../images/sunGoodsTexts__1-bg.png) no-repeat center center / 100%;
}
.sunGoodsTexts__2{
	background: url(../images/sunGoodsTexts__2-bg.png) no-repeat center center / 100%;
}
.sunGoodsTexts__3{
	background: url(../images/sunGoodsTexts__3-bg.png) no-repeat center center / 100%;
	transform: rotate(10deg);
}
.sunGoodsTexts__1::before{
	content: "";
	display: inline-block;
	background: url(../images/sunGoodsTexts__1-deco.png) no-repeat center center / 100%;
	aspect-ratio: 61/53;
	position: absolute;
	z-index: 2;
}
.sunGoodsTexts__3::before{
	content: "";
	display: inline-block;
	background: url(../images/sunGoodsTexts__3-deco.png) no-repeat center center / 100%;
	aspect-ratio: 48/47;
	position: absolute;
	z-index: 2;
}
@media screen and (min-width: 601px){
	.sunGoodsTexts{
		font-size: 16px;
	}
	.sunGoodsTexts__1{
		padding: 10px 25px 20px 16px;
	}
	.sunGoodsTexts__2{
		padding: 15px 35px 25px 20px;
		margin-top: 20px;
	}
	.sunGoodsTexts__3{
		padding: 10px 45px 25px 25px;
		}

	.sunGoodsTexts__1::before{
		width: 21px;
		bottom: 7px;
		right: 10px;
	}
	.sunGoodsTexts__3::before{
		width: 16px;
		top: 16px;
		right: 15px;
	}
}
@media screen and (max-width: 600px){
	.sunGoodsTexts{
		font-size: 9px;
	}
	.sunGoodsTexts__1{
		padding: 10px 20px 17px 10px;
	}
	.sunGoodsTexts__2{
		padding: 6px 20px 15px 20px;
		margin-top: 20px;
	}
	.sunGoodsTexts__3{
		padding: 10px 20px 18px 10px;
	}

	.sunGoodsTexts__1::before{
		width: 14px;
		bottom: 5px;
		right: 5px;
	}
	.sunGoodsTexts__3::before{
		width: 11px;
		top: 13px;
		right: 5px;
	}
}

/* sunGoodsPics */
.sunGoodsPics {
	transform: scale(1.15);
	padding-bottom: 50px;
}
@media screen and (min-width: 601px){
	.sunGoodsPics{
		margin-top: -55px;
	}
}
@media screen and (max-width: 600px){
	.sunGoodsPics{
		margin-top: -40px;
	}
}

/* ボタン */
.sunBtn{
	padding-bottom: 80px;
	margin-inline: auto;
}
.sunBtn a{
	display: block;
	color: var(--WHITE);
	background: var(--DARK02);
	font-family: var(--FF_UDD);
	font-weight: bold;
	position: relative;
	text-align: center;
	border-radius: 8px;
	letter-spacing: 0em;
}
.sunBtn a::before{
	content: "";
	display: inline-block;
	background: url(../images/sunBtn-arrow.svg) no-repeat center center / 100%;
	aspect-ratio: 12/25;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.sunBtn a::after{
	content: "";
	display: inline-block;
	background: url(../images/sunBtn-click.svg) no-repeat center center / 100%;
	aspect-ratio: 1/1;
	position: absolute;
	transition: transform 2s ease-out;
}

/* クリックのアニメーション */
@media screen and (min-width: 601px){
	.sunBtn a.in-view::after {
		transform: translateX(60px);
	}
}
@media screen and (max-width: 600px){
	.sunBtn a.in-view::after {
		transform: translateX(60px);
	}
}
@media screen and (min-width: 601px){
	.sunBtn{
		width: 350px;
	}
	.sunBtn a{
		padding-block: 14px;
		font-size: 17px;
	}
	.sunBtn a::before{
		width: 6px;
		right: 30px;
	}
	.sunBtn a::after{
		width: 28px;
		bottom: 1px;
		right: 60px;
	}
}
@media screen and (max-width: 600px){
	.sunBtn{
		width: 300px;
	}
	.sunBtn a{
		padding-block: 14px;
		font-size: 17px;
	}
	.sunBtn a::before{
		width: 6px;
		right: 30px;
	}
	.sunBtn a::after{
		width: 28px;
		bottom: 1px;
		right: 60px;
	}
}

/* --------背景白------ */
@media screen and (min-width: 601px){
	.sunwhiteBg{
		width: 100%;
		height: 600px;
		background: var(--WHITE);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
	}
}


/* footer */
.sunFooterSns{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 25px;
}
.sunFooterSns li a{
	display: block;
	background:  no-repeat center center / 100%;
	aspect-ratio: 1/1;
}

.sunFooterEnquete{
	margin-inline: auto;
}
.sunFooterEnquete a{
	display: block;
	background: var(--YELLOW02);
	border-radius: 100px;
	color: var(--WHITE);
	position: relative;
	text-align: center;
	padding-block: 10px;
	margin-inline: auto;
	font-weight: bold;
}
.sunFooterEnquete a::before{
	content: "";
	display: inline-block;
	background: url(../images/sunFooterEnquete-target.svg) no-repeat center center / 100%;
	aspect-ratio: 79/75;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.sunFooterEnquete__text{
	display: inline-block;
	transform: translateX(-10px);
}
@media screen and (min-width: 601px){
	.sunFooter{
		padding-block: 150px 80px;
		background: url(../images/sunFooter-bg.jpg) no-repeat center center / cover;
	}
	.sunFooterSns{
		margin-bottom: 40px;
	}
	.sunFooterSns li a{
		width: 50px;
	}

	.sunFooterEnquete{
		width: 350px;
	}
	.sunFooterEnquete a::before{
		width: 19px;
		right: 40px;
	}
}
@media screen and (max-width: 600px){
	.sunFooter{
		padding-block: 60px 40px;
		background: url(../images/sunFooter-bg.jpg) no-repeat center bottom / 100%;
	}
	.sunFooterSns{
		margin-bottom: 30px;
	}
	.sunFooterSns li a{
		width: 30px;
	}

	.sunFooterEnquete{
		width: 300px;
	}
	.sunFooterEnquete a::before{
		width: 18px;
		right: 25px;
	}
}

/* --------アニメーション------- */
/* 上下にふわふわ */
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
.floating {
  animation: float 3s ease-in-out infinite;
}

/* 左右に動く */
@keyframes rotate {
  0% {
		transform: rotate(0deg);
  }
  100% {
    transform: rotate(25deg);
  }
}
.rotate{
	animation: rotate 1s steps(2) infinite;
}

/* 文字が左から徐々に現れる */
.reveal-text {
  display: inline-block;
  white-space: pre-wrap;
}

.reveal-text .char {
  display: inline-block;
	white-space: pre;
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.reveal-text.active .char {
  opacity: 1;
  transform: translateX(0);
}