@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 p {
	font-family: 'Noto Sans CJK JP', sans-serif;
	color: #4A4848;
}

.contentWrapper a {
	font-family: 'A-OTF リュウミン Pro','Ryumin Pro','Hiragino Mincho ProN','Yu Mincho',serif;
	font-weight: 500;
	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;
}

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

.CW1032{
	width: 1032px;
	margin:0 auto;
	padding: 0;
	box-sizing: border-box;
}

.CW1032FW{
	width: 1032px;
	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] .CW1032{
	width: auto;
	margin:0 auto;
	padding: 0 5vw;
	box-sizing: border-box;
}

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

html[data-browse-mode=S] .contentWrapper p {
font-family: 'Noto Sans CJK JP', sans-serif;
color: #4A4848;
font-weight: 300;
}

html[data-browse-mode=S] .anniversary a {
font-size: 8vw;
}

html[data-browse-mode=S] .contentWrapper a:hover{
	text-decoration: none;
	opacity: 1;
}


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

section#mv {
	background: url(/img/usr/freepage/2nd_anniversary/mv_bg.png) no-repeat center / cover;
	height: 532px;
	text-align: center;
	overflow: visible;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mv-wrap {
	width: 1147px;
	height: 100%;
	position: relative;
}

.mv-wrap::before {
	content: "";
	display: block;
	background: url(/img/usr/freepage/2nd_anniversary/mv_balloon_left.png) no-repeat center / contain;
	height: 578px;
	width: 251px;
	position: absolute;
	left: -186px;
	top: -12px;
}

.mv-wrap::after {
	content: "";
	display: block;
	background: url(/img/usr/freepage/2nd_anniversary/mv_balloon_right.png) no-repeat center / contain;
	height: 534px;
	width: 278px;
	position: absolute;
	right: -221px;
	top: 36px;
}
	
.mv-wrap .mv-text-top {
	margin: 0 auto;
	margin-top: -30px;
	width: 1047px;
	height: auto;
}

.mv-wrap .mv-logo {
	margin: 0 auto;
	margin-top: -20px;
	margin-bottom: -50px;
	transform: translateX(-34px);
	width: 756px;
	height: auto;
}

.mv-wrap .mv-date {
	width: 190px;
	height: auto;
	position: absolute;
	top: 209px;
	right: -26px;
}

.mv-wrap .mv-text-bottom {
	margin: 0 auto;
	width: 1147px;
	height: auto;
}

html[data-browse-mode=S] section#mv {
	flex: none;
	height: auto;
	background: none;
}

html[data-browse-mode=S] .mv-image-sp {
	width: 100%;
}


/*----------------------------------------------------------------------------------------
lead
----------------------------------------------------------------------------------------*/
section#lead {
	padding-block: 63px 85px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.lead-wrap {
	width: 940px;
	position: relative;
}

.lead-wrap img {
	width: 940px;
	height: 400px;
	position: relative;
	z-index: 2;
}

.lead-wrap::before{
	content: "";
	display: block;
	width: 367px;
	height: 245px;
	background: url(/img/usr/freepage/2nd_anniversary/lead_left_deco.png) no-repeat center / contain;
	position: absolute;
	left: -226px;
	top: 102px;
	z-index: 3;
}

.lead-wrap::after{
	content: "";
	display: block;
	width: 457px;
	height: 461px;
	background: url(/img/usr/freepage/2nd_anniversary/lead_right_deco.png) no-repeat center / contain;
	position: absolute;
	right: -284px;
	top: -7px;
	z-index: 1;
}

html[data-browse-mode=S] section#lead {
	display: none;
}


/*----------------------------------------------------------------------------------------
campaignSection
----------------------------------------------------------------------------------------*/
.campaign_head {
	position: relative;
	width: 856px;
	margin: 0 auto;
	z-index: 2;
}

.campaign_head .campaign-head-image {
	position: relative;
	width: 856px;
	margin-bottom: 56px;
	z-index: 2;
}

.campaign-item p {
	text-align: center;
	font-size: 24px;
}

html[data-browse-mode=S] .campaign-item p {
	position: relative;
	margin-top: 3vw;
	margin-bottom: 1vw;
	font-size: 4.5vw;
	z-index: 3;
}


/*---------------------------------------
campaign01
---------------------------------------*/

#suicaPenguin {
	background-color: #E8F6FF;
}

.campaign-item-01 {
	position: relative;
}

.campaign_head .campaign-01-balloon-left-image {
	width: 628px;
	height: 600px;
	position: absolute;
	top: 540px;
	left: -448px;
	z-index: 1;
}

.campaign_head .campaign-01-balloon-top-image {
	width: 683px;
	height: 525px;
	position: absolute;
	top: 117px;
	right: -449px;
	z-index: 1;
}

.campaign_head .campaign-01-cloud-image {
	width: 482px;
	height: 263px;
	position: absolute;
	top: 1140px;
	right: -465px;
	z-index: 1;
}

.campaign-01-products {
	position: relative;
	text-align: center;
	z-index: 2;
}

.campaign-01-products .campaign-01-products-image {
	margin: 49px 0 36px 0;	
	width: 561px;
	height: 561px;
}

.campaign-01-btn {
	display: flex;
	justify-content: center;
	padding-top: 62px;
	padding-bottom: 115px;
}

.campaign-01-btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 490px;
	height: 78px;
	position: relative;
	border-radius: 999px;
	background-color: #CDA046;
	color: #fff;
}

.campaign-btn .campaign-btn-arrow {
	margin: 0;
	width: 39px;
	height: 39px;
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
}

html[data-browse-mode=S] #suicaPenguin {
	background-color: #E8F6FF;
	padding-bottom: 12vw;
}

html[data-browse-mode=S] .campaign_head {
	width: 91.8vw;	
}

html[data-browse-mode=S] .campaign-head-image-sp {
	position: relative;
	width: 100%;
	margin-bottom: 4%;
	z-index: 2;
}

html[data-browse-mode=S] .campaign-01-products {
	position: relative;
}

html[data-browse-mode=S] .campaign-01-products p {
	position: relative;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-01-balloon-left-image-sp {
	width: 93vw;
	height: auto;
	position: absolute;
	top: 28%;
	left: -60%;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-01-balloon-right-image-sp {
	width: 93vw;
	height: auto;
	position: absolute;
	top: 18%;
	right: -38%;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-01-products .campaign-01-products-image {
	position: relative;
	width: 62vw;
	height: auto;
	margin: 14% 0 10% 0;
	border-radius: 20%;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-01-btn {
	display: initial;
	justify-content: center;
	width: 60%;
	padding-top: 62px;
	padding-bottom: 115px;
	margin: 0 auto;
}

html[data-browse-mode=S] .campaign-01-btn a {
	position: relative;
	width: 67vw;
	height: 14vw;
	margin: 0 auto;
	margin-top: 11vw;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-btn .campaign-btn-arrow {
	width: 9%;
	height: auto;
	right: 6%;
}

/*---------------------------------------
campaign02
---------------------------------------*/

#toteBag {
	background-color: #ADD6F0;
	overflow: hidden;
}

.campaign-item-02 {
	position: relative;
	padding-bottom: 133px;
}

.campaign-02-products {
	display: flex;
	justify-content: space-between;
	position: relative;
	width: 1032px;
	margin: 0 auto;
	margin-top: 60px;
	z-index: 2;
}

.campaign-02-image {
	width: 488px;
	height: 452px;
	position: relative;
}

.campaign-02-image img {
	width: 100%;
	height: 100%;
}

.campaign-02-image .campaign-02-badge {
	width: 125px;
	height: 125px;
	position: absolute;
	top: -35px;
	left: -28px;
}

.campaign-02-name {
	margin-top: 33px;
	margin-bottom :38px;
}

.campaign-02-btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 490px;
	height: 78px;
	position: relative;
	border-radius: 999px;
	background-color: #CDA046;
	color: #fff;
}

.campaign_head .campaign-02-balloon-left-image {
	width: 773px;
	height: 621px;
	position: absolute;
	top: 968px;
	left: -671px;
	z-index: 1;
}

.campaign_head .campaign-02-cloud-image {
	width: 683px;
	height: 372px;
	position: absolute;
	top: 52px;
	left: -594px;
	z-index: 1;
}

.campaign_head .campaign-02-balloon-right-image {
	width: 683px;
	height: 612px;
	position: absolute;
	top: 151px;
	right: -610px;
	z-index: 1;
}

.campaign-02-btn a {
	margin: 0 auto;
}

html[data-browse-mode=S] .campaign-item-02 {
	padding-bottom: 22%;
}

html[data-browse-mode=S] .campaign-02-products {
	width: 100%;
	flex-direction: column;
	margin-top: 0;
}

html[data-browse-mode=S] .campaign-02-item .campaign-02-balloon-right-image-sp {
	width: 93vw;
	height: auto;
	position: absolute;
	top: -2vw;
	right: -31vw;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-item-02 .campaign-02-balloon-left-image-sp {
	width: 59vw;
	height: auto;
	position: absolute;
	bottom: 0;
	left: -16%;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-02-image {
	width: 75%;
	height: auto;
	margin: 0 auto;
	margin-top: 12vw;
	z-index: 2;
}

html[data-browse-mode=S] .campaign-02-products .campaign-02-badge {
	width: 21%;
	height: auto;
	top: -8%;
	left: -8%;
}

html[data-browse-mode=S] .campaign-02-name {
	position: relative;
	z-index: 2;
}

html[data-browse-mode=S] .campaign-02-btn a {
	position: relative;
	width: 67vw;
	height: 14vw;
	z-index: 1;
}

/*---------------------------------------
campaign03
---------------------------------------*/

#tokyoBanana {
	background-color: #E8F6FF;
	overflow: hidden;
}

.campaign-item-03 {
	padding-bottom: 84px;
}

.campaign-03-content {
	position: relative;
	z-index: 2;
}

.campaign-03-product {
	width: 700px;
	height: 550px;
	position: relative;
	margin: 0 auto;
	margin-bottom: 42px;
}

.campaign-03-period {
	display: block;
	margin-top: 44px;
	margin-bottom: 22px;
	font-size: 28px;
	font-weight: 700;
	color: #00023F;
}

.campaign-03-product .campaign-03-product-image {
	width: 700px;
	height: 550px;
}

.campaign-03-product .campaign-03-product-icon {
	width: 230px;
	height: 230px;
	position: absolute;
	bottom: -42px;
	right: -166px;
}

.campaign-03-btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 490px;
	height: 78px;
	position: relative;
	border-radius: 999px;
	background-color: #CDA046;
	color: #fff;
	margin: 0 auto;
	margin-top: 36px;
}

.campaign-item-03 .campaign-03-balloon-left-image {
	width: 683px;
	height: 669px;
	position: absolute;
	top: 188px;
	left: -593px;
	z-index: 1;
}

.campaign-item-03 .campaign-03-cloud-left-image {
	width: 789px;
	height: 430px;
	position: absolute;
	top: 1183px;
	left: -388px;
	z-index: 1;
}

.campaign-item-03 .campaign-03-cloud-right-top-image {
	width: 683px;
	height: 372px;
	position: absolute;
	top: 60px;
	right: -666px;
	z-index: 1;
}

.campaign-item-03 .campaign-03-cloud-right-center-image {
	width: 683px;
	height: 372px;
	position: absolute;
	top: 652px;
	right: -255px;
	z-index: 1;
}

.campaign-item-03 .campaign-03-balloon-right-image {
	width: 683px;
	height: 588px;
	position: absolute;
	top: 1048px;
	right: -614px;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-item-03 {
	position: relative;
	padding-bottom: 17%;
}

html[data-browse-mode=S] .campaign-item-03 .campaign-03-balloon-left-image-sp {
	width: 90vw;
	height: auto;
	position: absolute;
	top: 56vw;
	left: -50vw;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-item-03 .campaign-03-balloon-right-1-image-sp {
	width: 97vw;
	height: auto;
	position: absolute;
	top: 52vw;
	right: -38vw;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-item-03 .campaign-03-cloud-image-sp {
	width: 85vw;
	height: auto;
	position: absolute;
	bottom: 0;
	left: -50vw;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-item-03 .campaign-03-balloon_right_2_image-image-sp {
	width: 38vw;
	height: auto;
	position: absolute;
	bottom: 0;
	right: -8vw;
	z-index: 1;
}

html[data-browse-mode=S] .campaign-03-period {
font-size: 3.5vw;
}

html[data-browse-mode=S] .campaign-03-product {
	width: 82%;
	height: auto;
}

html[data-browse-mode=S] .campaign-03-product .campaign-03-product-image {
	width: 82vw;
	height: auto;
}

html[data-browse-mode=S] .campaign-03-product .campaign-03-product-icon {
	width: 30%;
	height: auto;
	bottom: -9%;
	right: -9%;
}

html[data-browse-mode=S] .campaign-03-btn a {
	position: relative;
	width: 68vw;
	height: 14vw;
	z-index: 1;
}

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