@charset "UTF-8";
/* CSS Document */
#wrapper.topPage{
	overflow: hidden;
}

/*
	common
-----------------------------------------------------------------------------------------------*/
/* ボタン */
.btnAreaS {
	margin-top: 30px;
}
a.btnBaseS {
    font-size: 2.7rem;
    padding: 30px 84px 30px 37px;
}
.btnBaseS::before {
    width: 35px;
    height: 35px;
    right: 30px;
}
.btnBaseS::after {
    right: 41px;
    width: 10px;
    height: 13px;
}
.appWalk .btnAreaS {
	margin-block: 20px;
}

@media screen and (max-width:812px){
	.btnAreaS {
		margin-top: 15px;
	}
	a.btnBaseS {
        font-size: 2.2rem;
        padding: 20px 65px 20px 34px;
	}
	.btnBaseS::before {
        width: 30px;
        height: 30px;
        right: 20px;
	}
	.btnBaseS::after {
        right: 28px;
	}
	.appWalk .btnAreaS {
		margin-block: 10px;
	}
}


/*
	KV
-----------------------------------------------------------------------------------------------*/
.kvArea {
	position: relative;
}
.kv {
	position: relative;
	z-index: 999;
}
/* 装飾 */
.kvArea::after {
    position: absolute;
    content: "";
    width: 500px;
    height: 355px;
    background: url(../images/item_top2_01.svg) no-repeat center center / cover;
    right: -35px;
    bottom: -155px;
}
/* タイトル
============================== */
.kvTit {
    position: absolute;
    width: 1085px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width:812px){
	.kvTit {
		position: absolute;
		top: 45%;
		width: 90%;
	}
	/* 装飾 */
	.kvArea::after {
		position: absolute;
		content: "";
		width: 230px;
		height: 165px;
		background: url(../images/item_top2_01.svg) no-repeat center center / cover;
        right: -55px;
        bottom: -67px;
	}
}

/*
	infoWrap
-----------------------------------------------------------------------------------------------*/
.infoWrap {
	background: var(--bgGdBlue);
    margin-top: -130px;
    padding-block: 193px 260px;
}
.news,.sns,.about {
	padding: 40px;
}
/* newsSnsWrap　共通
============================== */
.newsSnsWrap {
	display: flex;
	gap: 50px;
}
.news,.sns {
	height: fit-content;
}
/* news
============================== */
.news {
	position: relative;
	padding: 40px;
	background-color: var(--colorWhite);
	border-radius: var(--br30);
}
.newsList {
	min-height: 190px;
	overflow-y: auto;
}
.newsList li {
	display: flex;
	gap: 30px;
	font-size: 1.7rem;
	line-height: 1.3;
	padding-block: 12px;
	border-bottom: 1px solid var(--colorGrey10);
}
.newsList li:first-child {
	border-top: 1px solid var(--colorGrey10);
}
.newsList .date {
	font-size: 1.5rem;
	line-height: 1;
}
.newsList .readArea {
	font-size: 1.5rem;
	max-width: 360px;
	text-align: justify;
}

/* sns
============================== */
.sns {
	position: relative;
	z-index: 5;
}
.sns .cateTit {
	color: var(--colorMainOrange);
}
/* インスタ埋め込み */
.instImgArea {
	display: flex;
	gap: 15px;
}
.instImgArea img {
	width: 140px;
}
/* 各SNS アイコン */
.icoArea {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
}
.icoArea p {
	font-size: 1.6rem;
	font-family: var(--ffEn);
	color: var(--colorGrey50);
}
.icoArea .ico {
	display: flex;
	align-items: center;
	gap: 5px;
}
.ico .fb {
	margin-inline: 6px 10px;
}

/* about
============================== */
.aboutArea{
	position: relative;
}
.aboutArea::before {
    position: absolute;
    content: "";
    width: 320px;
    height: 320px;
    background: url(../images/item_top1_01.svg) no-repeat center center / cover;
    top: 350px;
    left: -220px;
}
.about {
	position: relative;
	background-color: var(--colorGreen10);
	background-image: var(--bgDotsGreen);
	background-size: var(--bgDotsSize);
	height: 495px;
	margin-top: 70px;
}

/* h2 */
.about .cateTit {
	color: var(--colorMainGreen);
	margin-bottom: 0;
}
/* h3 */
.aboutTit {
	position: relative;
	font-size: 2.6rem;
	font-weight: 600;
	width: fit-content;
	margin: -25px auto 0;
}

/* aboutBalloonArea */
.aboutBalloonArea {
	position: relative;
}
/* スージー */
.aboutSusie {
	position: absolute;
	top: 150px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
}
/* 吹き出し */
[class^="balloon"] {
	position: absolute;
	padding: 28px 40px;
	background: var(--colorWhite);
	border: 5px solid var(--colorGreen35);
	border-radius: 999px;
	width: fit-content;
	top: 50px;
	z-index: 1;
	text-align: center;
}
[class^="balloon"]::before {
	position: absolute;
	content: "";
	background: url(../images/item_top_balloon.svg)no-repeat center center / cover;
	width: 55px;
    height: 20px;
    bottom: -19px;
    right: 80px;
}
.balloon01 {
	left: 160px;
}
.balloon02 {
	top: 230px;
	left: 110px;
}
.balloon03Right {
	top: 35px;
	right: 140px;
}
.balloon04Right {
	top: 200px;
	right: 90px;
}
.balloon03Right::before,
.balloon04Right::before {
	right: 170px;
	transform: scaleX(-1);
}
.balloon01 .txt,.balloon04Right .txt {
	max-width: 290px;
}
.balloon03Right .txt {
	max-width: 340px;
}
[class^="balloon"] .note {
	font-size: 1.2rem;
	white-space: nowrap;
}
@media screen and (max-width:812px){
	/*
	infoWrap
	-----------------------------------------------------------------------------------------------*/
	.infoWrap {
		background: var(--bgGdBlue);
		margin-top: -100px;
		padding-block: 130px 150px;
	}
	.news,.sns,.about {
		padding: 25px;
	}
	.newsList .readArea {
		font-size: 1.3rem;
	}

	/* newsSnsWrap　共通
	============================== */
	.newsSnsWrap {
		gap: 25px;
	}
	/* news
	============================== */
	.news {
		padding: 25px;
	}
	.newsList li {
		flex-direction: column;
		gap: 5px;
		font-size: 1.4rem;
	}
	.newsList {
		min-height: 100px;
	}
	.newsList .date {
		font-size: 1.4rem;
	}
	/* sns
	============================== */
	.instImgArea img {
		width: 100%;
	}
	/* インスタ埋め込み */
	.instImgArea {
		gap: 10px;
	}
	/* 各SNS アイコン */
	.icoArea p {
		font-size: 1.2rem;
	}
	.newsSnsWrap {
		flex-direction: column;
	}
	/* about
	============================== */
	.aboutArea::before {
		width: 140px;
		height: 140px;
		top: auto;
		left: -90px;
		bottom: -60px;
	}
	.about {
		height: 730px;
		margin-top: 20px;
	}
	
	/* h3 */
	.aboutTit {
        font-size: 1.8rem;
        text-align: center;
        margin: 10px auto 0;
		line-height: 1.3;
	}
	/* 吹き出し */
	[class^="balloon"] {
		position: relative;
		border-radius: 90px;
		padding: 10px 40px;
		margin: 0 auto;
	}
	[class^="balloon"] .txt {
		letter-spacing: 0;
        font-size: 1.3rem;
        font-weight: 600;
	}
	.balloon01 {
		top: 20px;
		left: auto;
		margin-bottom: 40px;
	}
	.balloon02 {
		top: auto;
		left: auto;
		margin-bottom: 20px;
	}
	.balloon03Right {
		top: auto;
		right: auto;
		margin-bottom: 20px;
	}
	.balloon04Right {
		top: auto;
		right: auto;
		margin-bottom: 25px;
	}
	.aboutSusie {
		width: 140px;
		position: relative;
		top: auto;
	}
	[class^="balloon"]::before {
		right: 90px;
	}
}

/*
	tokyoWalk
-----------------------------------------------------------------------------------------------*/
.tokyoWalk {
    background: var(--colorbgMain);
}
.walkReadBox {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-radius: var(--br30);
	padding: 60px 30px;
	background-color: var(--colorWhite);
}
.walkReadBox .No {
    position: absolute;
    top: -37px;
    left: -10px;
}
/* tokyoWalkEvent */
.tokyoWalkEvent {
	text-align: center;
}
.tokyoWalkEvent .free {
	position: relative;
	display: inline;
	font-size: 2.3rem;
	font-weight: 700;
	letter-spacing: .3rem;
	color: var(--colorMainOrange);
}
.tokyoWalkEvent .free.op0 {
	opacity: 0;
	pointer-events: none;
}
.tokyoWalkEvent .readArea .txt {
	font-size: 1.6rem;
	font-weight: 500;
}
.stripe {
	background: var(--bgStripeOrange);
	border-radius: var(--br30);
}
.tokyoWalkEventTit {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .2rem;
    color: var(--colorWhite);
    padding-block: 8px 10px;
    margin-top: 10px;
}
/* readArea */
.tokyoWalkEvent .readArea .tit {
    position: relative;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--colorWhite);
    background-color: var(--colorMainGreen);
    width: fit-content;
    border-radius: 0px 30px 30px 0;
    margin: 20px auto 25px;
    padding: 10px 20px 10px 18px;
}
.tokyoWalkEvent .readArea .tit::before {
    position: absolute;
    content: "";
    width: 3px;
    height: 53px;
    background-color: var(--colorMainGreen);
    top: 0px;
    left: -6px;
}
.tokyoWalkEvent .txt {
	text-align: justify	;
}
/* 参加無料装飾 */
.tokyoWalkEvent .decoLine::before,
.tokyoWalkEvent .decoLine::after {
	background: var(--colorBlack);
	width: 1px;
}
/* 装飾 */
.tokyoWalk .walkList::after {
	position: absolute;
	content: "";
	width: 320px;
	height: 320px;
	background: url(../images/item_top1_01.svg);
	top: 50%;
	right: -240px;
	transform: translateY(-50%);
	z-index: 1;
}
.tokyoWalk .capacityArea {
	position: relative;
}
.tokyoWalk .walkInfoArea::before {
	position: absolute;
	content: "";
	width: 250px;
	height: 405px;
	background: url(../images/item_top2_03.svg);
    top: 110px;
    right: -220px;
	z-index: 1;
}
.tokyoWalk .PresentTxtBox::before {
	position: absolute;
	content: "";
	width: 470px;
	height: 450px;
	background: url(../images/item_top2_04.svg);
    top: -35px;
    left: -635px;
}
.walkInfoBox {
	margin-bottom: 10px;
}
@media screen and (max-width:812px){
	/* tokyoWalkEvent */
	.tokyoWalkEvent .free {
		font-size: 1.5rem;
	}
	.tokyoWalkEvent .free.op0 {
		display: none;
	}
	.walkReadBox {
		gap: 15px;
		padding: 35px 20px;
	}
	.walkReadBox .No {
		position: absolute;
		top: -20px;
		left: -5px;
	}
	.tokyoWalkEventTit {
		font-size: 1.8rem;
		margin-top: 7px;
	}
	/* readArea */
	.tokyoWalkEvent .readArea .tit {
		font-size: 1.6rem;
	}
	/* 装飾 */
	.tokyoWalk .walkList::after {
		width: 200px;
		height: 200px;
		top: 75%;
		right: -154px;
	}
	.tokyoWalk .walkInfoArea::before {
		width: 144px;
		height: 233px;
		top: auto;
		bottom: -140px;
		right: -127px;
		z-index: 0;
	}
	.tokyoWalk .PresentTxtBox::before {
		width: 323px;
		height: 310px;
		top: 210px;
		left: -370px;
	}
	/* 参加無料装飾 */
	.tokyoWalkEvent .decoLine::before,
	.tokyoWalkEvent .decoLine::after {
		background: var(--colorBlack);
		width: 1px;
		height: 11px;
	}
	.tokyoWalkEvent .decoLine::after {
		height: 17px;
	}
	.tokyoWalkEvent .readArea .txt {
		font-size: 1.4rem;
	}
}

/*
	appWalk
-----------------------------------------------------------------------------------------------*/
.appWalk {
	position: relative;
	background: var(--bgGdBlue);
	padding-block: 110px 160px;
}
.appWalk::before {
	position: absolute;
	content: "";
	width: 2480px;
	height: 60px;
	bottom: 0px;
	left: 50%;
	background: url(../images/item_appWalk\ _bottom.svg);
	transform: translateX(-50%);
}
.appWalk::after {
	position: absolute;
	content: "";
	width: 190px;
	height: 95px;
	background: url(../images/item_top1.svg);
	top: 0px;
	left: 27%;
}
.appWalk .walkTitArea {
	margin-top: -180px;
}
.appWalk .walkReadBox {
	gap: 30px;
	padding: 50px 30px 30px;
}
.appWalk .place {
	font-size: 2.5rem;
	background-color: var(--colorMainEmerald);
}
.appWalk .place span {
	font-size: 2rem;
}
.appWalk .walkReadBox .tit {
	font-size: 2.5rem;
}
.appWalk .walkReadBox .txt {
	display: block;
	font-size: 1.8rem;
	font-weight: 500;
	margin-top: 10px;
}
.appWalk .infoList [class^="label0"] {
	color: var(--colorMainEmerald);
    border: 1px solid var(--colorMainEmerald);
}
.appWalk .infoList .label01 {
	background-color: var(--colorEmerald15);
}
/* walkInfoArea */
.appWalk .walkInfoArea .tit {
	background-color: var(--colorMainEmerald);
}
.appWalk .walkInfoTxtBox1clm {
	background-color: var(--colorEmerald15);
}
.appWalk .period .walkInfoTxtBox1clm {
	background-color: var(--colorWhite);
}
.appWalk .period .walkInfoTxtBox1clm .txt {
	font-size: 2.4rem;
}
.appWalk .walkInfoBox .subTxt  {
	color: var(--colorMainEmerald);
}
.appWalk .period .walkInfoTxtBox1clm .txt span {
	font-size: 3.4rem;
}
.appWalk .walkInfoTxtBox1clm {
	min-width: 238px;
}
.appWalk .period .walkInfoTxtBox1clm {
	min-width: 520px;
}
.appWalk .period {
	position: relative;
}
.appWalk .walkInfoArea::after {
	position: absolute;
	content: "";
    width: 380px;
    height: 270px;
	background: url(../images/item_top2_01.svg);
    top: 80px;
    left: -360px;
	z-index: -1;
}
.appWalk .walkInfoArea::before {
    position: absolute;
    content: "";
    width: 383px;
    height: 366px;
    background: url(../images/item_top2_04.svg);
    top: 330px;
    right: -500px;
}
/* walkPresentArea */
.appWalk .walkPresentArea .itemTxt {
	color: var(--colorEmerald50);
}
.appWalk .PresentTxtBox {
	border: 8px solid var(--colorEmerald50);
}
.appWalk .walkTit::before {
	position: absolute;
	content: "";
	width: 140px;
	height: 150px;
	background: url(../images/item_susie_app01.svg) no-repeat center center / cover;
    top: 20px;
    right: -155px;
}
.appWalk .presentTxt .mainTxt {
	margin-bottom: 0;
}
.appWalk .presentTxt .mainTxt .blueLine::before {
	width: 240px;
}
@media screen and (max-width:812px){
	.appWalk {
		padding-block: 80px 130px;
	}
	.appWalk .place {
		font-size: 2rem;
		background-color: var(--colorMainEmerald);
        padding: 11px 20px 11px 15px;
	}
	.appWalk .place span {
		font-size: 1.4rem;
	}
	.appWalk .walkReadBox .tit {
		font-size: 2rem;
	}
	.appWalk .walkReadBox .txt {
		font-size: 1.4rem;
	}
	.appWalk .walkTitArea {
		margin-top: -120px;
	}
	.appWalk::after {
		width: 120px;
		height: 60px;
		left: 6%;
	}
	.appWalk .period .walkInfoTxtBox1clm {
		min-width: auto;
	}
	.appWalk .walkReadBox {
		gap: 20px;
        padding: 35px 20px 25px;
	}
	.appWalk .presentTxt .mainTxt .blueLine::before {
		width: 168px;
	}
	.appWalk .period .walkInfoTxtBox1clm .txt {
		font-size: 1.6rem;
	}
	.appWalk .period .walkInfoTxtBox1clm .txt span {
		font-size: 2.4rem;
	}
	.appWalk .walkInfoArea::before {
		width: 293px;
		height: 224px;
		top: auto;
		right: -257px;
		bottom: -540px;
	}
	.appWalk .walkInfoArea::after {
        width: 280px;
        height: 190px;
        top: 40px;
        left: -260px;
	}
	.appWalk .walkTit::before {
		position: static;
	}
}