@charset "UTF-8";
html,body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,p,figure{margin:0;padding:0;list-style:none;}
html{font-size:16px;line-height:1.5;scroll-behavior:smooth;}
body{
	background:#FFF;
	color:#222;
	width:100%;
}
h1{
	font-size:3rem;
}
h2,h3{
	font-size:2rem;
}
h4{
	font-size:1.5rem;
}
a{
	color:#222;
	text-decoration:none;
}
main{
	text-align:center;
}
section{
	position:relative;
	padding:5rem 0;
	overflow:hidden;
}

.inner{
	position:relative;
	max-width:1280px;
	margin:0 auto;
}
.headline{
	margin:0 12.5%;
}
.text{
	margin-top:2em;
	line-height:2em;
	text-align:left;
}
.subtext{
	margin-bottom:0.5em;
}
.content{
	margin-top:3rem;
}
.content .text{
	line-height:1.5em;
}
.action{
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	gap:1rem;
	margin-top:3rem;
	text-align:center;
}
.reg-mark{
	vertical-align:10%;
	margin-left:0.05em;
	font-weight:normal;
}
.flex-middle{
	display:flex;
	align-items:center;
	justify-content:center;
}
h2.logo{
	margin-bottom:5rem;
	text-align:center;
}
h2.logo img{
	height:4rem;
	max-height:64px;
}

/* ヘッダ */
.header .inner{
	width:75%;
	max-width:720px;
}
.header{
	background:url(/wp-content/themes/wavee-plus/images/linkit/visual-header.png) top/cover no-repeat;
	padding:4rem 12.5%;
}
.header .logo{
	text-align:center;
}
.header .logo img{
	height:2.5rem;
	max-height:40px;
}
.header hgroup{
	color:#0F69AC;
}
.header .header-menu{
	display:flex;
	flex-flow:row wrap;
	gap:1rem;
	margin-top:5rem;
}
.header .header-menu a{
	display:block;
	background:#FFFFFF url(/wp-content/themes/wavee-plus/images/linkit/arrow_downward.svg) bottom/1.5rem 3rem no-repeat;
	box-sizing:border-box;
	width:10rem;
	padding:1.5rem 1.5rem 3rem;
	border-radius:8px;
	color:#0F69AC;
	font-weight:bold;
	text-align:center;
}
.header .header-menu a:hover{
	background-image:url(/wp-content/themes/wavee-plus/images/linkit/arrow_downward-hover.svg);
	background-position-y:3.25rem;
	transform:scale(1.05);
	transition:0.25s;
	box-shadow:0 2px 4px 0 rgba(0,0,0, 0.1);
}

/* カルーセルバナー */
.carousel{
	border-bottom:1px solid #CCCCCC;
	padding:0.5rem 0;
}
.carousel li a img{
	width:12rem;
	height:6rem;
	border-radius:8px;
}
.carousel li a:hover img{
	transform:scale(1.1);
	transition:0.25s;
}
.carousel .swiper-pagenation{
	text-align:center;
}
.carousel .swiper-pagination-bullet{
	opacity:0.1;
}
.carousel .swiper-pagination-bullet-active{
	background:#000000;
	opacity:0.8;
}

/* アイテムリスト */
.flex-item{
	display:flex;
	flex-flow:row wrap;
	gap:1em 1%;
}
.flex-item li{
	position:relative;
	width:100%;
	overflow:hidden;
	background:#FFFFFF;
	border-radius:8px;
}
.flex-item.col-2{
	gap:1em 1%;
}
.flex-item.col-2 li{
	width:49.5%;
}
.flex-item.col-3{
	gap:1em 1.25%;
}
.flex-item.col-3 li{
	width:32.5%;
}
.flex-item li,
.flex-item li a{
	display:flex;
	flex-flow:column;
}
.flex-item li a.flex-unit{
	display:flex;
	flex-flow:row;
}
.flex-item dl{
	padding:1.5rem;
	order:2;
}
.flex-item a:hover dt{
	color:#389DD1;
}
.flex-item .text{
	margin-top:1em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}
.flex-item figure{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	line-height:0;
	overflow:hidden;
}
.flex-item figure img{
	width:100%;
}
.flex-item a:hover figure img{
	transform:scale(1.05);
	transition:0.25s;
}

/*	ボタン	*/
.action a.button-outline,
.action a.button-fill{
	display:inline-block;
	line-height:1em;
	font-weight:bold;
	padding:1em 1.5em;
	border-radius:9999px;
	box-sizing:border-box;
}
.action a:hover.button-outline,
.action a:hover.button-fill{
	transform:scale(1.05);
	transition:0.25s;
	box-shadow:0 2px 4px 0 rgba(0,0,0, 0.1);
}

/* ビーコンとは */
#about-beacon .inner{
	z-index:2;
}
#about-beacon .headline{
	margin:0 25%;
}
#about-beacon .subtext{
	margin:0 0 0.5em 0;
}
#about-beacon .image-1,
#about-beacon .image-2{
	position:absolute;
	bottom:5rem;
	width:25%;
	max-width:80px;
}
#about-beacon .image-1{
	left:14%;
}
#about-beacon .image-2{
	left:20%;
}
#about-beacon .image-3{
	position:absolute;
	bottom:0;
	right:5%;
	width:20%;
}

/* WAVEE+ */
#products{
	background:#389DD1;
}
#products h2,
#products hgroup{
	color:#FFFFFF;
}
#products .flex-item dl{
	text-align:left;
	width:65%;
}
#products .flex-item h4{
	font-size:1rem;
}
#products .flex-item .label{
	display:flex;
	flex-flow:row wrap;
	justify-content:left;
	gap:0.5rem;
	margin-top:1.5rem;
}
#products .flex-item .label span,
#products .flex-item .label-new{
	display:inline-block;
	padding:0.75em 1em;
	color:#FFFFFF;
	font-size:0.75rem;
	font-weight:bold;
	line-height:1em;
	border-radius:8px;
}
#products .flex-item .label span{
	color:#FFFFFF;
	font-size:0.75rem;
}
#products .flex-item .label span.linebeacon{
	background:#06C755;
}
#products .flex-item .label span.ibeacon{
	background:#000000;
}
#products .flex-item .label span.gateway{
	background:#EEEEEE;
	color:#222222;
}
#products .flex-item .label-new{
	position:absolute;
	top:8px;
	left:8px;
	background:#0F69AC;
	color:#FFFFFF;
}
#products .flex-item figure{
	background: #EAF5FB;
	width:35%;
}
#products .flex-item figure img{
	width:75%;
	max-width:160px;
}
#products .action a.button-outline{
	border:1px solid #FFFFFF;
	color:#FFFFFF;
}
#products .action a:hover.button-outline{
	background:#FFFFFF;
	color:#389DD1;
}

/* お問い合わせ */
.contact{
	background:#0F69AC url(/wp-content/themes/wavee-plus/images/linkit/visual-contact.png) center/cover no-repeat;
	color:#FFFFFF;
	padding:3rem 0;
}
.contact .headline{
	margin:0 25%;
}
.contact .title{
	font-size:2rem;
	font-weight:bold;
	text-align:center;
	position:relative;
}
.contact .title img{
	margin:0 1rem;
	width:5rem;
	max-width:80px;
	height:5rem;
	max-height:80px;
	vertical-align:middle;
}
.contact .action{
	flex-flow:column wrap;
	margin-left:25%;
	margin-right:25%;
}
.contact .action a.button-fill{
	background:#FFFFFF;
	color:#0F69AC;
	font-size:1.5rem;
}
.contact .action a:hover.button-fill{
	color:#389DD1;
}

/* Linkit */
#linkit .flex-item.col-2 li{
	background:#F5F5F5;
}
#linkit .headline.feature{
	margin-top:5rem;
}
#linkit .flex-item.col-3 li{
	background:#FEFAE9;
}
#linkit .flex-item.col-3 figure img{
	width:75%;
	max-width:240px;
	margin:1.5rem 0;
}
#linkit .flex-item.col-3 li.link{
	background:#FFFFFF;
}
#linkit .flex-item.col-3 .link dt{
	line-height:0;
}
#linkit .flex-item.col-3 .link img{
	width:5rem;
	max-width:80px;
	height:5rem;
	max-height:80px;
}
#linkit .action a.button-outline,
#case-study .action a.button-outline{
	border:1px solid #222222;
}
#linkit .action a:hover.button-outline,
#case-study .action a:hover.button-outline{
	border:1px solid #389DD1;
	color:#389DD1;
}

/* 活用事例 */
#case-study{
	background:#F5F5F5;
}
#case-study .flex-item.col-3 .label{
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	top:1.5rem;
	left:1.5rem;
	background:#FFFFFF;
	border-radius:9999px;
	width:6em;
	max-width:96px;
	height:6em;
	max-height:96px;
	font-weight:bold;
	text-align:center;
	z-index:2;
}
#case-study .flex-item.col-3 .link .action{
	margin-top:0;
}

/* カスタムメイド */
#custom-made{
	background:#000000 url(/wp-content/themes/wavee-plus/images/linkit/visual-custom-made.png) center/cover no-repeat;
	color:#FFFFFF;
}
#custom-made .flex-item.col-3 dl{
	padding-top:0;
	order:3;
}
#custom-made .flex-item.col-3 .subtext{
	margin:1.5rem 0 0;
	color:#666666;
	font-size:0.75rem;
	order:2;
}

/* 改行タグの調整 */
br.pc{
	display:none;
}
br.sp{
	display:block;
}

/* ---------------------------------------------------------------------- */
/* ブレイクポイント */
/* ---------------------------------------------------------------------- */
@media screen and (max-width:428px){
	br.pc{
		display:block;
	}
	br.sp{
		display:none;
	}
	h1{
		font-size:2rem;
	}
	h2,h3{
		font-size:1.5rem;
	}
	h4{
		font-size:1.25rem;
	}
	main{
		text-align:left;
	}
	section{
		padding:2rem 1rem;
	}
	.headline{
		margin:0 1rem;
	}
	.content{
		margin-top:2rem;
	}
	.action{
		margin-top:2rem;
	}
	.text{
		line-height:1.5em;
		margin-top:1.5em;
	}
	.headline .text{
		line-height:1.5em;
		margin-top:1em;
	}
	h2.logo{
		margin-bottom:2rem;
	}
	h2.logo img{
		height:2rem;
		max-height:32px;
	}
	.header{
		padding:2rem 2rem 0 2rem;
	}
	.header .inner{
		width:auto;
		max-width:100%;
		margin:0;
	}
	.header .logo img{
		height:2rem;
		max-height:32px;
	}
	.header nav{
		margin:2rem -2rem 0;
		padding:0.5rem 0;
		border-bottom:1px solid #ccc;
		background:#FFFFFF;
	}
	.header .header-menu{
		margin-top:0;
		gap:0;
	}
	.header .header-menu li{
		width:50%;
	}
	.header .header-menu a{
		width:auto;
		padding:1em 2em;
		background:#FFFFFF;
		border-radius:0;
		text-align:left;
	}
	.header .header-menu a:hover{
		background:#FFFFFF;
	}
	.carousel{
		display:none;
	}
	.flex-item.col-2 li,
	.flex-item.col-3 li{
		width:100%;
	}
	.flex-item li a.flex-unit{
		flex-flow:column;
	}
	.flex-item dl{
		padding:1rem;
	}
	#about-beacon{
		padding-bottom:0;
	}
	#about-beacon .headline{
		margin:0 1rem;
	}
	#about-beacon .image-1,
	#about-beacon .image-2{
		display:none;
	}
	#about-beacon .image-3{
		position:static;
		display:block;
		margin:2rem auto 0;
		width:75%;
	}
	#products .flex-item dl{
		width:auto;
	}
	#products .flex-item figure{
		padding:2rem;
		width:auto;
	}
	#products .flex-item figure img{
		width:auto;
	}
	.contact{
		padding:2rem 1rem;
		background:#0F69AC;
	}
	.contact .headline{
		margin:0 1rem;
	}
	.contact .action{
		margin:2rem 0 0;
	}
	.contact .title{
		padding:6rem 0 0;
	}
	.contact .title img{
		position:absolute;
		top:0;
		left:0;
		right:0;
		margin:0 auto;
	}
	#linkit .headline.feature{
		margin-top:2rem;
	}
	#linkit .flex-item.col-3 li{
		display:flex;
		flex-flow:row;
		justify-content:space-between;
	}
	#linkit .flex-item.col-3 dl{
		width:75%;
		order:0;
	}
	#linkit .flex-item.col-3 figure{
		width:25%;
		padding:1rem;
	}
	#linkit .flex-item.col-3 figure img{
		max-width:96px;
		margin:0;
	}
	#linkit .flex-item.col-3 .link{
		justify-content:center;
	}
	#linkit .flex-item.col-3 .link dl{
		width:auto;
		padding:1rem 1rem 0;
	}
	#linkit .flex-item.col-3 .link dt{
		text-align:center;
	}
	#case-study .flex-item.col-3 .label{
		top:1rem;
		left:1rem;
	}
	#case-study .flex-item.col-3 .link{
		background:unset;
	}
	#case-study .flex-item.col-3 .link .action{
		margin-top:1rem;
	}
	#custom-made{
		background:#000000;
	}
	#custom-made .flex-item.col-3 .subtext{
		margin:1rem 1rem 0;
	}
}