@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

body,
html {
	font-family: 'Noto Sans JP', sans-serif, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif" !important;
}

/* web_event */
body {
	color: #3e3e3f;
}
.web_event #footer {
    background: #FFF;
}
.web_event .fnav_menu a {
    color: #71cee1;
}
.web_event .bread_wrap,
.web_event .bread_wrap a {
	background: #734f9d;
	color: #FFF;
}
.web_event .bread_wrap a:hover {
	font-weight: bold;
}
.span_wrap > span {
    display: inline-block;
}
.web_event_box {
	font-size: 120%;
	font-size: 2vw;
	line-height: 1.6;
	letter-spacing: 0px;
	text-align: center;
}
.bg_blue {
	background: #71cee1;
}
.bg_lightblue {
	background: #c8e9f0;
}
.bg_inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 60px 20px;
}
.add_inner {
	padding: 0 20px 60px;
}
.wide_inner {
	max-width: 1600px;
	margin: 0 auto;
	padding: 60px 20px;
}
.title_simple {
	color: #1cbed7;
	font-size: 160%;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
}
.title_slash {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 0.1em 1em;
	line-height: 1.4;
	color: #1cbed7;
	font-size: 170%;
	font-weight: 900;
	letter-spacing: .05em;
}
.title_slash::before,
.title_slash::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	width: 3px;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: #1cbed7;
	transform: rotate(-20deg);
}
.title_slash::after {
	left: auto;
	right: 0;
	transform: rotate(20deg);
}
.text_green {
	color: #18ad62 !important;
}
.title_slash.text_green::before,
.title_slash.text_green::after {
	background: #18ad62;
}
.c_arrow_btn {
	margin: 1.5em auto 0;
}
.c_arrow_btn > a {
	margin: .7em;
	display: inline-block;
	position: relative;
	z-index: 1;
}
.c_arrow_btn > a::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: -50%;
	right: -50%;
	bottom: 0;
	margin: auto;
	width: calc(100% + 1.4rem);
	height: calc(100% + 1.4rem);
	background: linear-gradient(180deg, rgba(238,56,73,1) 50%, rgba(198,36,43,1) 100%);
	border-radius: 50px;
}
/* .c_arrow_btn > a:hover::after {
	background: linear-gradient(180deg, rgba(238,56,73,1) 0%, rgba(238,56,73,1) 30%, rgba(198,36,43,1) 70%, rgba(238,56,73,1) 100%);
} */
.c_arrow_btn > a > span {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0.5em 2.7em 0.9em 1.3em;
	font-size: 135%;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.05em;
	color: #FFF;
	background: #ee3849;
	border-radius: 50px;
}
/* .c_arrow_btn > a:hover > span {
	background: #e13242;
} */
.c_arrow_btn > a > span::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 3;
	top: 0.3em;
	right: 0.7em;
	/* bottom: 0; */
	margin: auto;
	width: 1.5em;
	height: 1.5em;
	background: #FFF;
	border-radius: 50%;
}
.c_arrow_btn > a > span::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 3;
	top: 1em;
	right: 1.6em;
	/* bottom: 0; */
	margin: auto;
	width: 0.4em;
	height: 0.4em;
	border-left: 3px solid;
	border-bottom: 3px solid;
	transform: rotate(-135deg);
	font-size: 80%;
	color: #ee3849;
}
.s_arrow_btn {
	margin: 1.5em auto 0;
}
.s_arrow_btn > a {
	margin: .7em;
	display: inline-block;
	position: relative;
	z-index: 1;
}
.s_arrow_btn > a > span {
	position: relative;
	z-index: 2;
	display: inline-block;
	min-width: 20rem;
	padding: 0.8em 2.9em 0.8em 1.5em;
	font-size: 120%;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: #FFF;
	background: #34a263;
	border-radius: 50px;
}
.s_arrow_btn > a > span::before {
	content: "";
	display: block;
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0.7em;
	bottom: 0;
	margin: auto;
	width: 1.5em;
	height: 1.5em;
	background: #FFF;
	border-radius: 50%;
}
.s_arrow_btn > a > span::after {
	content: "";
	display: block;
	position: absolute;
	z-index: 3;
	top: 0;
	right: 1.6em;
	bottom: 0;
	margin: auto;
	width: 0.4em;
	height: 0.4em;
	border-left: 3px solid;
	border-bottom: 3px solid;
	transform: rotate(-135deg);
	font-size: 80%;
	color: #34a263;
}

.cover_box {
	background: url(../img/web_event/title_bg.png) repeat center center;
	background-size: auto 100%;
}
.cover_box .coverbox_imgarea {
	display: inline-block;
	width: 80%;
}
.coverbox_list {
	display: flex;
	justify-content: center;
	gap: .4em;
}
.coverbox_list > li {
	width: 7em;
	padding: 0 0 .1em;
	font-size: 80%;
	color: #FFF;
	background: #1ebed7;
	border-radius: 20px;
}
.coverbox_txt {
	margin: 1.5rem auto 0;
	font-weight: 500;
	color: #FFF;
	text-shadow: 1px 3px 5px #59adbe;
}

.iroiro_box {
	background: url(../img/web_event/scene_bg.png) repeat center center;
	background-size: auto 100%;
}
.iroiro_list {
	display: flex;
	justify-content: center;
	gap: 0.8rem 2rem;
	margin: 2rem auto 0;
}
.iroiro_list h3 {
	margin: 0.8rem auto 0;
	color: #1cbed7;
	font-size: 130%;
	font-weight: 900;
	letter-spacing: .05em;
}
.iroiro_list p {
	margin: 0.2rem auto 0;
	font-weight: 500;
}

.point_area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem 1rem;
    margin: 2rem auto 0;
}
.point_area > li {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; /* fix IE11 */
    position: relative;
    z-index: 1;
    width: calc(50% - .7rem);
    padding: 0 1rem 2.5rem;
    border-radius: 10px;
    background: #FFF;
}
.point_area > li.wide_flex {
    width: 100%;
}
.point_area > li > span {
    display: block;
    text-align: center;
    font-size: 130%;
    font-weight: 800;
    letter-spacing: 0.2em;
    line-height: 0.7;
    color: #71cee1;
}
.point_area > li > h3 {
	margin: 2.5rem auto 0;
	line-height: 1.7;
	text-align: center;
	font-size: 120%;
}
.point_area > li > h3 > span {
	display: inline-block;
	padding: 0 .5em;
	background: #fef001;
	line-height: 1;
	font-weight: 800;
	letter-spacing: .15em;
}
.po_txt {
	padding-bottom: 1rem;
	font-size: 80%;
	font-weight: 500;
	line-height: 1.5;
}
.po_emphasize {
	width: 20em;
	max-width: 100%;
	margin: auto auto 0;
	padding: 0.3em 1em;
	font-weight: 800;
	font-size: 90%;
	background: #e4e9ee;
	border-radius: 50px;
}
.point_area_green > li {
    background: #f0f8f3;
}
.point_area_green > li > span {
    color: #b3dcc0;
}
.point_area_green .po_emphasize {
	background: #b3dcc0;
}

.plan_box .img_wrap > img {
	width: 86%;
	max-width: 900px;
}
.plan_txt {
	margin-top: -.5em;
	font-weight: 500;
	font-size: 119%;
	color: #59585c;
}

.tool_box {
	background: url(../img/web_event/shoppingmall_white.jpg) repeat center center;
	background-size: cover;
}
.tool_box ul {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin: 1.5rem auto 0;
}

.function_list {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1rem;
	margin: 1.5rem auto 0;
	text-align: center;
	font-size: 115%;
}
.function_list > li {
	min-width: calc(33.3333% - 1rem);
	-webkit-flex: 1;
	flex: 1;
	background: #1cbed7;
	color: #FFF;
	padding: 0.7em 0 0.6em;
	font-weight: 400;
	border-radius: 5px;
	font-size: 100%;
}
.jirei_box_inner {
	padding: 1rem 2% 1rem;
	background: #ffffff;
	border-radius: 10px;
}
.jirei_icon {
	position: relative;
	z-index: 1;
	padding: 0.6em 0;
}
.jirei_icon .material-icons {
	position: absolute;
	z-index: 2;
	width: 1.4em;
	height: 1.4em;
	right: 0;
	top: 0;
	margin: auto;
	padding: 0.2em;
	border: 2px solid;
	border-radius: 50%;
	text-align: center;
	font-size: 150%;
	font-weight: 700;
	transform: rotateY(180deg);
	background: #FFF;
}

.border_title {
    position: relative;
    z-index: 1;
    padding-bottom: 0.7em;
    color: #FFF;
    font-weight: 600;
    font-size: 180%;
    line-height: 1.5;
    letter-spacing: 0.15em;
}
.border_title::after {
    content: "";
    display: block;
    width: 2.5em;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff101;
}
.border_title em {
    color: #fff101;
}
.check_ul {
    margin: 2rem auto 0;
    display: inline-block;
}
.check_ul > li {
    position: relative;
    z-index: 1;
    margin: 0.5em auto 0;
    padding: 0 0 0 2.5em;
    font-size: 135%;
    font-weight: 600;
    letter-spacing: .15em;
    color: #FFF;
    text-align: left;
    vertical-align: middle;
}
.check_ul > li::before {
	content: "";
	display: block;
	width: 1.1em;
	height: 1.1em;
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border: .15em solid;
}
.check_ul > li::after {
	content: "";
	display: block;
	width: .8em;
	height: .3em;
	position: absolute;
	z-index: 2;
	left: .3em;
	top: 0;
	bottom: 0;
	margin: auto;
	border-left: .25em solid;
	border-bottom: .25em solid;
	transform: rotate(-45deg);
	font-size: 80%;
	color: #fff101;
}



@media screen and (min-width: 1040px){
	.web_event_box {
		font-size: 120%;
	}
}
@media screen and (max-width: 950px){
	.web_event_box {
		font-size: 110%;
		font-size: 2vw;
	}
	.br_none {
		display: none;
	}
}
@media screen and (max-width: 768px){
	.web_event_box {
		font-size: 107%;
		font-size: 2.2vw;
	}
	.point_area > li > h3 > span {
		letter-spacing: 0.05em;
	}
}
@media screen and (max-width: 650px){
	.web_event_box {
		font-size: 107%;
	}
	.cover_box .coverbox_imgarea {
		width: 96%;
	}
	.coverbox_list > li {
		font-size: 92%;
	}
	.iroiro_list {
		flex-direction: column;
	}
	.iroiro_list > li {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.iroiro_img {
		order: 2;
		width: 33%;
	}
	.iroiro_text {
		min-width: 13em;
		text-align: left;
		font-size: 120%;
		line-height: 1.4;
		padding-bottom: 0.4rem;
	}
	.iroiro_list h3 {
		margin: 0 auto;
		padding-bottom: 0.3rem;
	}
	.point_area > li {
		width: 100%;
		font-size: 130%;
	}
	.point_area > li > h3 {
		line-height: 1.4;
	}
	.plan_txt {
		margin-top: 0.2rem;
		font-size: 135%;
		line-height: 1.5;
	}
	.tool_box ul {
		gap: 0;
	}
	.function_list {
		gap: 5px 5px;
		font-size: 110%;
		margin: .5rem auto 0;
	}
	.border_title {
		font-size: 150%;
		letter-spacing: 0.1em;
		line-height: 1.4;
		padding-bottom: 0.5em;
	}
	.check_ul > li {
		margin: .2rem auto 0;
		line-height: 1.5;
	}
	.title_simple {
		letter-spacing: 0.05em;
		/* line-height: 1.4; */
		padding: 0.6em 0;
		font-size: 150%;
	}
	.jirei_icon .material-icons {
		left: 0;
		top: -3rem;
	}
}
@media screen and (max-width: 479px) {
	.sp_none {
		display: none;
	}
	.bg_inner {
		padding: 50px 3%;
	}
	.add_inner {
		padding: 0 3% 50px;
	}
	.wide_inner {
		padding: 50px 3%;
	}
	.function_list > li {
		min-width: 45%;
	}
	.plan_box .img_wrap > img {
		width: 100%;
	}
}
@media screen and (max-width: 359px){
	.web_event_box {
		font-size: 90%;
	}
	.title_simple,
	.title_slash,
	.point_area > li > h3 > span {
		letter-spacing: 0;
		line-height: 1.2;
	}
	.point_area > li > h3 > span {
		padding: 0;
	}
}