@charset "utf-8";
/*
/*    CSS MENU
*/
/*
*********************************************************************************
/*
/* common
/*
/*******************************************************************************/


/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
大枠 */
body{position:relative;}
body::before {
		position: absolute;
		content: "";
		z-index: 20;
		background: url(../images/howto_bg_t.webp) no-repeat right top / contain;
		width: 180vw;
		aspect-ratio: 1 / 1;
		top: 0;
		right: 0;
		z-index: 1;
		}
body::after  {
	position: absolute;
	content: "";
	background: url(../images/announce_bg.png) no-repeat center top / contain;
	width: 50%;
	aspect-ratio: 1/1;
	top: 0;
	left: -6vw;
		z-index:2;
}
#wrapper {
position:relative;
z-index:3;
}
/*------------------------------------------------------------------------------
--------------------------------------------------------------------------------
li */
.li_dot > li {
	position: relative;
	padding-left: 1.2em;
}

.li_dot > li+li {
	margin-top: 2vw;
}
.li_dot > li:before {
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
}

/*
*********************************************************************************
/*
/* header
/*
/*******************************************************************************/
header {
	position: relative;
	overflow: hidden;
	& > * {
		position: relative;
		z-index: 10;
	}
	.product {
		padding: 5vw 10vw 0;
	}
}
/*
*********************************************************************************
/*
/* main
/*
/*******************************************************************************/

#announce {
	position: relative;
	padding-top: 17vw;
	padding-bottom: 17vw;
	
	& > * {
		position: relative;
		z-index: 10;
	}
	.board {
		background: #fff url(../images/announce_masu.png) repeat center top / 16px;
		padding: 17vw 3vw 8vw 3vw;
		position: relative;
		box-shadow: 0 0px 5vw rgba(0, 0, 0, 0.16);
		text-align: center;
	}
	.tl {
		background: var(--pink);
		color: #fff;
		text-align: center;
		line-height: 1.3;
		font-size: 2.2rem;
		padding: 3vw;
		margin-bottom: 4vw;
	}
	.board_txt {
		font-size: 2rem;
		text-align: center;
		line-height: 1.4;
	}
	.board_txt > p + p {
		margin-top: 0.7em;
	}
	.notice {
		margin-top: 10vw;
	}
	.notice > dt {
		border: 1px solid var(--color);
		padding: 0.7vw 3vw 1.3vw 3vw;
		margin-bottom: 2.5vw;
	}
	.notice > dd {
		font-size: 1.4rem;
		letter-spacing: 0;
		line-height: 1.4;
	}
}

.site_name {
	background: var(--pink);
	color: #fff;
	border: 2px solid var(--color);
	border-radius: 2vw;
	position: absolute;
	top: -12vw;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 82vw;
}
.site_name::before,.site_name::after {
	background: var(--color);
	width: 3vw;
	aspect-ratio: 1/1;
	position: absolute;
	content: "";
	top: 50%;
	left: -1.5vw;
	transform: translate(0%, -50%);
	border-radius: 100vw;
}

.site_name::after {
	top: 50%;
	left: auto;
	right: -1.5vw;
	transform: translate(0%, -50%);
}
.site_name .name {
	font-weight: 700;
	padding: 3vw 0vw 4vw 0vw;
}

.site_name .name .en {
	display: block;
	font-size: 2.8rem;
	letter-spacing: 0.2em;
}

.site_name .name .ja {font-weight: 500;padding-top: 1vw;display: block;}

.board_in .lead {
	font-weight: 500;
	letter-spacing: 0.05em;
	font-size: 2.1rem;
	margin-bottom: 2vw;
}


.board_in .sanka {
	margin-bottom: 4vw;
}

.board_in .present {
	background: rgb(231 44 101 / 31%);
	font-weight: 500;
	letter-spacing: 0.05em;
	font-size: 2.1rem;
	margin: 0 auto 4vw;
	padding: 3vw 0;
	border-radius: 2vw;
	width: 82vw;
}

.board_in .view dt span {
	background: linear-gradient(transparent 48%, rgb(255 236 0 / 33%) 0%);
}


.board_in .view a {
	display: block;
	background: var(--color);
	color: #fff;
	text-decoration: none;
	font-size: 3rem;
	padding: 4vw 4vw 6vw 4vw;
	margin: 5vw auto 0;
	width: 70vw;
	position: relative;
	border: 3px solid #ffec00;
}
.board_in .view a::before {
	position: absolute;
	content: "";
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	background: #ffec00;
	width: 3vw;
	aspect-ratio: 1/1;
	bottom: 2vw;
	right: 2vw;
}


.pin {
	width: 10vw;
	height: 6vw;
	display: inline-block;
	position: relative;
	vertical-align: middle;
}

.pin::before {
	position: absolute;
	content: "";
	z-index: 2;
	background: url(../images/pin.png) no-repeat center center / contain;
	width: 10vw;
	height: 13vw;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
}

.pin::after {
	position: absolute;
	content: "";
	width: 0.6vw;
	height: 4vw;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%, 0%);
	border-radius: 100vw;
}
.board_in .view a .pin {
	margin-top: -4px;
	margin-right: 0.2em;

}

.li_dot > li .pin {
	width: 6vw;
	height: 4vw;
}

.li_dot > li .pin::before {
	width: 5.5vw;
	height: 5vw;
}

/*
*********************************************************************************
/*
/* footer
/*
/*******************************************************************************/
footer {
	padding: 7vw 5vw;
	.bnr_offical {
		width: 60vw;
		margin: 0 auto 5vw;
	}
	small {
		display: block;
		font-size: 1.2rem;
		text-align: center;
	}
}