@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

.contentWrapper img {
	width: 100%;
	border: 0;
    vertical-align: bottom;
}

.contentWrapper a {
	color: #00023F;
	text-decoration: none;
	transition: 0.3s;
}

.contentWrapper a:hover{
	text-decoration: none;
	opacity: 0.75;
}

.contentWrapper a:focus{
	text-decoration: none;
	outline: auto;
	outline-offset: initial;
}

.notoSerif {
	font-family: "Noto Serif JP", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.spNone{ display: block; }
.pcNone{ display: none; }

.CW1200{
	width: 1200px;
	margin:0 auto;
	padding: 0;
	box-sizing: border-box;
}

.CW1200FW{
	width: 1200px;
	margin:0 auto;
	padding: 0;
	box-sizing: border-box;
}


html[data-browse-mode=S] .spNone{ display: none; }
html[data-browse-mode=S] .pcNone{ display: block; }

html[data-browse-mode=S] .CW1200{
	width: auto;
	margin:0 auto;
	padding: 0 5vw;
	box-sizing: border-box;
}

html[data-browse-mode=S] .CW1200FW{
	width: auto;
	margin:0 auto;
	padding: 0 0;
	box-sizing: border-box;
}



/*----------------------------------------------------------------------------------------
mainVisualSection
----------------------------------------------------------------------------------------*/

#mainVisualSection{
	width: 100%;
	height: 647px;
	background-color: #8BE0FB;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	flex-direction: column;
	position: relative;
}

#mainVisualSection::after{
	content: "";
	display: inline-block;
	width: 1518px;
	height: 583px;
	background-image: url(/img/usr/freepage/suika_penguin_collab/mv_cloud_pc.png);
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 0;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
}

.mainVisualWrap{
	width: 1132px;
	margin: 0 auto 0 auto;
	position: relative;
	z-index: 1;
}

.mainVisualWrap h1{
	line-height: 1;
}

.mainVisualWrap h1 img{
	vertical-align: bottom;
}


html[data-browse-mode=S] #mainVisualSection{
	width: 100%;
	height: auto;
	background-color: #8BE0FB;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	flex-direction: column;
	position: relative;
	padding: 10vw 0 0;
}

html[data-browse-mode=S] #mainVisualSection::after{
	content: "";
	display: inline-block;
	width: 130%;
	height: 100%;
	background-image: url(/img/usr/freepage/suika_penguin_collab/mv_cloud_sp.png);
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 0;
	top: -1vw;
	left: 50%;
	transform: translateX(-50%);
}

html[data-browse-mode=S] .mainVisualWrap{
	width: auto;
	margin: 0 auto 0 auto;
	position: relative;
	z-index: 1;
	padding: 0 5vw;
}

html[data-browse-mode=S] .mainVisualWrap h1{
	line-height: 1;
}

html[data-browse-mode=S] .mainVisualWrap h1 img{
	vertical-align: bottom;
}


/*----------------------------------------------------------------------------------------
itemList
----------------------------------------------------------------------------------------*/
.item_content_c{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	position: relative;
	z-index: 5;
}

.item_content_fs{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 55px 26px;
	position: relative;
	z-index: 5;
}

.item_box{
	width: 280px;
	border-radius: 20px;
	font-size: 18px;
	position: relative;
	padding-bottom: 110px;
}

.item_img{
	aspect-ratio: 1 / 1;
	margin-bottom: 20px;
}

.item_img img{
	border-radius: 20px;
}

.item_name{
	line-height: 1.6;
	margin-bottom: 10px;
}

.item_price{
	font-weight: 700;
}

.item_price .tax{
	font-size: 14px;
}

.item_linkbox{
	text-align: center;
	font-weight: 700;
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}

.item_link{
	display: block;
	line-height: 1.6;
	padding: 16px 80px 16px 60px;
	background-color: #ffffff;
	border: 1px solid #00023F;
	border-radius: 50px;
	position: relative;
}

.item_link::after{
	content: "";
    display: inline-block;
    width: 37px;
    height: 37px;
    background-image: url(/img/usr/freepage/suika_penguin_collab/icon_arr01.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
    position: absolute;
	z-index: 0;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
}

.item_more{
	width: 490px;
	box-sizing: border-box;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	color: #ffffff;
	line-height: 1.6;
	margin: 60px auto 0;
	padding: 16px 80px 16px 80px;
	background-color: #00023F;
	border-radius: 50px;
	position: relative;
	transition: 0.3s;
}

.item_more::after{
	content: "";
    display: inline-block;
    width: 38px;
    height: 38px;
    background-image: url(/img/usr/freepage/suika_penguin_collab/icon_arr02.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
    position: absolute;
	z-index: 0;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
}

.item_more:hover{
	cursor: pointer;
	opacity: 0.75;
}

.item_close{
	display: none;
	width: 490px;
	box-sizing: border-box;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	color: #ffffff;
	line-height: 1.6;
	margin: 60px auto 0;
	padding: 16px 80px 16px 80px;
	background-color: #14188D;
	border-radius: 50px;
	position: relative;
	transition: 0.3s;
}

.item_close::after{
	content: "";
    display: inline-block;
    width: 38px;
    height: 38px;
    background-image: url(/img/usr/freepage/suika_penguin_collab/icon_arr03.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
    position: absolute;
	z-index: 0;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
}

.item_close:hover{
	cursor: pointer;
	opacity: 0.75;
}


html[data-browse-mode=S] .item_content_c{
	display: block;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	padding: 0 7vw;
	position: relative;
	z-index: 5;
}

html[data-browse-mode=S] .item_content_fs{
	display: block;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0;
	padding: 0 7vw;
	position: relative;
	z-index: 5;
}

html[data-browse-mode=S] .item_box{
	width: 100%;
	border-radius: 6vw;
	font-size: 4.2vw;
	position: relative;
	padding-bottom: 0;
	text-align: center;
}

html[data-browse-mode=S] .item_box + .item_box{
	margin-top: 15vw;
}

html[data-browse-mode=S] .item_img{
	aspect-ratio: 1 / 1;
	margin-bottom: 5vw;
}

html[data-browse-mode=S] .item_img img{
	border-radius: 6vw;
}

html[data-browse-mode=S] .item_name{
	line-height: 1.6;
	margin-bottom: 3vw;
}

html[data-browse-mode=S] .item_price{
	font-weight: 700;
}

html[data-browse-mode=S] .item_price .tax{
	font-size: 3.2vw;
}

html[data-browse-mode=S] .item_linkbox{
	text-align: center;
	font-weight: 700;
	position: static;
	z-index: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	margin-top: 5vw;
}

html[data-browse-mode=S] .item_link{
	display: block;
	line-height: 1.6;
	padding: 3.5vw 15vw 3.5vw 15vw;
	background-color: #ffffff;
	border: 1px solid #00023F;
	border-radius: 15vw;
	position: relative;
}

html[data-browse-mode=S] .item_link::after{
	content: "";
    display: inline-block;
    width: 8vw;
    height: 8vw;
    background-image: url(/img/usr/freepage/suika_penguin_collab/icon_arr01.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
    position: absolute;
	z-index: 0;
    right: 5vw;
    top: 50%;
    translate: 0 -50%;
}

html[data-browse-mode=S] .item_more{
	width: auto;
	box-sizing: border-box;
	font-size: 4.8vw;
	font-weight: 700;
	text-align: center;
	color: #ffffff;
	line-height: 1.6;
	margin: 14vw 7vw 0;
	padding: 3.5vw 15vw 3.5vw 15vw;
	background-color: #00023F;
	border-radius: 15vw;
	position: relative;
	transition: 0.3s;
}

html[data-browse-mode=S] .item_more::after{
	content: "";
    display: inline-block;
    width: 9vw;
    height: 9vw;
    background-image: url(/img/usr/freepage/suika_penguin_collab/icon_arr02.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
    position: absolute;
	z-index: 0;
    right: 5vw;
    top: 50%;
    translate: 0 -50%;
}

html[data-browse-mode=S] .item_more:hover{
	cursor: pointer;
	opacity: 1;
}

html[data-browse-mode=S] .item_close{
	display: none;
	width: auto;
	box-sizing: border-box;
	font-size: 4.8vw;
	font-weight: 700;
	text-align: center;
	color: #ffffff;
	line-height: 1.6;
	margin: 14vw 7vw 0;
	padding: 3.5vw 15vw 3.5vw 15vw;
	background-color: #14188D;
	border-radius: 15vw;
	position: relative;
	transition: 0.3s;
}

html[data-browse-mode=S] .item_close::after{
	content: "";
    display: inline-block;
	width: 9vw;
    height: 9vw;
    background-image: url(/img/usr/freepage/suika_penguin_collab/icon_arr03.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100%;
    position: absolute;
	z-index: 0;
    right: 5vw;
    top: 50%;
    translate: 0 -50%;
}

html[data-browse-mode=S] .item_close:hover{
	cursor: pointer;
	opacity: 1;
}


/*----------------------------------------------------------------------------------------
toteBagSection
----------------------------------------------------------------------------------------*/
#toteBagSection{
	width: 100%;
	padding: 80px 0 130px;
	color: #2F2F2F;
	position: relative;
	background-color: #D5F2FA;
	background-image: url(/img/usr/freepage/suika_penguin_collab/tb_cloud_pc.png);
	background-position: center center;
	background-size: 1496px 425px;
	background-repeat: no-repeat;
}

#toteBagSection::after{
	content: "";
	display: inline-block;
	width: 540px;
	height: 154px;
	background-image: url(/img/usr/freepage/suika_penguin_collab/tb_plane.png);
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 0;
	top: 65px;
	left: 50%;
	transform: translateX(-160%);
}

.tb_title{
	width: 398px;
	margin: 0 auto 70px;
	position: relative;
	z-index: 2;
}

.tb_ribbon01{
	width: 474px;
	position: absolute;
	z-index: 1;
	top: -83px;
	right: 50%;
	transform: translateX(172%);
}

.tb_ribbon02{
	width: 491px;
	position: absolute;
	z-index: 1;
	bottom: -80px;
	left: 50%;
	transform: translateX(-160%);
}

.tb_penguin{
	width: 180px;
	position: absolute;
	z-index: 1;
	bottom: -70px;
	right: 50%;
	transform: translateX(310%);
}


html[data-browse-mode=S] #toteBagSection{
	width: 100%;
	padding: 20vw 0 28vw;
	color: #2F2F2F;
	position: relative;
	background-color: #D5F2FA;
	background-image: url(/img/usr/freepage/suika_penguin_collab/tb_cloud_sp.png);
	background-position: center 41vw;
	background-size: 145% auto;
	background-repeat: repeat-y;
}

html[data-browse-mode=S] #toteBagSection::after{
	content: "";
	display: inline-block;
	width: 120vw;
	height: 25vw;
	background-image: url(/img/usr/freepage/suika_penguin_collab/tb_plane.png);
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 0;
	top: 8vw;
	left: 50%;
	transform: translateX(-93%);
}

html[data-browse-mode=S] .tb_title{
	width: 78%;
	margin: 0 auto 10vw;
	position: relative;
	z-index: 2;
}

html[data-browse-mode=S] .tb_ribbon01{
	width: 50%;
	position: absolute;
	z-index: 1;
	top: -17vw;
	right: 50%;
	transform: translateX(155%);
}

html[data-browse-mode=S] .tb_ribbon02{
	width: 65%;
	position: absolute;
	z-index: 1;
	bottom: -3vw;
	left: 50%;
	transform: translateX(-122%);
}

html[data-browse-mode=S] .tb_penguin{
	width: 20%;
	position: absolute;
	z-index: 1;
	bottom: -10vw;
	right: 0;
	transform: translateX(-28%);
}


/*----------------------------------------------------------------------------------------
handTowelSection
----------------------------------------------------------------------------------------*/
#handTowelSection{
	width: 100%;
	padding: 80px 0 115px;
	color: #2F2F2F;
	position: relative;
	background-color: #8BE0FB;
}

.ht_title{
	width: 440px;
	margin: 0 auto 70px;
	position: relative;
	z-index: 2;
}

.ht_penguin{
	width: 180px;
	position: absolute;
	z-index: 1;
	bottom: -80px;
	left: 50%;
	transform: translateX(-330%);
}


html[data-browse-mode=S] #handTowelSection{
	width: 100%;
	padding: 18vw 0 25vw;
	color: #2F2F2F;
	position: relative;
	background-color: #8BE0FB;
}

html[data-browse-mode=S] .ht_title{
	width: 90%;
	margin: 0 auto 10vw;
	position: relative;
	z-index: 2;
}

html[data-browse-mode=S] .ht_penguin{
	width: 20%;
	position: absolute;
	z-index: 1;
	bottom: -14vw;
	left: 0;
	transform: translateX(28%);
}


/*----------------------------------------------------------------------------------------
magcupSection
----------------------------------------------------------------------------------------*/
#magcupSection{
	width: 100%;
	padding: 80px 0 130px;
	color: #2F2F2F;
	position: relative;
	background-color: #D5F2FA;
	background-image: url(/img/usr/freepage/suika_penguin_collab/mg_cloud_pc.png);
	background-position: center center;
	background-size: 1506px 442px;
	background-repeat: no-repeat;
}

#magcupSection::after{
	content: "";
	display: inline-block;
	width: 540px;
	height: 154px;
	background-image: url(/img/usr/freepage/suika_penguin_collab/mg_plane.png);
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 0;
	top: 165px;
	right: 50%;
	transform: translateX(152%);
}

.mg_title{
	width: 326px;
	margin: 0 auto 70px;
	position: relative;
	z-index: 2;
}

.mg_ribbon01{
	width: 543px;
	position: absolute;
	z-index: 1;
	bottom: -88px;
	right: 50%;
	transform: translateX(157%);
}

.mg_ribbon02{
	width: 504px;
	position: absolute;
	z-index: 1;
	top: 355px;
	left: 50%;
	transform: translateX(-191%);
}

.mg_penguin{
	width: 184px;
	position: absolute;
	z-index: 1;
	bottom: -120px;
	right: 50%;
	transform: translateX(330%);
}


html[data-browse-mode=S] #magcupSection{
	width: 100%;
	padding: 20vw 0 40vw;
	color: #2F2F2F;
	position: relative;
	background-color: #D5F2FA;
	background-image: url(/img/usr/freepage/suika_penguin_collab/mg_cloud_sp.png);
	background-position: center -13vw;
	background-size: 140% auto;
	background-repeat: repeat-y;
}

html[data-browse-mode=S] #magcupSection::after{
	content: "";
	display: inline-block;
	width: 120vw;
	height: 25vw;
	background-image: url(/img/usr/freepage/suika_penguin_collab/mg_plane.png);
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 0;
	top: 8vw;
	right: 50%;
	transform: translateX(100%);
}

html[data-browse-mode=S] .mg_title{
	width: 70%;
	margin: 0 auto 10vw;
	position: relative;
	z-index: 2;
}

html[data-browse-mode=S] .mg_ribbon01{
	width: 60%;
	position: absolute;
	z-index: 1;
	bottom: 30vw;
	right: 0;
	transform: translateX(61%);
}

html[data-browse-mode=S] .mg_ribbon02{
	width: 60%;
	position: absolute;
	z-index: 1;
	top: 141vw;
	left: 0;
	transform: translateX(-61%);
}

html[data-browse-mode=S] .mg_penguin{
	width: 23%;
	position: absolute;
	z-index: 1;
	bottom: -3vw;
	right: 0;
	transform: translateX(-28%);
}


/*----------------------------------------------------------------------------------------
keychainSection
----------------------------------------------------------------------------------------*/
#keychainSection{
	width: 100%;
	padding: 85px 0 115px;
	color: #2F2F2F;
	position: relative;
	background-color: #8BE0FB;
	background-image: url(/img/usr/freepage/suika_penguin_collab/ak_cloud_pc.png);
	background-position: center 135px;
	background-size: 1645px 1300px;
	background-repeat: repeat-y;
}

.ak_title{
	width: 589px;
	margin: 0 auto 70px;
	position: relative;
	z-index: 2;
}

.ak_ribbon01{
	width: 474px;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 50%;
	transform: translateX(185%);
}

.ak_ribbon02{
	width: 493px;
	position: absolute;
	z-index: 1;
	bottom: 5px;
	left: 50%;
	transform: translateX(-167%);
}

html[data-browse-mode=S] #keychainSection{
	width: 100%;
	padding: 13vw 0 35vw;
	color: #2F2F2F;
	position: relative;
	background-color: #8BE0FB;
	background-image: url(/img/usr/freepage/suika_penguin_collab/ak_cloud_sp.png);
	background-position: center 47vw;
	background-size: 128% auto;
	background-repeat: repeat-y;
}

html[data-browse-mode=S] .ak_title{
	width: 90%;
	margin: 0 auto 10vw;
	position: relative;
	z-index: 2;
}

html[data-browse-mode=S] .ak_ribbon01{
	width: 65%;
	position: absolute;
	z-index: 1;
	bottom: 10vw;
	right: 0;
	transform: translateX(50%);
}

html[data-browse-mode=S] .ak_ribbon02{
	width: 78%;
	position: absolute;
	z-index: 1;
	bottom: 3vw;
	left: 0;
	transform: translateX(-65%);
}